PageSpeed Insightsで100点を出すためにやったこと【WordPress / STORK】

PageSpeed Insightsで100点を出す方法
注意
2018年11月14日頃から、Pagespeed Insightsの評価基準が変わりました。

LighthouseというGoogle製のパフォーマンス計測ツールを基にスコアが表示されるようになりました。

参考:PageSpeed Insights、Lighthouse の使用を開始しました

Lighthouse基準でのスコアは100点ではなく、旧基準のスコアでの100点ということになりますのでご注意ください。

ただ、サイトのパフォーマンス向上につながることなのでLighthouse基準でもスコア向上のヒントになるかと思います。

 

くまぺ
や、やっと100点出せた……😭😭

Googleのサイトパフォーマンス測定ツール【PageSpeed Insights】で、やっとこさ100点満点を出すことができました。

 

とはいっても、実はこの100点は実用的ではないので(後述します)、

実際に運用する状態では99点になります。(すみません🙇‍♀️🙇‍♀️ )

 

いや、99点でもいいんです。

なんといっても、今や流行が過ぎてしまったストークで高得点を出せたことが嬉しいのです。

 

僕はストークの見た目やアニメーションがめっちゃ好きなのですが、

スコアが低いだの表示が重いだの言われて、ちょっと悲しかったんですよね。

 

一時期はブロガーのサイトを回ったら3人に1人はストークなんじゃないかってくらい多かったので(マジで)、

「他の人と被りやすい」というのも利用者が減ってしまった要因かなと思います。

 

今では他にも魅力的なテーマが増えて、みんながみんなストークってわけではなくなりました。

僕もいろんなテーマを購入して他のサイトで使わせてもらってます。

 

……でもやっぱり、ストークが好きなんだ!!!

このブログではストークを使いたい!!

 

てことで、ストーク愛でなんとか最適化をがんばりました。

 

他のサイトとの被りやすさも減った今、最適化できることも証明されて、

ストークを使わない手はありませんね。

 

おしゃれでかっこいいストークはこちら(コソッ
WordPressテーマ「ストーク」

 

というわけで今回は、

PageSpeed Insightsで100点(もとい99点)を出すためにやったことを紹介します:3

 

最高スコアと執筆時点のスコア

まず、100点を出した時のスクショがこちら。

モバイル100点
パソコン87点

 

そしてこちらが現在のスコアです。

モバイル99点
パソコン87点

 

99点になった理由

なんで1点下がって99点になったのかというと、

100点取ったときは、スマホ表示でアナリティクスとアドセンスを外していたからです。

どうしてもストークで100点の景色が見たくて外していました。

 

まあでもこれはあまり実用的ではないので、実際に運用する上では99点です。

CDN経由したりすれば100点も出せますが、再現性が下がると思いやめました。

なるべくWordPress内、あと.htaccessくらいの設定でできるようにしたかったので。

 

アナリティクスやアドセンスを入れるのであれば99点出せればOKと考えても良いと思います。

 

パソコンのスコアも最高で98点が出たのですが、ヘッダー画像とピックアップスライダーを非表示にした状態でした。

大半のアクセスはスマホからですし、スコアより表示を優先させたかったので、こちらも妥協して87点に。

 

というわけで、執筆現在のスコアは

モバイル:99点 / パソコン:87点

です。

 

それではやったことを解説していきます:3

 

PageSpeed Insightsで100点を取るためにやったこと

なるべく簡単で取り組みやすいものから説明します。

 

Autoptimizeでコードの最適化

ここで対処した最適化についての提案

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

「次のCSS 配信を最適化してください」

まずは、WordPressのプラグイン「Autoptimize」で、

HTML, CSS, JavaScriptのコードの最適化をしましょう。

 

Autoptimizeは、コードを短縮してくれたり最適化してくれたりするプラグインです。

参考:Autoptimize

(インストール方法などは割愛します)

 

Autoptimzeの設定画面で、以下のように設定しましょう。

高度な設定を表示」をクリック

Autoptimize 高度な設定を表示

 

HTMLオプション」の「HTMLコードを最適化」にチェック、

JavaScriptオプション」の「JavaScriptコードの最適化」と「Aggregate JS-files?」にチェック

Autoptimize HTML, JavaScript

 

CSSオプション」の「CSSコードを最適化」と「Aggregate CSS-files?」と「すべてのCSSをインライン化」にチェック

(大規模サイト、PVが多いサイトでは「すべてのCSSをインライン化」のチェックは外してください。

説明の通りパフォーマンスが低下する可能性があります。)

Autoptimize CSS

 

その他オプション」は両方チェックを入れ、

変更を保存してキャッシュを削除」をクリックして完了です。

Autoptimize options

 

TinyPNGで画像を圧縮

ここで対処した最適化についての提案

「画像を最適化する」

「次の画像を最適化すると、サイズを 〇〇 KB(〇〇%)削減できます。」

画像の圧縮で有名なTinyPNGで、サイト内の画像を圧縮します。

参考:TinyPNG

公式サイトでは、

画像アップロード → 圧縮 → ダウンロード

で簡単に圧縮できます。

 

すでにサイトにアップロードされている画像を圧縮したい場合は、TinyPNGのプラグインを使いましょう。

参考:Compress JPEG & PNG images

月間500枚まで無料で圧縮できます。

(異なるサイズの同じ画像は複数枚としてカウントされるので注意)

 

.htaccessを設定

ここで対処した最適化についての提案

「ブラウザのキャッシュを活用する」

「次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください」

「圧縮を有効にする」

「次のリソースの圧縮を有効にすると、転送サイズを 〇〇 KB(〇〇%)削減できます。」

.htaccessでブラウザのキャッシュやGzip圧縮の設定をします。

注意
必ずバックアップを取り、慎重に設定を行ってください。

.htaccessに以下のコードを参考に追加してください。

これでブラウザキャッシュとGzip圧縮の設定は完了です。

 

Google Fontsの読み込みを最適化

ここで対処した最適化についての提案

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

「次のCSS 配信を最適化してください」

今回の施策で一番効果があったのが、

Google Fontsの読み込みの最適化です。

スコアでいうと10点以上上がりました(サイトによります)。

 

ヘッダーで読み込んでいるGoogle Fontsをフッターで読み込むように設定します。

 

ただし、これを行うとフォントのちらつきが発生します

Google Fontsを読み込み始めるのが遅くなるので、読み込むまで他のフォントで表示され、

Google Fontsが適用されるのに時間がかかるためです。

これは「FOUT (Flash Of Unstyled Text)」とも呼ばれます。

 

読み込みが早ければあまり気にはならないのですが、

どうしてもちらつきが気になるという方は設定をお控えください。

 

それでは、テーマファイルを変更していきます。

必ず子テーマを使用しましょう。

 

まずはfunctions.phpに以下のコードを追加します。

(テーマによって読み込むGoogle Fontsが変わります。このコードはストークの場合です。)

 

次に、footer.phpの69行目付近

<?php wp_footer(); ?>

のすぐ次の行に以下のコードを追加します。

 

これでGoogle Fontsの最適化は完了です。

 

まとめ

以上の施策を行って99点を出すことができました。

 

CocoonやGodios.では100点を出しやすいのですが、ストークで出すのは大変でした。

 

ストークはサイトのデザインや細かいアニメーションなどが綺麗なのが大きな魅力です。

流行からは外れましたが、まだまだ活躍しそうなWordPressテーマですね。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください