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

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

Pagespeed Insight の読み込み速度改善
12/09/23

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

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

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

スポンサーリンク

現時点での読み込み速度

PageSpeed Insightsの計測結果（2023年12月8日時点）

PageSpeed Insights指標
クリックで拡大
PageSpeed Insightsスコア
クリックで拡大

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フォント）→ヒラギノ角ゴ，メイリオ（デフォルト）のフォントに変更（2024/03/16現在）

プラグイン：
　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 の広告表示設定

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

Googleアドセンスの自動広告で収益を上げるには？ガタ落ちしたページエクスペリエンスの改善法
アドセンスの自動広告で収益を上げるには、分析ツールを利用して収益化を妨げる問題に対処することも大切ですが、さらに重要なのが集客です。
manamahna.com
04/30/24

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

<script async src=……………………………（略）…………………………………………</script>

ConoHa WING の高速化設定

WEXAL高速化1

「サイト管理」→「高速化」→「WEXAL」で「WEXAL® Page Speed Technology®」の設定を「ON」にする。

WEXAL高速化２

基本設定：
最適化モード：スタンダード
自動最適化：ON

設定が完了すると、「ステータス」が「最適化完了」に変わる。

WEXAL高速化３

Webコンテンツ最適化：
画像最適化：ON
画像圧縮レベル：80
CSS最適化：ON
JavaScript最適化：ON

＊画像・CSS・JavaScriptが軽量化される。

WEXAL高速化４

ファーストビュー高速化：
LazyLoad（画像）：無効
LazyLoad（CSS・JavaScript）：有効（2024年4月末に適用）

＊デザインが崩れてしまうようなら、両方とも無効に。

WEXAL高速化５

タブを「WEXAL」から「キャッシュ」に変更し、「ブラウザキャッシュ」の「利用設定」を「ON」にする。

コンテンツキャッシュの利用設定は「OFF」の状態で選択できない。

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

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

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

ConoHa WING 公式サイト >>

Cocoon 設定

全体

サイトフォント：ヒラギノ角ゴ，メイリオ（デフォルト）

＊WebフォントはPageSpeed Insightsのスコアを20点近く低下させる。

サイト高速化

✔　ブラウザキャッシュの有効化
✔　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’ の中）」を変える必要あり。そのほかのコードは、どんなサイトにもそのまま使えるはず。

参考記事：

reCAPTCHAでContact Form 7のお問い合わせフォームに届くスパムメール対策｜表示速度の低下対策も（初心者向け）
お問い合わせに届くスパムメール対策にはreCAPTCHAがお勧めですが、表示の仕方や速度の低下にも注意が必要です。
manamahna.com
04/30/24

EWWW Image Optimizer 設定

モバイルユーザビリティのエラー｜問題はないのに「問題が検出されました」通知が来たら
問題はないのにモバイルユーザビリティに問題があるというエラー通知を受け取るのは、たいてい表示速度に問題があるからです。
manamahna.com
04/30/24

基本

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

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

高度な設定

Plaid：
✔　What happens when you enable Ludicrous Mode.

リサイズ

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

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

変換

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

WP Fastest Cache 設定

WP Fastest Cache

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

キャッシュを削除

その他の対策

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

参考記事：

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

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

最後に

私の場合、

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

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

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

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

スポンサーリンク
タイトルとURLをコピーしました