cocoonを用いたブログの表示を極限まで高速にしました。AdSenseやアソシエイトを貼った状態のままでもPageSpeed Insightsスコアがスマホ94点、PC100点満点を獲得できます。
不要なjavascript,cssの削減やwebp画像の活用、フォントのサブセット化、AdSense・Font Awesomeの遅延読み込みなどの高速化設定は全てこの記事の通りにすればできます！
この記事にほぼ全てまとめたので長くなってしまいました。
自身の該当する改善項目を下の目次から選んでそこまでジャンプしてみるのもおすすめです。
どれほどの効果なのか
先にどれだけ効果があるのかを実証しておきます。
https://pagespeed.web.dev/にて計測したのはこのブログ全体で一番重い以下の記事です。
- 文字数12,000文字
- 画像15枚
- AdSense自動広告有り
- AdSense手動広告有り
- アソシエイト商品リンク有り
- GoogleAnalytics有り
この状態で以下のスコアが出ます。
モバイル94点/パソコン100点です。
「合格した監査」は34項目です。
以下、どのようにして実現したかの備忘録です。
使用していない JavaScript の削減
Flying Scriptsというプラグインを使用して遅延読み込みさせることでこの項目の改善ができます。
https://ja.wordpress.org/plugins/flying-scripts/をダウンロード＆インストールします。
そして、改善項目にある全ての.jsをぶち込みます。
以下のjsは私の場合のものです、一例として。
s.js
show_ads_impl_fy2019.js
publishertag.js
net.js
current/osd.js
analytics.js
usync.js
im-uid.js
clipboard.min.js
adsbygoogle.js
jquery.min.js
show_ads_impl_with_ama_fy2019.js
jquery-migrate.min.js
jquery-migrate.min.js?ver=1.4.1
recaptcha__ja.js
recaptcha__en.js
reactive_library_fy2019.js
jquery.min.js?ver=1.12.4
jquery.min.js?ver=3.3.1
query-migrate.min.js?ver=3.0.1
analytics.js
rx_lidar.js
highlight.min.js?ver=5.9&fver=20220204033307
highlight.min.js
www-player.css
base.js遅延時間は3秒か、それより長ければ問題ありません。
私は念の為4秒にしています。
これにより、「使用していない JavaScript の削減」については一切の指摘がなくなりました。
使用していないCSSの削減
こちらのサイトを参照しながら、このページにそのCSSは不要だな、というものを見つけていきます。
そしてcocoon childのfunctions.phpに以下のようなコードを追記して読み込みさせないようにします。
//コンタクトフォームのスクリプトとかをお問い合わせのみで表示
function dc_dq_style_script() {
if( ! is_page(232)){
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_style( 'google-recaptcha' );
wp_dequeue_style( 'wpcf7-recaptcha' );
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_script( 'wpcf7-recaptcha' );
wp_dequeue_script( 'google-recaptcha' );
wp_dequeue_script( 'comment-reply' );
wp_dequeue_script( 'google-invisible-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'dc_dq_style_script' );何を使用しないかは個人差がありますが概ねこのようにすればよいでしょう。
「comment-reply」はコメント欄を表示している方は必要なので注意してください。
私のサイトにはスパム以外のコメントがされたことがないので閉鎖しました。
追記：コメント欄と違ってお問い合わせ欄には全然スパムが来ない（recaptchaのレポートより）ので、recaptchaも使用しないことにしました。
これにより、使用していない CSS の削減に関して指摘はこれ一つになりました。
この一つがどうやっても消せない……Orz
画像要素で width と height が明示的に指定されていない
cocoonのヘッダーロゴやフッターロゴがこれに引っかかると思います。あとアソシエイトなどの商品リンクもですね。
商品リンクは改変できないので、ロゴについて解決します。
最終的にこの状態までもってこれます。
ヘッダーロゴの高さと幅を明示
まず、cocoon設定の「ヘッダー」から、ロゴサイズを指定します。
ロゴ画像のサイズの通りにします。幅は1200あればいいのでそれより大きい方はリサイズします。
フッターロゴについて
フッターロゴには高さと幅を指定することができません。
しかし解決方法はあります。
フッター自体を消せば、指摘もされなくなります。
暴論ですが意外と効果はあります。そもそもフッターまで見る訪問者なんてそうそう居ないので消したところでデザイン的にも問題にはなりません。
#footer {
display:none;
}このコードをスタイルシート（style.css）に追記します。
追記:フッターロゴの非表示が選べたのでそちらを設定しました。
このままだとお問い合わせページやプライバシーポリシーページへのアクセスが容易ではないと判断され、AdSenseやアソシエイトやその他諸々にBANされかねないので、フッターの代わりをサイドバーに担わせておきます。
外観→ウィジェットより、このように「固定ページ」を設置します。
するとこのブログのようにちゃんとプライバシーポリシー等にアクセスできる状態になりました。
適切なサイズの画像,次世代フォーマットでの画像の配信
サイトのロゴ画像について
徹底的に圧縮します。
ここだけはいっくらでも手間をかけましょう。
なぜなら、どの記事にアクセスするユーザーも必ず読み込むのがこのヘッダーロゴ画像だからです。
ここの軽量化はそれだけでサイトの全記事の軽量化につながります。費用対効果が素晴らしい!
最も私は、読み込みが遅く画面面積が小さいことから、モバイルユーザーにはヘッダーロゴの表示をやめています。
cocoon設定→モバイルの項目で変更できます。
ロゴを小さくする（高さと幅を削る）
ロゴを限界までトリミングします。
ロゴの背景色をヘッダー色と同じにして縦横のサイズを削っても違和感がないようにします。
ロゴを圧縮（第一段階）
まずhttps://tinypng.com/でおよそ半分以下の容量にまで圧縮できます。
ロゴを圧縮（第二段階）
https://squoosh.app/でwebpへの変換を行います。
最新バージョンにおいてIE以外の全てのブラウザは、webpの表示に対応しているので互換性に配慮は不要です。唯一不対応なIEも2022年中には確か廃止されますし。
ここで徹底的に、ギリギリ許容できるくらいの荒さになるまでリサイズや色の削減を行います。
私の場合、幅1200pxほどにしました。これでロゴ画像を17.1KBにまで減らしました。下の画像は実際にヘッダーロゴで使用しているものです。
若干荒いですが、まあ許容範囲内です。
また、AVIF形式というWebP画像を上回る品質と圧縮率を誇る形式があるので、ロゴ画像を次世代フォーマットのAVIF画像にしてみるというのも有効な手です。
記事のアイキャッチについて
https://tinypng.com/で圧縮や、https://squoosh.app/で幅1200以下になるようにリサイズしたりします。
勿論アイキャチを使わないというのも一つの手です。
記事本文の画像について
ロスレス圧縮のプラグイン「EWWW Image Optimizer」で一括圧縮します。
個別にするのは手間ですからね。
多分この記事を見ている皆さんはすでにEWWW Image Optimizerを導入しているでしょう。
そのため、設定項目だけ書き記すこととします。
まずリサイズとメタデータ削除を。
画像サイズはサイト幅似合わせて800pxとかで良いとは思うのですが、Googleの推奨が1200px以上なので仕方なくそうしています。
（それなのにたまに画像サイズが大きすぎると指摘するのは如何なものか…）
「リサイズ」の項目でしっかり許可しておかないと意味がありません。
ご注意ください。
最後は「変換」の項目についてです。これ以外の項目は弄りません。
「変換リンクを非表示」にチェックを入れると勝手に拡張子が変わります。.png→.jpegになったり。
多くのサイトではオフを推奨していますが、オンにすることで、透過pngの背景色をブログ本文の背景色と同じに設定しておくことで見た目上の問題なく圧縮できます。
なお、画像遅延表示機能はcocoon側の設定を使うのでプラグイン側のはオフにします。
お問い合わせページをプラグインなしで実装
このサイトを参考にして設置します。
これにより、recaptuaやコンタクトフォームなどが不要となります。
cocoon設定でできる高速化
cocoon標準搭載のもの
cocoon設定→高速化
より、全てにチェックを入れるだけです。
「Lazy Loadを有効にする」は不具合がでることがあるのでオンにしてサイトに悪い変化がないかを確かめておきましょう。
アイキャッチ画像が表示されない不具合が起きやすいです。
不要な機能・表示をやめる
cocoonはデフォルト設定だと色々不必要なものまでサイトに表示しているので、それらをオフにします。
設定項目がどこにあるかは長くなるので割愛します。
削減・オフにした項目
- コメント欄の閉鎖（recaptuaやアンチスパムプラグインなども廃止）
- 関連記事表示数6→4つに減らす
- 画像の拡大効果→なし
- retina対応→しない
- SNSシェアボタン→必要な分だけ表示
また、もともと設置していたタグクラウドや月別アーカイブなどのウィジェットも廃止しました。
フッターは、フッターロゴの高さと幅の指定をできないことから前述のやり方で消しました。
最新のjavascriptを使う
cocoon設定→その他
ライブラリを最新のものを用いるようにします。
大抵不具合はありません。もしあっても元の古いバージョンに戻すだけで良いので。
ちなみに、サーバーでPHPのバージョンが変更できる場合は、そちらも最新のものに変更しておきましょう。
事前読み込みをカスタマイズ
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これを、自分が使うものだけにしたり、追記してカスタマイズします。
私はvaluecommerceを使わないので消したり。
https://pagespeed.web.devではCDNへのリクエストが多くても特に注意されませんが、この事前読み込みを多用するとhttps://tools.pingdom.comのようなツールには指摘されます。
自分が使わないもんを事前読み込みさせても無駄なので、一例として私は以下のようにしました。
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
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
i.ytimg.com
i.imgvc.com
use.fontawesome.com
www.image-rentracks.com
hbb.afl.rakuten.co.jpAdSenseの遅延読み込み
ざっくりとした手順は以下の通りです。
- アドセンスのコードを遅延読み込み仕様にする
- フッター編集用のファイルを子テーマに追加
- footer-javascript.phpを編集
- 遅延読み込み対応のAdSenseのコードを貼る
adsense自動広告・手動広告両方を遅延読み込み化させる具体的な方法はこちらです。
詳細に解説しています。
なお何故か分かりませんがこの方法だとアクセスの途端全画面にどーーんと表示されるインライン広告だけは遅延せず、何ら変わりなく表示されます。
他のディスプレイ広告などの自動広告は遅延読み込みされるので不思議ですね。
Font Awesomeの読み込みを遅延
遅延読み込み化のコードをcocoon子テーマの「style.css」に追記して遅延読み込みができるようになります。
詳細な手順は以下の記事を参照してください。
こうするとアクセスの大体3秒後にFont Awesomeを用いたアイコンが表示されるようになります。
なお本文には通常Font Awesomeは使用されていないので遅延読み込みしても悪影響はないと思われます。
フォントを軽くする
勿論、使用するフォントの種類は一つだけにします。
例えば「Meirio UI」を使う場合はこの記事の手順をそのまま進めるだけです。
違うフォントでも、フォント名だけ置き換えて設定すれば問題ありません。
太字のときは太さ（ウェイト）が700，通常の文字は500としております。
そのままだと斜体（イタリック）やBold版のフォント、普段使用しない漢字などが含まれているので、必要最小限のもののみを使い軽量化します。
フォントを選ぶ
上記リンクから日本語フォントを見つけるか、端末にあらかじめ入っているフォントを選びます。
（フォントの利用規約をよく読んでから。）
私は「C:\Windows\Fonts\」にある「Meirio UI 標準」を選びました。
フォントのサブセット化（要らない漢字を省く）
上記を参考に、フォントのサブセット化を進めます。
これだけで、サイズが9MB→1MBまで減らせました。
なお、「斜体」「太字」「太字斜体」は含めません。
通常の文字の太さを変えることで太字は表現でき、斜体は使わないのでこういうチョイスになります。
フォントの圧縮
上記を参照しながら、フォントを圧縮します。
「woff2」を選びます。IE以外は対応しているのでこれひとつで問題ありません。
（IEは既にサポート終了したため対応の必要はありません。）
画像の通りwoffの後継規格だけあってより容量削減ができます。
woft2にした場合、サイズが圧縮前の1MBから585KBまで減らせました。
フォントのアップロード
「/WordPressのインストール先フォルダ/wp-includes/fonts」にフォントをアップロードします。
こんな感じでアップロードします。一番下の「webmeirio.woff2」が今回追加したものです。
ファイルサイズがWindows上と若干違うというのはよくあることです。気にしないでください。
アップロードしたフォントの使用
「外観→テーマファイルエディター→style.css」に行きます。
cocoon.childのスタイルシートに以下のコードを追記します。
//メイリオ太字と本文
@font-face{
font-family: 'Meirio UI';
font-style: normal;
font-weight: 500,700;
src: url('https://economylife.net/wp-includes/fonts/webmeirio.woff2') format('woff2')
}
.font-Meirio UI {
font-family: "Meirio UI", sans-serif;
font-weight: 500,700;
}
body{
font-family: "Meirio UI",sans-serif !important;
font-weight: 500,700;
}独自ドメインは各自置き換えてください。
普通は本文はウェイト400ですが、私のブログでは見やすさを考慮して500としております。
太字は基本的にはどんなサイトでも700です。
chromeの拡張機能「WhatFont」で一度自分のサイトがどんなフォントしているのかを調べておくとよいでしょう。
cocoon側の設定もこのようにして完了です。
これでおよそ2～5点PageSpeed Insightsのスコアが上がります。
フォントをプリロードさせる
<link rel="preload" href="https://economylife.net/wp-includes/fonts/webmeirio.woff2" as="font" type="font/woff2" crossorigin>上記のコードをCocoon Childのhead-insert.php (tmp-user/head-insert.php)に追記します。
追記 NotoSansJPとYakuHanJPを軽くし本文フォントとする
軽量化でき、見た目がメイリオより遙かに優れているフォントを使用する方法をまとめました。
追記２ CDNサービスクラウドフレアを使う
読み込み速度を向上化させるだけでなく、予期せぬ攻撃（Dos攻撃など）の防御にも繋がります。
まとめ cocoonを徹底的に軽量・高速化する方法
上記の対策全てを実装したら、このように指摘されるものは僅かになります。
- 画像要素で
widthとheightが明示的に指定されていない→アソシエイトの商品画像でアウト判定 - 過大な DOM サイズの回避→階層化が深い記事＝長い記事に表示される
- リクエスト数を少なく、転送サイズを小さく維持してください→常に表示される
- 「最大コンテンツの描画」要素→常に表示される
合格でないものについて解説というか弁明しておくと、このように避けられない診断ばかりなので仕方がないのです……
というか、もうこれ以上手の打ちようがないほど高速化したのにスマホスコアが94点なのは少し不満ですが、これより軽い記事なら100点も出たのでヨシとします。
まずは上記リンクからページスピードの計測をするところからはじめてみてください！
マイナー検索エンジンに対してどうやってサイトマップを送信すべきかがまとめられたこちらも是非ごらん下さい。
