Cocoonは無料テーマでありながら十分なページ高速化対応がされています。テーマ機能だけでGoogleのPageSpeed Insightsで90点後半が取れるようになっています。もちろん、アナリティクスやアドセンス、Webフォント、プラグインなどを使用すればするほど表示速度に影響が出てきますが、Cocoon自体はとても高速化対応しているテーマになります。
なので、なないろは油断していました。Cocoon使ってるから大丈夫と思い込み、PageSpeed Insightsでチェックすることも忘れていました。そして、先日気づいて分析してみたら…
低すぎだにゃ！！！！！！
PCは87点でしたがスマホが43点と、思ってたより低くて焦りました。ですが、PageSpeed Insightsについての記事を色々見ていると、スマホで40点は飛びぬけて低いというわけでもないようで少しほっとしました。
とは言え50点以上は出せる方が良さそうなので、43点のスタートからスコアアップのためになないろがした改善点をお伝えします。
PageSpeed Insightsとは？
PageSpeed InsightsとはGoogleが提供しているWebページのパフォーマンスを評価する無料サービスになります。スマホとPCそれぞれのページ表示速度をスコア判定し、改善点を指摘してくれます。
使い方は簡単で、PageSpeed InsightsにアクセスしてURLを入力して「分析」をクリックするだけです。
少し待つと分析結果が表示されます。最初にスコアが表示され、その下に改善点や表示速度に影響している要因などを挙げてくれています。
指標や用語が多くて具体的にどうしたらいいのかこれだけ読んでもわからないのにゃ
PageSpeed Insightsはあくまで目安ですし、使用しているプラグインや埋め込んでるコード、使っているサーバーの性能によってはどうしてもスコアが低くなってしまう場合があります。合格ラインの明確なスコアはないのですが、スマホなら70点以上あればかなりいい方で、50点以上が合格ラインと考えて良さそうです。
スコア改善の道のり
Cocoonの高速化の設定をする
記事冒頭でCocoonは高速化対応していると書きましたが、その設定をし忘れてました。
いきなり初歩的なミスだにゃ
デフォルトで設定されてると思い込んでたんだにゃ！！
管理画面にログインして、メニューから「Cocoon設定」→「高速化」に進んでください。まず、「ブラウザキャッシュの有効化」にチェックを入れます。キャッシュを有効化することで2回目以降の訪問時に表示速度が速くなります。
「縮小化」セクションでは「CSSを縮小化する」と「JavaScriptを縮小化する」にチェックを入れてください。CSSとJavaScriptの無駄な余白や改行を削除することでファイルサイズを縮小化してくれます。
「Lazy Load設定」セクションでは「Lazy Loadを有効にする」にチェックをいれます。Lazy Loadとは画像の遅延読み込みです。ページの全ての画像を読み込んでから表示するのではなく、ユーザーに表示されている部分のみを読み込んで表示し、それ以外の部分の画像の読み込みを遅延させます。そうすることで表示速度が改善されます。
以上にチェックを入れて、「設定を保存」をクリックします。これでCocoonの高速化が設定されてスコアが改善するはずです。早速PageSpeed Insightsでチェックしてみました。
下がっとるがな！！！！！！！
高速化設定して逆に下がるなんてあるの…？とびっくりしましたが、画像内にも小さく書いてある通り「推定値のため変動する可能性がある」のです。つまり、同じ状態で複数回分析かけた場合、毎回同じスコアになるわけではなくて変動するわけです。高速化対策して下がるのはちょっと納得いきませんが、ちょっと変動したぐらいで一喜一憂するのは早計です。正確に結果を評価したい場合は2～3回分析にかけて、一番高いスコアを採用していきましょう。
高速化設定で悪化したとは思えないのでとりあえずそのままにして、上の「Lazy Load設定」セクションではチェックを入れなかった「Googleフォントの非同期読み込みを有効にする」にもチェックを入れてみました。
Webフォントは便利ですが重いのがネック。特に日本語は文字数が多いのでどうしても重くなってしまいます。わいひらさんの記事によると、こちらを設定しても点数的には目を見張る程の効果はないそうなのですが、なないろのスコア的には少しでもアップしたいところなのでチェックを入れました。
設定を保存してからもう一度PageSpeed Insightsでチェックしてみました。
Googleフォントの非同期読み込みによるスコアアップかどうかはわかりませんが、ひとまず合格ラインの目安である50点を越えて一安心です。
ただ、非同期読み込みにするとWebフォントの読み込みが完了するまでローカルフォントが表示されてしまうことによるチラつきが発生してしまいます。一瞬なのでなないろは気にしませんが、気になる方はチェックを外しましょう。
50点は超えましたが、Cocoonでの高速化設定以外にも何か改善できないか引き続き探っていきます。
次世代フォーマットでの画像の配信
分析結果に「次世代フォーマットでの画像の配信」という項目がありました。改善点として下記のように提案されています。
WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量を抑えられます。
画像ファイルは重いので表示速度に影響を与える大きな要因です。次世代の画像フォーマットであるWebPは圧縮率が高いので画像サイズを軽量化できます。WebPについては下記の記事で詳しく説明してるので、参考にしてみて下さい。
当サイトは記事内の画像はWebPにしてるのですが、アイキャッチなど一部画像はPNGを使っているので、それらに対してWeP使ったら～？と指摘されている感じですね。
アイキャッチもWebPにするか悩みましたが、なないろは一旦保留します。
画像サイズを削減したい方はWebPの使用を是非検討してみて下さい。
レンダリングを妨げるリソースの削除
スコアの改善点でよく出て来るのが「レンダリングを妨げるリソースの削除」です。レンダリングを妨げるリソースとは基本的にはCSSやJavaScriptのことです。ページを読み込む時、HTMLの上から下に向かって順に読み込まれていきますが、途中でCSSやJavaScriptがあるとHTMLの読み込みが一時中断されてしまいます。
ただ、全てのCSSとJavaScriptが妨げているわけではなく、妨げているファイルはPageSpeed Insightsが特定してくれていますので、ご自身の分析結果を確認してみて下さい。
レンダリングを妨げるリソースの削除によく使われるのが「Autoptimize」というプラグインです。しかし、残念ながらこのプラグインの使用はCocoonでは非推奨となっています。なぜならCocoonの機能にソース圧縮系機能があるからです。
確かに既に高速化のところでCSSとJavaScriptの圧縮を設定しました。実際、Cocoonの高速化後は「レンダリングを妨げるリソースの削除」で特定されたファイル数が減少していました。
しかし、それでもまだ「レンダリングを妨げるリソースの削除」に改善の余地がありそうです。
あとは何をしたらいいのかというところで、JavaScriptをフッターで読み込むことにしました。
Cocoonには以前JavaScriptをフッターで読み込む機能があったそうですが、不具合が出るプラグインが多くて廃止されたようです。
JavaScriptをフッターで読み込みたい場合は下記のコードを子テーマのfunctions.phpに追加すればOKです。なお、functions.phpはエラーがあるとサイトが表示されなくなってしまうので、念のためバックアップを取ってから編集すると安心ですよ。
//JavaScriptをフッターで読み込む
function is_footer_javascript_enable(){
return true;
}PageSpeed Insightsで分析したところ、「レンダリングを妨げるリソースの削除」が無事改善されてました。
当サイトでは今のところコード追加による不具合はなさそうなので、このままJavaScriptはフッターで読み込んでおこうと思います。
使用していない JavaScript の削減
「使用していない JavaScript の削減」を改善するのによく利用されているのが「Flying Scripts」というプラグインです。
指定したJavaScriptを読み込み遅延させるためのプラグインになります。JavaScriptをフッターで読み込む設定した上にこのプラグインまでも必要なのかわかりませんでしたが、試しに導入してみることにしました。
「Flying Scripts」の使い方は簡単です。WordPress管理画面にログインし、プラグインをインストールして有効化します。
PageSpeed Insightsの分析結果の「使用していない JavaScript の削減」をクリックして、指摘されている項目を確認してみましょう。なないろの場合、Googleアドセンスの審査用コードとGoogleタグマネージャーが挙げられていました。
注意したいのが、JavaScriptは全て遅延させればいいというわけではありません。表示崩れや不具合の原因にもなるので、遅延させるJavaScriptの設定はひとつずつ確認しながら行ってください。不具合が発生したら設定を元に戻せば大丈夫です。
なないろはGoogleタグマネージャーでアナリティクスを設定しており、アナリティクスは遅延読み込みしない方が良いので、アドセンスにだけ遅延設定をしていきます。
管理画面のメニューから「設定」→「Flying Scripts」と進みます。「Settings」タブで、「Include Keywords」のところに遅延読み込みさせるJavaScriptのキーワードを入れていきます。
- Include Keywords
- PageSpeed Insightsの結果画面から遅延させたいJavaScriptをピックアップし、キーワードを入力します。アドセンスなら「adsbygoogle.js」、Google Recaptchaなら「recaptcha」になります。あとは、Twitter埋め込みの「twitter.com/widgets.js」、Instagram埋め込みの「instagram.com/embed.js」、Facebook埋め込みの「connect.facebook.net」あたりも有用だと思います。
- Timeout
- デフォルトの「5s」のままでOKです。ユーザーが何もアクションしなかった場合、タイムアウト後にスクリプトが読み込まれますが、そのタイムアウト時間の設定です。
- Disable on pages
- 遅延読み込みを無効にしたいページがあるならここで設定します。
ここでPageSpeed Insightsを確認してみたら、かなりスコアがアップしました。
PCも95点までアップしてました。個人的にはこれくらいのスコアが出せれば十分だと思います。スコアが高いに越したことはありませんが、100点が出せるからと言って必ず検索結果が上位になるわけではないし、検索結果が上位でもPageSpeed Insightsのスコアはすごく低いページはたくさんあるからです。スコアにこだわるよりもより良いコンテンツ作りを目指す方が大事です。
…と、言いつつ、LiteSpeed Cacheというキャッシュプラグインも試してみます。長くなってしまうので次の記事でご紹介ます。ここまでの方法で十分にスコアが伸びなかった方は続きの記事も参考にしてキャッシュプラグインを試してみて下さい。
まとめ
43点から77点までスコアアップできました。
スマホはスコアが低くなりがちですし、同じ状態で計測しても結構スコアがブレます。なので、100点を目指す必要はありませんが、50点未満の場合は高速化対策を試してみてください。特にCocoonの高速化機能はチェックを入れていくだけでできる簡単なものなので忘れずに設定しておきましょう！
