ブログの表示速度が遅いので、改善に動いた。PageSpeed Insightsによるとモバイル速度が25、パソコンの表示速度が80になっている。
パソコンの表示速度に不満はないが、モバイル速度が遅すぎる。モバイルの表示速度がグーグルの検索順位に影響があるのに、このままではいけない。
最終的にモバイルの表示速度89点、パソコン100点になった。

テーマはCOCOONで、レンタルサーバーはカラフルボックス。これでモバイル速度をアップさせる。(私の備忘録)

スマートフォンで表示速度が遅いとすぐに離脱するよ。いつ表示されるかわからないのを待ってられないもん。
モバイル速度が遅いので、表示速度を高速化!PageSpeed Insights設定。
レンタルサーバーはカラフルボックスを使っているので、キャッシュ系プラグイン「LiteSpeed Cache」(ライトスピードキャッシュ)を使っている。
今まではLiteSpeed Cacheさえ使ってれば問題ないと思ってたが、高速するにはプラグイン以外の遅延要素も改善しなきゃならない。
なので、LiteSpeed Cache以外での設定や改善点を探した。まずはグーグル・アドセンスがあるとかなり表示速度が遅くなるので対策をねった。

COCOONの高速化設定は全てにチェックを入れておく。あとは(重複しないよう)LiteSpeed Cacheで設定した。

COCOON(コクーン)とLiteSpeed Cacheの組み合わせでどれだけ高速化できるかな?

モバイル速度の表示速度を高速化!使用していないJavaScriptの削除。
改善できる項目「使用していないJavaScriptの削除」これを改善するにはグーグル・アドセンスを遅延読み込みさせるしかない。
あらかじめCOCOON設定の広告から以下のアドセンスコードを削除する。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
その後、以下のコードをアクセス解析に追加する。
<script> //<![CDATA[ //lazy load ads var lazyloadads = false; window.addEventListener("scroll", function() { if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) { (function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyloadads = true; } }, true) //]]> </script>
このソースコードをCOCOON設定→アクセス解析→フッター用コードに入力保存。これでアドセンス広告への対策は終わり。

それでも「使用していないJavaScriptの削除」としての対策は終わってない。次は本格的に動く。

ソースコードをコピペできて楽。あらかじめアドセンスの自動広告はオフにしないとね。

モバイル速度の表示速度を高速化!レンダリングを妨げるリソースの除外。
結局、PageSpeed Insightsでの点数を下げるのは重要ではない要素が先に読み込まれるから。※この設定は後日削除した。
例えば画像が表示されなくてもテキスト(文章)が先に表示されれば読者は読み進められる。重要じゃない要素は最後(フッター)で読み込ませる。
//レンダリングブロックしているJavascriptの読み込みを遅らせる function move_scripts_head_to_footer_ex(){ //ヘッダーのスクリプトを取り除く remove_action('wp_head', 'wp_print_head_scripts', 9); remove_action('wp_head', 'wp_enqueue_scripts', 1); //フッターにスクリプトを移動する 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( 'the_content', '_image_dimensioning_filter_content_tags' ); add_filter( 'the_excerpt', '_image_dimensioning_filter_content_tags' ); add_filter( 'the_category_content', '_image_dimensioning_filter_content_tags' ); add_filter( 'the_category_tag_content', '_image_dimensioning_filter_content_tags' ); //add_filter( 'widget_text_content', '_image_dimensioning_filter_content_tags' ); /** * Filters specific tags in post content and modifies their markup. * * @param string $content The HTML content to be filtered. * @param string $context Optional. Additional context to pass to the filters. Defaults to `current_filter()` when not set. * @return string Converted content with images modified. */ function _image_dimensioning_filter_content_tags( $content, $context = null ) { if ( null === $context ) { $context = current_filter(); } if ( false === strpos( $content, '<img' ) ) { return $content; } if ( ! preg_match_all( '/<img\s[^>]+>/', $content, $matches ) ) { return $content; } $images = array(); foreach ( $matches[0] as $image ) { if ( preg_match( '/speech-icon-image/i', $image) ) { $images[ $image ] = 1; continue; } $images[ $image ] = 0; } foreach ( $images as $image => $attachment_id ) { if ( $attachment_id ) { $size = array(); $filtered_image = $image; if ( false === strpos( $filtered_image, ' width=' ) && false === strpos( $filtered_image, ' height=' ) ) { if ( preg_match( '/src\s*=\s*[\"|\'].*?-([0-9]{2,4})x([0-9]{2,4})\.(jpe?g|png|gif)[\"|\']/i', $image, $s ) ) { $size = array( $s[1], $s[2] ); } else { $size = array( 100, 100 ); } if ( $size ) { $filtered_image = str_replace( '<img', '<img width="' . $size[0] . '" height="' . $size[1] . '"', $filtered_image ); $content = str_replace( $image, $filtered_image, $content ); } } } } return $content; }
このソースコードをCOCOON子テーマのfunctions.phpに追記する。これでPageSpeed Insightsからレンダリングを妨げるリソースの除外は消えた。
※上記コードを入力すると「レンダリングを妨げるリソースの除外」は消えるが、ブログカードのファビコンは非表示になる。
ブログカードのファビコンよりモバイル速度の高速化を選んだが、後日削除。このコードがなくても表示速をを速くできたからだ。

