試行錯誤の結果、スコアは倍に！
久しぶりにCSSなどをイジりましたが、手探りで触りだすと何をしようとした形跡なのか、後から分からなくなりますね。
ちゃんと記録をとっておかなくてはー
婿としての不遇生活を綴るはずのブログなのに、ブログいじりの記事が増えてきている感の強い婿どの（immukodono）です(・∀・)♪
今回はサイトの読み込みスピードを改善するお話。
読み込みスピードが遅い事で、Googleさんからの評価が低くなるかも？なのはもちろん、何よりもユーザーにとってマイナスですよね(´・ω・`)
そこは是非とも改善したい！
ただし、
How to 指南ではなく、素人がイジった記録なので、参考程度に見てくださいね（´ω｀）
※ 婿どのが使用しているてーまの『LION MEDIA 』に依存した設定方法がいくつか紹介されます。
- プラグインなどを見直す
- 画像もCSSも遅延だ！
- 結局 Autoptimize を最初にインストールするべきだったかも
- スマホスコアは最高79点・PCスコアは95点だた
Page Speed Insightsとは
Googleが提供するサイトの読み込みスピードを評価してくれるサービス。
それが『Page Speed Insights 』です(・∀・)♪
当ブログの評価をお願いしたところ…
PC用のサイトは70点台なのでまぁまぁ。
でも、
スマホサイトはだいたい34〜38点をウロウロ。
ほとんど赤点状態。
こちらが詳細でございます
分析結果…
よく分からないけど、赤三角だらけ。。。
ここからどこまでスコアが上がるのかやってみますよ！
改善できる項目に手を付ける
ダメダメのラボデータに肩を落としつつ、ページを下にスクロールしていくと、親切にも『改善できる項目』が提示されています。
どこから手を付ければいいのやら
改善できる項目たちが挙げられているので、
１番赤線ビヨーンな「レンダリングを妨げるリソースの除外」を中心に対策を講じましたよ。
スコアアップのためにやったこと
今回の集中Wordpressイジリでやったことを順番に挙げてみます。
- 『block-library〜』という名のCSS（Gutenberg）を無効化
- プラグイン『Jetpack』を削除し、代わりに画像遅延読み込みプラグイン『a3 Lazy Load』をインストール
- 重要じゃないCSSやJavaScript（ほとんど）を</head>から</body>に移動したり、削除したり
- テーマ『LION MEDIA』の「SEO設定」から、メインCSS以外のCSSを非同期読み込み化
- 画像のサイズ圧縮プラグイン『Compress JPEG & PNG images』をフル稼働
- アイキャッチ画像にも使ってしまっていたGIF動画を静止画に
- CSS・HTMLなどを圧縮、遅延読み込みするプラグイン『Autoptimize』をインストール
１つ１つを簡単に振り返ってみたいと思います。
レンダリングを妨げるやつ退治
「レンダリングを妨げるリソース」とやらを調べるところから始めました。
「レンダリングを妨げる」とは？
僕たちがウェブサイトを開こうとすると、
ブラウザは正しくコンテンツを表示されるように、サイト側の指示通りページを１つ１つ構築していきます。
一瞬で表示されるように見えて、実は積み木を積み上げるような作業がものすごいスピードで行われているのですね (゜_゜)
このようにサイトを構築していく作業そのものを「レンダリング」というそうです。
その為「レンダリングを妨げる」というのは、サイトを構築する際に障害となるものを指し、これを改善しないと表示スピードが遅くなってしまいます。
レンダリングブロックについて、Googleは次のように考えているそうです
デフォルトでは、CSS はレンダリング ブロック リソースとして扱われます。
と記載されていました。
これまでサイトを見やすくする為に、
婿どのもCSSをイジったり、書き足したりしましたが、CSSはサイトを素早く構築するためには障害になるというのです。
しかし全くCSSを無くしてしまうと、見やすいページを作ることは出来ません。
そこで、
不要なものを除去し、必要なものは優先的に構築されるように整えて、ブラウザがサイトを読み込むときの渋滞をなくしてあげなければいけないのですね ( ´Д｀)
では、
実際に婿どのが行った対策を見ていきたいと思います。
block-library/style.min.css？
「レンダリングを妨げるリソースの除外」のタブを開くと、以下のように障害となっているCSSやjavascriptが表示されます。
レンダリングを妨げるリソースご一行様
よく分からないCSSから、よく使うプラグイン、テーマのCSSそのものまで、レンダリングを妨げるリソース扱いになってます(゜_゜)ﾄﾞｳｾｲｯﾁｭｳﾈﾝ
とにかく一番上、
【block-library/style.min.css】という名前のCSSから着手しました。
block-library〜は新エディタだった
調べてみると、このよく分からないCSSは、
WordPress4.9.6（くらい？）から搭載された、直感的な投稿ができるビジュアルエディタの『Gutenberg』。
婿どのはブログの記述はアプリで、最終的なチェックのみスマホのブラウザを使っているのですが、
新しい『Gutenberg』はどうも使いにくいので、プラグインで無理やり旧エディタを使用しています（´ω｀）
婿どのにとっては、完全に無意味なCSSなので、ズバッと無効化させて頂きました。
ここをイジったところ、30点台から40点台に微増しました。
微増すぎるぅ…
『Jetpack』を削除
次に、とりあえず入れとけ系のプラグイン『Jetpack』。
レンタルサーバーのロリポップでWordpressを開設した時点で、プリインストールされてたと思います。
画像の遅延表示が出来たり、アクセス解析が出来たり、多機能なのですが、逆に多機能すぎて手に余る感じがありました。
改善項目的に、レンダリングを阻害しているランキング第２位だったので、思い切って削除しました！
画像の遅延表示に『a3 Lazy Load』
しかし『Jetpack』を削除してしまった事で、画像の遅延表示機能が失われてしまいました(･∀･；)
画面をスクロールすると画像が遅れてダウロードされる機能は、ページを早く表示するのに役立ちます。
ページの表示と同時に、すべての画像がダウンロードされてしまうと、結局レンダリングを阻害する事になってしまうからですね。
そこで、画像を遅延表示するプラグイン『a3 Lazy Load』をインストールしました！
機能が限定されている分、軽い
追加のプラグインは避けたかったのですが、結果的にスコアが上昇したので良しとします(˘ω˘)
５０点台にまで上昇
CSSを遅延読み込みさせる
Font AwesomeのCSS読み込みや、自動でアフィリエイトリンクにしてくれるバリューコマースのJavaScriptなど、
新しく何かを導入する時は、指示通り、言われる通り、全て</head>の上に記載してきましたが、重要でないものは優先的に読み込まれる</head>よりも、</body>に記載した方が良いとのこと。
そこで婿どのは、使用しているテーマ【LION MEDIA】のカスタマイズから、コードを移動させました。
【外観】＞【カスタマイズ】＞【高度な設定】
ほとんど重要じゃなかったので、ほぼ丸ごと移動〜
さらにCSSの非同期化
イマイチよく分かってないんですが、CSSを『非同期化する』とか『head部でインラインで読み込む』などの対策が推奨されています。
しかし調べていくと、素人の婿どのには難しいコードの書き方が紹介されていました。
理解の範疇を超えたことはやりたくないタイプなので、『非同期化』についてはこれまた【LION MEDIA】の設定を使ってみました！
【外観】＞【カスタマイズ】＞【SEO設定】
プルダウンで『有効』にするのを忘れないように。
メインCSSまで非同期読み込みすると、ページが一瞬文字だけになり、崩れて表示されるように見えました。
それはあまりにもカッコ悪いので、『メインCSS』だけチェックを外して、残りを有効化。
この時点で、
Page Speed Insightsのスコアが ６０点台になりました(*^^)v
徐々に上昇〜
画像の圧縮を断行
さらに『適切なサイズの画像』『次世代フォーマットでの画像の配信』『アニメーションコンテンツでの動画フォーマットの使用』などと、画像系の指摘が続きます。
2と3と5は画像関係
これらには、元々インストールしていた『Compress JPEG & PNG images』という画像を圧縮してくれるプラグインにフル稼働してもらいました( •̀ .̫ •́ )✧
しかし、
月の上限枚数まで圧縮してしまったので、来月以降もしこしこ圧縮していこうと思います。
アイキャッチ画像にも使用していたGIF
『アニメーションコンテンツでの動画フォーマットの使用』に関しては、思い当たるのが記事で使用しているGIF動画くらいでした。
ケルヒャーOC3がとってもイイ！の記事に使ってるGIF
でも、
分かりやすいようにGIF動画で解説している記事もあるので、これを静止画にするのは嫌です(｀ω´)
そこで、
アイキャッチ画像にまでGIF動画を使用していたもののみ、静止画に差し替えました。
最後にスピードアップ系プラグインを注入
ここまで、婿どのとしては結構頑張ってきたつもりなんですが、７０点台にはなかなか到達できません。
試行錯誤や検索検索を繰り返したものの、スコアアップは容易ではありませんでした。
そこで、また一つプラグインを追加してしまいました。
【Autoptimize】
最後の手段としてインストールしましたが、【Autoptimize】はCSSの遅延読み込みなども行ってくれるので、最初にこれを使ってみた方が近道だったかもしれません…
さらに、
婿どのが理解できなくて挫折したCSSのインライン化もやってくれます。
ただし、
こちらも設定次第ではページが崩れて表示されたりもするので、１つ１つチェックしながら設定を繰り返すと良いと思います！
チェックを入れれば良い、という訳じゃない
特に『すべてのCSSのインライン化』をチェックする場合には注意が必要で、
婿どののような訪問数が少ないサイトには効果があるそうですが、人気サイトの場合には返ってパフォーマンスが下がる可能性があるそう。
いつかチェックを外す日が…(´・ω・`)
その他、Google Fontsの表示設定なども出来ます( ´_ゝ`)ｱﾘｶﾞﾀｲ
このプラグインを実装してみたところ、
◇ スマホスコアは最高 ７９点、
◇ PCスコアは最高 ９５点
となりました〜
疲れたのでここらへんでやめます笑
スコアアップ大作戦まとめ
- プラグインなどを見直す
- 画像もCSSも遅延だ！
- 結局 Autoptimize を最初にインストールするべきだったかも
- スマホスコアは最高79点・PCスコアは95点だた
最初の３０点台からすると、倍以上にスコアアップする事が出来ました！
ただ、１００点を目指すにはもっとお勉強が必要でした。
プラグインも、単純に導入するだけでは逆効果の場合もあります。
さらには、Google先生の見解が変わる可能性もあります。
時々『Page Speed Insights 』をチェックしてみて、自分の許容範囲を超えるくらいスコアが下がってしまったら、サイトを見直すくらいの方が精神安定上良い気もします。
とにかく、
こんなにスコアが低いなんて！
という事が分かった事だけでも収穫でした(˘ω˘)
たまにメンテしつつ、自己マンブログを続けていこうと思います！
では(*˙︶˙*)ﾉ”
