事前読み込みの設定については気にはなっていたんです。何で事前読み込みなんて事をしているんだろうと。
2018年4月に正式版リリースらしいので、少し歴史がある…なんか色々あったんだろうと思い、とりあえず比較的いまよりはまっさらな状態のPSIのスコアを晒します。
PSI ブログ計測初期の数値
これは記事のページを測定したものです。PSIの数値に悩める皆さん、これは記事ページのスマホの数値です。PCからの数値は良くて当たり前です。
それで、このパフォーマンスの数値62は改善すべき数値です。
ということで、プラグイン以外の全てのキャッシュ系をオンにします。
テーマとサーバーで設定できる高速化です。
テーマはCSS縮小とJavaScript縮小化にチェック。Lazy Loadはスルーで、Googleフォントの非同期読み込みを有効にしてcocoonの設定は終わり。
サーバーの方はConoHaを使っているので、ブラウザキャッシュとWEXALⓇ Page Speed Technologyをオンにしました。
PSI ブログ計測中期の数値
この段階でパフォーマンスの数値は76でした。
実際は時間帯によってバラバラで、最高は82です。スマホで80台をキープできればとりあえずの合格としますが、平均は80に満たなかったので不合格とします。
この時点で入れてるプラグインの数は10です。
ちなみに自分はプラグインのキャッシュ系はAPCu以外嫌いなので、この時点でそれ系のは一切入っていません。
キャッシュ機能を持つプラグインは入っていますが、その機能は使っていません。
さて、ここでページのもっさり感が気になって仕方がなかったので、APCu Managerを入れる事にしました。
APCu Managerに関しては【WordPress】ページ表示のもっさり感を解消するならプラグイン：APCu Managerがオススメ【cocoon】にて書いています。
APCu Manager自体は扱いやすく、設定項目も殆どないに等しいので入れてしまえば後は簡単です。そしてPSIで再び計測してみた所、先ほどの数値と大して変わらずでした。ほんの少し上がって、80台ギリ前半をキープしている感じです。
たしかにメモリに記憶して、それを出し入れして表示しているからページの表示は早くはなったけど、PSIさんにハッキリと言われます…「あんたのところのJavaScriptなんとかせい」と。
事前読み込み設定に触れる
cocoon設定の高速化の下に事前読み込み設定なるものがあります。そこにはデフォルトで25もの事前読み込み設定がされています。
先に書きましたが、何かがあって事前読み込みの設定があるのでしょう。
そして、ここで言っておきますが、25にもなる設定を消せばPSIの数値は上がります。ただし、その全てが不必要という訳ではありません。
事前読み込み設定がされているモノ
大きく分けて４つになります。
必要なモノ、広告・分析、外部パーツ、アフィリエイト、４つです。
1.Googleの分析・広告関連
- www.googletagmanager.com
タグマネージャー。今のGoogleアナリティクス（GA4）を動かすためのメインエンジンです。 - www.google-analytics.com
Googleアナリティクス。アクセス解析のデータをGoogleに送る場所です。 - pagead2.googlesyndication.com
Googleアドセンス。広告の「枠」や「設定」を読み込みます。 - googleads.g.doubleclick.net
アドセンス。ユーザーに合わせた広告を配信（追跡）するためのドメインです。 - tpc.googlesyndication.com
アドセンス。広告の「画像」などの重いデータを読み込む場所です。 - ad.doubleclick.net
Google広告関連。広告のクリック計測などに使われます。
2.サイトの「見た目」や「動き」を支える（Cocoonに必須）
- ajax.googleapis.com
Googleが提供するjQueryなどのプログラム置き場。サイトの動きに必要です。 - www.gstatic.com
Googleの共通ファイル置き場。アイコンや共通のプログラムを高速で読み込むために使われます。 - fonts.googleapis.com / fonts.gstatic.com
Googleフォント。おしゃれな文字（Webフォント）を使うための設定とデータです。 - cdnjs.cloudflare.com
世界中のプログラム（ライブラリ）の配信元。アイコンフォント等でよく使われます。 - cdn.jsdelivr.net
コードのハイライト（<pre>タグの装飾）や、Cocoonの一部機能で使われる配信元です。
3.外部連携パーツ
- cse.google.com：Googleカスタム検索用。
- secure.gravatar.com：コメント欄のアバター（顔写真）用。
- cdn.syndication.twimg.com：X（Twitter）のツイート埋め込み用。
- cdn.mathjax.org：数学の難しい公式を表示するため。
- assets.pinterest.com：Pinterestの「保存」ボタン用。
- cms.quantserve.com：海外のアクセス分析サービス（日本ではほぼ不要）。
4.アフィリエイト関連
- images-fe.ssl-images-amazon.com / completion.amazon.com / m.media-amazon.com
Amazonアソシエイトの商品画像や検索機能。 - i.moshimo.com
もしもアフィリエイトの商品画像。 - aml / dalc / dalb.valuecommerce.com
バリューコマースの広告表示や計測用。
という事で、事前読み込みのほとんどを消す事にしました。
Xの埋め込みなんてしたって表示遅れしても良いし…Amazonの広告なんてテキストリンクしか使わないし…もしもは登録してるけど、もう何年も使ってないし、、、そんな感じで仕分けをしていきます。
JavaScriptの読み込みを遅延させるプラグイン：Flying Scripts
遅延といったらプラグイン：Flying Scriptsの出番です。コンマの設定は出来ませんが、確実に設定した特定のJavaScriptの遅延をさせてくれます。
ただし、やみくもに設定をしてはいけません。設定するものにとよっては機能するべき所で遅延どころか機能がオフになってしまいます。
Flying Scriptsによって遅延させたJavaScriptと配信元
googletagmanager.com
google-analytics.com
googlesyndication.com
googleads.g.doubleclick.net
adsbygoogle.js
jquery-migrate.min.js
これらを遅延させるために設定箇所に書き込み、遅延効果は遅延3s（秒）にしました。
では、PSIにて測定をしてみましょう。
（実は当初、jQuery本体も遅延させてみましたが、ソースコードの表示（タグ）が崩れてしまったため、リストから外しました。）
PSI ブログ計測後期の最終数値
サーバーの混み具合でパフォーマンスの数値は落ちますが、90台を見る事が出来たのでギリ土台が作れたと言えるでしょう。
いくらFlying Scriptsによって遅延をさせているといっても、この数値から実際に広告を貼った場合の数値は確実に落ちます。
解決したい問題はまだまだありますが、ひとまず置いておきます。
それにしてもユーザー補助ですが、ここがなぜ92なのかというと、SNSのアイコンの色合いが悪くて見づらいらしいです。
Amazon、もしも、バリューコマースの事前読み込みを消しましたが、ページの上段にでも貼らない限り、逆にあれらを遅延読み込みさせて、ページ表示を速くした方が快適に使ってくれると自分は思います。
コメント