LiteSpeed Cache(ライトスピードキャッシュ)のバージョンを4.4.2にしたらこのコードがなくても速く表示できた。

ブログカードのファビコンなんて読者は見てないから大丈夫。それよりスマホでの表示速度を上げなくちゃ。

モバイル速度の表示速度を高速化!Contact Form 7とreCAPTCHA。
読者からのメールを受け取るプラグイン「Contact Form 7」これにreCAPTCHA(リキャプチャ)を導入してると画面表示が遅くなる。
reCAPTCHAがブログの全ページで動いて遅くなる。なので、お問い合わせページだけreCAPTCHAが動くよう設定する。
add_action( 'wp_enqueue_scripts', function() { if( !is_page('mail') ){ wp_dequeue_style( 'contact-form-7' ); } }); add_action( 'wp_footer', function() { if( !is_page('mail') ){ wp_deregister_script( 'contact-form-7' ); wp_deregister_script( 'google-recaptcha' ); } });
このソースコードもCOCOON子テーマのfunctions.phpに追記する。間違っても親テーマに記載しちゃいけない。事前のバックアップも必要。

reCAPTCHAを使ってるとブログ表示がかなり遅くなる。だが、お問い合わせページだけ遅くなるのは問題ない。

アドセンス広告・reCAPTCHA・ツイッターとフェイスブックのタイムラインがあると、表示がかなり遅くなるね。

モバイル速度の表示速度を高速化!reCAPTCHAのプラグイン対策。
ブログのロゴマークに縦横のサイズが設定してないと「画像要素で width と height が明示的に指定されていない」と表示される。
「画像要素でwidthとheightが明示的に指定されていない」についてはカスタマイズの追加CSSに以下のコードを追加した。
追加CSSに記載しても表示される事はあるが、気にしない事にした。
.header-container-in.hlt-top-menu .logo-header img { width: 200px; height: 60px; }
あと、COCOONの会話してる表示(吹き出し)画像もサイズ指定せよ!とPageSpeed Insightsで出る。
この記事にある設定をしてたらいつの間にか改善された。どの設定が影響したかは今となっては不明。

COCOONの吹き出し画像はサイズが指定されてないからPageSpeed Insightsで忠告される。

「画像要素でwidthとheightが明示的に指定されていない」かぁ。改善点が山積みだね(笑)

