サイトの表示スピードを測るのに便利なGoogle Pagespeed InsightはSEO対策には効果はないですが、ページ表示速度の基準の一つのめやすです。このページのスコアを見るとは高い評価を得ています。85点以上の高得点を目指すのに、色々対策してみたいと思います。

開発環境と本番環境を分ける

開発環境を作ることは、不要なプラグインの立ち上げを防いだり、逆に本番だけminify化で圧縮したりと何かと便利です。
例えば、WP-SASSを利用して開発環境でcompactedを行い、style.cssのみにまとめて、アップしする事で、余分なSCSSファイルをサーバー上にアップする事を防げます。
HTMLのminify化を本番環境のサーバー上のみで行う事で、開発環境では可視化できエラーを発見しやすくなります。

コンテンツの順番を変更しよう

header » nav » contnet・sidebar » footerと見える順番に並べたくなりますが、今後はgridやflexを利用してコンテンツの順番を変えることが出来ます。
今後コーディングの際は、content » sidebar » nav » hedaer » footerのように記載、さらに細かくいくのであれば、コンテンツのなかもタイトル » 概要&本文 » 関連記事 » ステータスのように一番重要な本文をに近い場所に追加しましょう。

画像の最適化

画像ファイルはとても重いです。いろんな最適化の方法があります。

CDNや別サーバーストレージに以降

出来るならCDNへ対比させたり、別のストレージから呼び出しましょう。

lazyloadで後読み

lazyloadで読み込みを遅延させましょう。

[get_posts tag=”lazyload”]

画像の圧縮minify

プラグインや外部サービスを利用して圧縮しましょう。

img srcsetで正しくRetina対応

Retina対応の画像をアップしたら、@1xや@0.5xなどのサイズを自動生成で対応したいところです。

JSの後読み

JSファイルは全て、HTMLの一番最後に記載します。/bodyの直前です。
functions.phpに以下のように記載することで、wp_footerでJSを読み込ませる事ができます。

WPプラグインによっては、内でJSを記載する手法になっている物もありますが、そうゆうプラグインは積極的に停止させます。
さらにasncyで後読み属性を付ける事を忘れないでください。
ではscrit_load時に呼び出される関数が用意されています。
functions.phpに以下のように記載してください。

[WP]画像サイズを自動で50%に縮小して、Retina対応+α

CSSのSASS化

CSSをSASS化する事はほとんどメリットしかありません。ファイルを分散管理出来たり、不要なソースをコメントアウトしてもコンパイル後には削除され影響を及ばさずに作業が出来ます。

HTML・JS・CSSのminify化

全てのHTMLやJSやCSSをminifiyすることで転送量を押さえることができます。サイトの表示速度アップに大きく貢献します。
node.jsを用意出来る環境だったら、node.jsでのminifiyが一番楽でしょう。

スタイルシートをインライン化する

先程CSSのminify化がありましたが、googleはCSSインライン(head内)記載を推奨しています。CSSの転送量を減らす為だと思われますが・・・。
例えば、functions.phpに以下の記載をすることで、CSSをインライン化することが出来ます。

CSSをJSで後読み

JSを利用してCSSを後よみさせることも出来ます。
[JS]CSSをwp_footで最後に読み込む

CSSのインライン化と後よみどちらがいいのか

CSSのインライン化と後よみで得点にどのくらいの差が出るか見てみましょう。

※WPでJETpackを利用している場合、jQuey2ならacyncやfooter読み込みでもどうにかなりそうです。

キャッシュの設定

htacssecを利用すると、ファイルを配置したフォルダとその配下に同じキャッシュの設定が可能です。外部から読み込んでいるファイル以外は、こちらで指定します。htacssecでも設定はできますが、出来るならサーバーで設定する方が早いです。

サーバー側の設定

フロントでの対策を主に記載してますが、サーバー側でも設定があります。
インフラ周りは詳しくないので参考記事を探します。

飽きるまで.comが利用しているスタードメインのWP_BLOG機能に使われてるサーバー(amazonかgoogleだとおもいますが)はかなり早く処理出来るよう最適化されているようです。

スタードメイン

参照

Designed by Freepik