サイト内の外部リンクには、リンク先でのサービスの利用や商品の購入により、当サイトに報酬が入る「アフィリエイト広告リンク」が含まれています。詳しくはプライバシーポリシーをご覧ください。
PR

【ConoHa WING x Cocoon x アドセンス自動広告】モバイルでの読み込み速度改善対策まとめ(備忘録)

Pagespeed Insight の読み込み速度改善

自サイトのモバイルでの読み込み速度を改善するために行った試行錯誤に関する備忘録です。

アクセス数に悪影響が出ない程度に改善することが目的なので、SEOやマーケティングの素人でも気楽に手を出せそうな方法しか試していません。

また、変更すれば改善の余地があるのにそのまま放置しているものもあります。

スポンサーリンク

現時点での読み込み速度

PageSpeed Insightsの計測結果(2023年12月8日時点)

Google Search Consoleのページエクスペリエンス結果(2023年12月8日時点)

ページエクスペリエンス
スポンサーリンク

読み込み速度が低下したきっかけ・要因

  • アドセンス自動広告の導入
  • Webフォントの使用
  • reCAPTCHAの導入
  • サイズ指定のない画像と大きすぎる画像の使用

現在のサイトの仕様・環境情報

WordPressバージョン:6.4.2

PHPバージョン:7.4.33

サーバー:ConoHa WING

サーバーソフト:Apache

テーマ:Cocoon(バージョン2.6.9)+ Cocoon Child(バージョン1.1.3)

スキン:Fuwariー褐色

フォント:さわらびゴシック(Webフォント)

プラグイン
 Ad Invalid Click Protector 1.2.8
 Ads.txt Manager 1.4.3
 Advanced Editor Tools 5.9.2
 Akismet Anti-spam: Spam Protection 5.3
 BackWPup 4.0.2
 Broken Link Checker 2.2.3
 ConoHa WING コントロールパネルプラグイン 1.1
 ConoHa WING 自動キャッシュクリア 1.0.0
 Contact Form 7 5.8.4
 EWWW Image Optimizer 7.2.1
 Nelio Content 3.0.7
 Redirection 5.3.10
 Simple Download Monitor 3.9.22
 SiteGuard WP Plugin 1.7.6
 WP Fastest Cache 1.2.2
 WP Multibyte Patch 2.9
 XML Sitemap Generator for Google 4.1.13

読み込み速度改善対策

speedy

Google Adsense の広告表示設定

自動広告はオンのまま、種類・数を変更+除外エリア・ページを追加。

Cocoon設定内の「広告」→「広告コード」から読み込みに関するコードを削除。

<script async src=……………………………(略)…………………………………………</script>

ConoHa WING の設定

「WEXAL® Page Speed Technology®」の設定を「On」にする。

サーバーの処理速度が圧倒的に早い

WEXAL® Page Speed Technology®が無料で使えるConoHa WING

\WINGパック(12か月以上)の申し込みで、初回お支払い料金から5000円割引キャンペーン中/

Cocoon 設定

サイト高速化

✔ ブラウザキャッシュの有効化
✔ HTMLを縮小化する
✔ CSSを縮小化する
✔ JavaScriptを縮小化する
✔ Googleフォントの非同期読み込みを有効にする

「Lazy Loadを有効にする」にはチェックを入れない。

画像

アイキャッチの表示
✔ アイキャッチをカラム幅に引き伸ばす
  アイキャッチ画像に小さな画像を使っていても、強制的にカラム幅に拡大して表示します。

トップページのアイキャッチ画像のサイズを748 x 421px (52.7KB) → 374 x 211px (16.6KB)に変更したため。

テーマファイルエディターの編集

functions.php

/**
*コンタクトページ以外でreCAPTCHAを無効化
*/
if (!function_exists(‘dequeue_recaptcha_scripts’)) {
function dequeue_recaptcha_scripts()
{
// Contact Form 7を使用しているページのスラッグ
$contact_slugs = array(
‘contact’ // 問い合わせページのスラッグ
);
if (is_page() || is_single()) {
global $post;
$slug = $post->post_name;
$is_contact_page = in_array($slug, $contact_slugs);

if(!$is_contact_page) {
// 問い合わせページ以外で無効化
wp_dequeue_script(‘google-recaptcha’);
wp_dequeue_script(‘wpcf7-recaptcha’);
}
} else {
// 固定ページ・投稿ページ以外では無効化
wp_dequeue_script(‘google-recaptcha’);
wp_dequeue_script(‘wpcf7-recaptcha’);
}
}
add_action(‘wp_enqueue_scripts’, ‘dequeue_recaptcha_scripts’, 100, 1);
}