モバイル速度の表示速度を高速化!ブログカードに「続きを読む」と表示。
ブログの高速化とは関係ないが、ブログカードに「続きを読む」と表示されるようにした。
ブログカードは画像と文章で記事を紹介してくれるが、実際にはスルーされてるから目立つよう「続きを読む」と表示した。
.internal-blogcard::after{ content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */ position: absolute; bottom: .5rem; right: 1rem; font-size: 70%; background-color: #ff00ff; /* 内部リンク右下枠の背景色 */ padding: .4em 3em; font-weight: bold; color: #fff; /* 内部リンク右下枠の文字色 */ border-radius: 2px; } .grecaptcha-badge { visibility: hidden; }


ブロガーはモバイル速度を上げたいが、PV数も増やしたい。あれこれやってると時間だけがなくなってゆく。

テキストリンクとブログカードどっちの方が効果あるんだろうね?まれに両方を表示してるブログがあるけど…。

モバイル速度の表示速度を高速化!第三者コードの影響を抑えてください。
「第三者コードの影響を抑えてください」はグーグル系の影響が大きい。アドセンス・フォント・CDN・Amazon・その他アフィリエイト広告。
「第三者コードの影響を抑えてください」の対処法はPageSpeed Insightsで指摘されたURLをCOCOONに貼り付けるだけ。高速化→事前読み込み設定。
デフォルトで入ってたのに追加したら以下のようになった。
- www.googletagmanager.com
- www.google-analytics.com
- ajax.googleapis.com
- cdnjs.cloudflare.com
- pagead2.googlesyndication.com
- googleads.g.doubleclick.net
- tpc.googlesyndication.com
- ad.doubleclick.net
- www.gstatic.com
- cse.google.com
- fonts.gstatic.com
- fonts.googleapis.com
- cms.quantserve.com
- secure.gravatar.com
- cdn.syndication.twimg.com
- cdn.jsdelivr.net
- images-fe.ssl-images-amazon.com
- completion.amazon.com
- m.media-amazon.com
- i.moshimo.com
- aml.valuecommerce.com
- dalc.valuecommerce.com
- dalb.valuecommerce.com
- doubleclickbygoogle.com
- fonts.google.com
- www.jsdelivr.com
- developers.google.com
- cdnjs.com
- www.googletagservices.com
- tpc.googlesyndication.com
- www.googletagservices.com
- www.doubleclickbygoogle.com
- googleads.g.doubleclick.net
- vimeo.com
- f.vimeocdn.com
- i.vimeocdn.com
- i.ytimg.com
- i.imgvc.com
- use.fontawesome.com
- www.image-rentracks.com
- www21.a8.net
- www22.a8.net
- www26.a8.net
- www27.a8.net
- www28.a8.net
- www29.a8.net
- www.afi-b.com
- img.felmat.net
- ad.jp.ap.valuecommerce.com
- blogparts.blogmura.com
- hbb.afl.rakuten.co.jp
これでパソコンでの「第三者コードの影響を抑えてください」は出なくなった。モバイルに関しては高速化されないようだ。
まぁパソコンだけでも「第三者コードの影響を抑えてください」は出なくなるので、そのままにした。

プラグインを使う手もあるかも知れないが、できるだけ使いたくない。プラグインは必要最小限にする。

グーグル・Amazon・アフィリエイト広告が遅さの原因。COCOONの高速化設定にコピペするだけだから簡単だね。

ワードプレスを高速化!最初のサーバー応答時間を速くしてください。
ここまでJava Script等を事前に読み込ませたり、遅延させたりして表示速度アップさせてきた。だが、レンタルサーバーが遅いとどんだけ頑張っても限界がある。
このブログではカラフルボックスを3年契約で使っている。3年契約だと月額528円と格安。BOX1のプランだと10万PVまでなら充分な速度が出る。
キャッシュ系プラグイン「LiteSpeed Cache」(ライトスピードキャッシュ)を使えるのも嬉しい。これがあると他のプラグインをだいぶ削減できる。
もし、他社のサーバーを使っててPageSpeed Insightsで「最初のサーバー応答時間を速くしてください」と出たならカラフルボックスに乗り換えよう。

安さと速さを両立したのがカラフルボックス。30日間は無料だから試してみよう。

1ヶ月あたり528円って安いね!独自ドメインとレンタルサーバーを一緒に管理できるのは楽だね。

モバイル速度が遅いので、表示速度を高速化!COCOON設定。
COCOONにこれまでの設定をしたらモバイル速度が25から50になった。他人のブログ速度を計測すると25前後が多かったので、50以上出れば満足。
グーグル・アドセンスとアナリティクスを外せばより速くなるが、これは外せない。あとタグマネージャーを使ってると表示速度が遅くなるので辞めた。
ちなみにパソコンでの表示速度は90~99になっている。広告が多い記事だと80まで下がるが、これで充分。速度より記事を書いてPVを集める方が重要。
もちろん、スマートフォンもパソコン表示もPageSpeed Insights
で「ウェブに関する主な指標テストに合格しています」と出る。

PageSpeed Insights(スマートフォン)の表示速度を追求すると終わりがない。それならブログ記事を書くべき。

ある程度、表示速度が上がったら記事を書かなきゃね。ブロガーは記事を書くのが仕事。

LiteSpeed Cacheでモバイルの表示速度89点、パソコン100点。
この記事を公開した4ヶ月後、LiteSpeed Cacheのバージョンを4.4.2にしたらモバイルの表示速度89点、パソコン100点になった。
LiteSpeed Cacheの一般設定でゲストモードとゲストの最適化を「オン」にする。すると文字表示が最優先となり、全ての画像は遅く読み込まれる。
以下、PageSpeed Insightsで合格した監査 (33)
- レンダリングを妨げるリソースの除外
- 適切なサイズの画像
- オフスクリーン画像の遅延読み込み
- CSS の最小化
- JavaScript の最小化
- 使用していない CSS の削減
- 使用していない JavaScript の削減
- 効率的な画像フォーマット
- 次世代フォーマットでの画像の配信
- テキスト圧縮の有効化
- 必須のドメインへの事前接続
- 最初のサーバー応答時間は問題ない速さです
- 複数のページ リダイレクトの回避
- キー リクエストのプリロード
- アニメーション コンテンツでの動画フォーマットの使用
- JavaScript バンドル内の重複モジュールを削除する
- 最新ブラウザに従来の JavaScript を配信しないようにしてください
- Largest Contentful Paint の画像のプリロード
- 過大なネットワーク ペイロードの回避
- 静的なアセットでの効率的なキャッシュポリシーの使用
- クリティカル リクエスト チェーンを回避してください
- カスタム速度の記録と計測
- JavaScript の実行にかかる時間
- メインスレッド処理の最小化
- ウェブフォント読み込み中の全テキストの表示
- 第三者の使用の最小化
- ファサードでのサードパーティ リソースの遅延読み込み
- スクロール パフォーマンスを高める受動的なリスナーが使用されています
- document.write() は使用されていません
- メインスレッドでタスクが長時間実行されないようにしてください
- 合成されていないアニメーションは使用しないでください
- 画像要素で width と height が明示的に指定されている
- width または initial-scale を指定した <meta name=”viewport”> タグがあります
ワードプレスの表示速度は満足したが、ウェブフォント読み込みで以下の注意が出る。
- 警告:オリジンの https://cdn.jsdelivr.net の `font-display` の値を Lighthouse で確認できませんでした。
- オリジンの https://utmf.info の `font-display` の値を Lighthouse で確認できませんでした。
これらを改善させるのが今後の課題だ。

アドセンスやアフィリエイト広告を掲載してこれだけワードプレスの表示速度が早くなるとは思わなかった!設定してみるもんだ。

ワードプレスの表示速度を上げるならカラフルボックスで、「LiteSpeed Cache」(ライトスピードキャッシュ)を使おう!
ワードプレス(ブログ)関連記事。
- 無職休職中にブログ収入を得る方法!暇な時間をお金に変える。
- ブログ月間4万5千PVの収益は?アフィリエイトで稼げる目安。
- ブログ月間5万5千PV突破!記事が増えても読まれない状態を脱出。
- アフィリエイトで稼げない理由と今から副業ブログで稼ぐ方法。
- 無職が6ヶ月間ブログに専念した結果!毎月15記事書いた収益とPV数。
- ブログのアクセスと収入が伸びない?アフィリエイトで稼ぐコツ紹介。
- ブログで挫折しそうなら!訪問者ゼロから増やすおすすめ本10冊紹介。
- アフィリエイトは儲からない?収入を増やすなら複数のASPに登録。
- 在宅勤務・テレワークで机と椅子を購入!パソコンとスピーカーも紹介。
- 無職が毎日ブログ更新したら稼げるか?アフィリエイト成果報酬増加!
社会保険労務士・ファイナンシャルプランナー2級技能士
キャリアアドバイザーとして資格と転職について助言している。女性からのLINE(労働・人生)相談が多い。
プロフィール WEB作品集 お問い合わせ LINE相談