つい先日、Twitterを何気なしに眺めていたら、こんなtweetを見かけました。
ページの表示速度なんて気にしたことなかった…
ということで、とりあえず当ブログがPageSpeed Insightで何点出るのかやってみました。
その結果がこちら。
パソコンは88点とまだ良いものの、モバイルは31点と完全に赤点。落第です。
ということで、この点数を上げるためにネットで調べながら悪戦苦闘したのですが…色々なことに手を出したら、ブログが一時真っ白になってしまうなどのトラブルもあり、本当に大変でした。
そこで今回は、自身の経験から得た「初心者がPageSpeed Insightsの点数を上げるためにやっていいこと、いけないこと」をまとめていきたいと思います。
正直、ブログに詳しい人はもっと踏みこんだ対策が出来ると思います。ただ、初心者には難しい点も随所にあったので、全てをやり切るのは難しいというのが正直なところです。
初心者向けなので難しいことは一切しません！誰でも出来る、簡単な対策を紹介していきます。
そもそもPageSpeed Insightとは？
そもそもPageSpeed Insightって何？という方は以下の記事から読むようにしましょう。
初心者向けにPageSpeed Insightがどういったものか？ということをまとめてあります。
やっていいこと
画像遅延読み込み設定
まず最初に「画像遅延読み込み設定」というのを行いました。
画像データは非常に重たいので、一気に全てを読み込もうとすると読み込み速度に遅れが出ます。それに対して遅延をかけてやることで、読み込み速度を上げてあげるのです。
具体的に僕が何をしたのかというと、僕が使用しているテーマ「STORK19」では、「カスタマイズ」の画面から「画像の遅延読み込み」を設定できるので、ただそれにチェックを入れただけです。
この様に、僕が使用している「STORK19」は初心者でも難しい設定が簡単に行え、非常にユーザーインターフェースに優れています。有料テーマですが、それだけの価値があるテーマですので、気になった方は以下のリンクを見てみてください。
この様に設定を変えただけなんですが、なんとこれだけでモバイルの点数を31点から52点まで上げることが出来ました。
ただチェックを入れるだけでここまで改善することが出来るのですから、本当にSTORK19様様です。
この結果から、画像の遅延読み込み設定はPageSpeed Insightの点数を上げるのに有用であることがわかりますね。
さて、そうは言ってもこの改善方法では他のテーマを使用している人は真似できないでと思います。
そういった方はプラグインでの改善に挑戦しても良いかもしれません。少し調べてみましたが、一応プラグインでの対策も出来そうです。
ただ、やる場合はしっかり調べてから行うことにしましょう。初心者がいじった結果、ブログがうんともすんとも言わなくなった、という状況は避けたいですからね…
少し怖い方は、他の対策から初めても良いのではないでしょうか。
画像の軽量化
次が画像の軽量化です。
僕はトップページにプロフィール画像を表示しているのですが、何とその容量が5.6MBもあったのです。
このプロフィール画像、「ココナラ」というスキルマーケットで絵師さんにお願いして描いてもらったものなのですが、凄く力を込めて作っていただいたこともあり、こんなにも容量が重くなってしまっていた様です。
ということで、ファイルを圧縮し、jpg形式へ変更。
それにより、5.6MBの容量は243KBにまで減らすことが出来ました。
その結果、モバイルの点数は52点から55点と若干の良化。
個人的にはこんだけ容量減ったしもっと良くなるかな、と思ってたのですが、そこまででしたね。
レイアウト改善
その次に行ったのが、レイアウトの改善です。
具体的には、トップページに読み込みに時間がかかるコンテンツを配置しない様にしました。
僕の場合、それは「モバイル表示でのTwitterのタイムライン表示」でした。
というのも、どうやらTwitterのタイムラインというのはかなり読み込みに時間がかかるらしく、表示速度に大きく影響を与えている、ということが分かったからです。
しかも、僕のレイアウトの場合、モバイル表示だとタイムラインが表示されているのは、トップページの一番下だったのです。こんなところにタイムラインを表示していても、そもそも誰も見ないのでは？と思いました。
そこで、モバイル表示のみTwitterのタイムラインを表示させない様にしました。なお、パソコン表示はそこまで点数も悪くないし、上記の様に目に入ることもあると思うので、そのままにしておきました。
その結果、モバイルの点数は55点から64点へとジャンプアップ。
やはり、タイムラインというのは大分表示速度に影響を与えている様です。
モバイル版は表示をさせない方が無難なのかもしれないですね。
レンダリングを妨げるリソースの除外
さて、PageSpeed Insightの解析結果では、解析したページに対して、どこが改善できる項目か、というのを教えてくれます。以下が本ブログの改善できる項目です。
次世代フォーマットに関しては後で説明するので置いておくとして、「レンダリングを妨げるリソースの除外」というものの改善に取り掛かりました。
やったこととしては非常に簡単で、AutoptimizeとAsync JavaScriptという２つのプラグインをインストールしただけです。参考にしたサイトを載せておきます↓
このプラグインをインストールすることで、0.66sだった「レンダリングを妨げるリソースの除外」を0.15sにまで下げることが出来ました。
ただし、この対策ではPageSpeed Insightの点数は１点も変わりませんでした。
改善自体はされたっぽいですが、そこまで大きな改善には繋がらなかったのかもしれないですね。
さて、次のページからはやってはいけないことについて、解説していきます！
ページの表示速度はSEO対策において極めて重要！
GoogleのPageSpeed Insightを活用しよう！