if(!(is_admin())){
/* JS非同期読み込み */
function replace_scripttag($tag){
if(!preg_match(‘/b(defer|async)b/’,$tag)){
return str_replace(“type=’text/javascript'”,’defer’,$tag);
}
return $tag;
}
add_filter(‘script_loader_tag’,’replace_scripttag’);
}

//レンダリングブロックしているJavaScriptの読み込みを遅らせる
function move_scripts_head_to_footer_ex(){
//ヘッダーのスクリプトを取り除く
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);

//フッターにスクリプトを移動する
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
}
add_action( ‘wp_enqueue_scripts’, ‘move_scripts_head_to_footer_ex’ );

//アイキャッチの遅延読み込みを即時読み込み
add_filter(‘post_thumbnail_html’, function($html,$post_id,$post_thumbnail_id) {
if(strpos($html,’eye-catch-image’) !== false){
if(strpos($html,’ loading=”‘) !== false){
$html = str_replace(‘ loading=”lazy”‘, ‘ loading=”eager”‘, $html);
}else{
$html = str_replace(‘<img’,'<img loading=”eager”‘,$html);
}
}
return $html;

*「お問い合わせ」のスラッグに ‘inquiry’ など、 ‘contact’ 以外のスラッグを使っている場合は、「コンタクトページ以外でreCAPTCHAを無効化」内の「お問い合わせページのスラッグ( ‘xxx’ の中)」を変える必要あり。そのほかのコードは、どんなサイトにもそのまま使えるはず。

参考記事:

EWWW Image Optimizer 設定

基本

メタデータを削除
✔ EXIF やコメント、カラープロファイルなどピクセルデータでないすべてのメタデータを削除します。API または簡単 IO を使用する際、カラープロファイルは保持されます。

画像のリサイズ:幅の上限 1024 高さの上限 0 ピクセル単位
アップロードされた画像を、この寸法(ピクセル)にリサイズします。 一括最適化 を既存のアップロードに使用する。

高度な設定

Plaid
✔ What happens when you enable Ludicrous Mode.

リサイズ

既存の画像をリサイズ
✔  既存のメディアライブラリの画像のサイズ変更を許可します。

他の画像をリサイズ
✔ メディアライブラリにはない既存の画像をサイズ変更します。「一括最適化」または「定期的な最適化」を実行時に、「最適化するフォルダー」の設定で指定された画像のサイズを変更するために使用します。

変換

変換リンクを非表示
✔ サイトやネットワークの管理者は、以下の設定を無視するメディアライブラリの変換リンクを、他のユーザーが使えないようにできます。

WP Fastest Cache 設定

WP Fastest Cache

Cocoonの高速化設定で有効化している「HTML」「CSS」「JS」「Googleフォント」の項目にはチェックを入れない。

キャッシュを削除

その他の対策

  • TinyPNGSquoosh ・ペイント3D(Windows)を利用して画像の圧縮・サイズ変更。
  • サイドバーに設置していた「ボックスナビ」内の画像にLazy Loadを適用。(注1)
  • オフスクリーン画像の遅滞読み込み。(注2:画像のHTMLに「loading=”lazy”」を追加。)
  • 使用していなかったテーマの削除。

参考記事:

注1:
 きもおたねっと。さんの『Cocoonのボックスメニューのサムネイルに「高速化」タブのlozad.js無しでLazy Loadを適用させて更なる高速化を図る

注2:
 Webテク倉庫さんの『「オフスクリーン画像の遅延読み込み」の対処方法

最後に

私の場合、

  • プラグインを厳選して数を減らす
  • Webフォントの使用をやめる

など、さらに表示速度の改善のためにできることがあると思います。

けれど、これでアクセス数が改善されてきたので、とりあえず表示速度改善対策はいったん棚上げにして、アクセス数を挙げるのに最も大切な良質な記事の増産活動に戻ります。

この備忘録が、同じような環境下で同じようなお悩みを抱えていらっしゃるみなさんのお役に立てたならうれしいです。

タイトルとURLをコピーしました