今回は、WPのテーマCocoonでページエクスペリエンスを上げるためにやったことということで、記事を書いて行きたいと思います。
Cocoonはプラグインを入れたり、広告を入れたりしていない状態だとモバイル99点、PCで100点を取れるようになっています。
が、広告やプラグインを入れずにWPを使っている方はあまりいないと思いますので、点数が低い状態から上げていくことになると思います。僕の場合、記事数も20万を超えているブログで計測しているのでかなり不利だったりします。
逆境の中で、どのくらいページエクスペリエンスを上げれるのか？やってみました。
僕のページエクスペリエンスの改善方法は、テーマで出来ることはテーマで、テーマで不足している分はプラグインで、それでも駄目なら本体をイジるという風に優先順位を付けています。
あと70-100点の間ってアクセスしたときに、「オッ！このページは98点だな！」と思うほど差はなさそうなんで、とりあえず紹介するプラグインとCocoonのテーマ側で出来る事をやっとけば結構サクサクになると思います。
WPのテーマはCocoon
ブラウザキャッシュ、HTMLの圧縮など様々な高速化設定が行えます。このテーマがかなり高機能なので、それだけで余計なプラグインを入れる必要がなくなることも高速化に貢献しています。
作者が日本人なのでフォーラムのやり取りや情報も多いのも非常にありがたいです。
デフォルトでも十分軽い
テストブログよりこのブログの方がどう考えても軽かったので計測してみたところ、テストしていた重くなったブログではモバイルでは22点だったんですが、このブログで広告を入れた状態で計測してみたところ87点を取れました。
高速化プラグインなどは入れていません。
色々いじくりまわすより、デフォルトのまま使った方が時間対効果は高そうですね
無駄なプラグインの削除かOFFに
Cocoonでは、余計なプラグインなどを入れてなければ元々付いてる高速化機能で十分軽いという事が分かりました。
Cocoonを使っていて重くなっている方は使わないプラグインは出来るだけ削除するようにしましょう。
どう頑張っても重かったテストブログでも、入れていた高速化プラグインを削除してCocoonの高速化機能を全てONにしたところ一気に94点まで上がってしまいました。
いままでなにをやっていたのだろうという感じです( ;∀;)
Cocoonのサイト高速化
ダッシュボードの「Cocoon設定」を開きます。「高速化」をクリックするとメニューが現れるので全てONにします。
ブラウザキャッシュの有効化
HTML縮小化
CSS縮小化
JavaScript縮小化
遅延読み込み
Googleフォントの非同期読み込み
などが、デフォルトで備わっています。他の高速化プラグインなどを入れていると干渉してしまい不具合が出る場合があるので不具合が出たら高速化プラグインは停止しましょう。
後で紹介する画像高速化プラグイン、EWWW Image Optimizerは画像のWebp化に使っていますが、このプラグインとCocoonの遅延ロードをオンにすることでアイキャッチが真っ白になるという不具合が起こります。
Cocoonの画像遅延ロードをONにするときは、EWWWの遅延ロードはオフにしましょう。
ヘッダ画像のサイズ縮小
プラグインでも画像圧縮はしてくれますが、ヘッダに使われる画像だけは別に圧縮しています。アクセスのたびに毎回読み込まれるヘッダ画像を縮小しました。ヘッダ画像削除もしてみましたが、流石に見た目が寂しかったのでそれはやめました( ;∀;)
プラグイン：Flying Scripts
一気にモバイルの点数が上がりましたが、このプラグインをOFFにすると22点なって、ONにすると97点にまで跳ね上がります。
Flying ScriptsはJavascirptの読み込みを指定した秒数遅らせてくれるプラグインです。Page Speed Insightsの点数が上がるとして非常に評判がいいプラグインになっています。
このプラグインを入れる前だとPage Speed Insightsで第三者コードの影響を抑えてくださいという警告が出ていると思いますので、adsbygoogle.js、analytics.jsなど、改行で区切って読み込みを遅らせたいJSを指定していきます。
詳しい説明は、書かれているページが沢山ありますのでここでは省略します(^^♪
LiteSpeed CacheでもJSの遅延ロードという項目はありますが、これを使うとモバイルでアクセスしたときにアイコンが表示されていなかったのでこちらのプラグインを導入しました。
詳しくは以下の記事をご覧ください
プラグイン：EWWW Image Optimizer
EWWWではWebp化と画像の最適化を行いました。LiteSpeed Cacheでも同じことをやってくれるんですが、EWWWではuploads以外の指定した任意のフォルダでも最適化することが出来ます。
画像のアップロード数が多かったので別のフォルダを作っていたんですが、作らなければこのプラグインは要らなかったかなと思うと後悔です( ;∀;)
Cocoonで遅延ロードをONにするとEWWWの遅延ロードは機能が重複してしまいアイキャッチが表示されないという不具合が起こりますので、Cocoonで遅延ロードをONにしたらEWWWの遅延ロードはOFFにしましょう。
ファーストビューの画像遅延を停止
最大コンテンツと認識されている画像の遅延を停止しました。これによりかなり点数が上がっている方もいるようです。
WordPressのバージョン5.9以降を使っている方はこのような設定は不要です。
ファーストビューの画像のプリロード
僕のブログでは、ファーストビューがヘッダ画像と記事に使われている最初の画像まで含まれていました。この画像をプリロードしました。
記事に使われている画像という事で、記事ごとに毎回異なります。
このように動的に取得する必要のないURLに関しては、Cocoon設定→高速化にある「事前読み込み」からURLを入れることで事前読み込みすることが出来ます。
ロゴ画像はCocoonの設定でプリロードしています。デペロッパーツールで見ると、このように、ロゴ画像が先に読まれているのが分かると思います。
この読み込みを記事に使われている一枚目の画像にも行いたいと思います。設定では、このように程よい場所でプリロードされるようになっていますが、自分で追加するとなるとCocoonにはテーマ側でもカスタマイズできるファイルが用意されていますが、このファイルはCocoon本体のヘッダの後に追記されるようになっています。
ページのタグは上から下へと読まれていきますので、本体のヘッダの後にプリロードしても意味がなかったです。
なので、ヘッダの最上部に画像をプリロードされるようにしました。
cocoon-masterのtmpフォルダからhead-analytics.phpをダウンロードして子テーマにtmpフォルダを作成、その中に、head-analytics.phpを置きます。
ヘッダをカスタマイズする方法は多数用意されていますが、上部にプリロードを入れるにはこの場所が良さそうでした。プリロードが並んでいるのはheader.phpだったんですが、ここはイジりたくなかったのでこちらにしました。
$first_image = '/<img.*?src=(["\'])(.+?)\1.*?>/i'; preg_match($first_image, $post->post_content, $image_url); echo "<link rel=\"preload\" as=\"image\" href=\"$image_url[2].webp\"/>\n";
最初のif文の後、8、9行目ぐらいにこのコードを加えています。
画像のように、記事内で使われている画像もプリロードされるようになりました。
webp対応ブラウザと非対応ブラウザ用に、jpgとwebp両方読んでいるところは結構雑です。cocoonではtmpフォルダを子テーマに作って本体のファイルを置いた場合子テーマが優先されますが、このようなやり方をすると本体がアップデートした場合にまた同じ作業をしなければならなかったり、めんどくさいですｗ
しかもこのプリロードで効果があったかは謎ｗ
まとめ
今回は、Cocoonの高速化方法についてまとめてみました。
Cocoonではデフォルトで高速化機能が付いている為、後で色々と付け加えるよりそのまま使っていた方が軽いということがわかりました。
Cocoonを使っていて重くなっているという方は一度不要なプラグインなどを入れていないか確かめてみましょう。
コメント