LION MEDIAを使い始めて8か月になるのですが、初めは速かった表示速度が遅くなってきました。
体感的にも分かるようになってしまった表示速度の遅さを改善して、ある程度の表示速度をLION MEDIAに取り戻してあげようと思います。
LION MEDIAの表示速度を改善するきっかけ
LION MEDIAのテーマは、もともとは速い表示速度が出せるテーマです。
ですがLION MEDIAのテーマを使用してブログ運営してると、ブログを開いたときに「なんか表示速度おそくね？」と体感で感じることができるレベルまでになっていました。
体感で表示速度の遅さが分かるようになったのが「きっかけ」でLION MEDIAのもともと速かった表示速度を取り戻そうとおもったわけです。
LION MEDIA表示速度改善のきっかけは単純ですが、自分自身で運営してるブログで表示速度の遅さを体感レベルで分かるようになるのは致命的です。
それはブログを見に来てくれる人達も、そのブログの表示速度の遅さを体感できることになるのと同じことだからです。
LION MEDIAの表示速度が遅い原因を探す
最初にLION MEDIAの表示速度を改善するために原因を探すことから始めました。
LION MEDIAの表示速度を改善するツール
- PageSpeed Insights
- Chromeデベロッパツール
- アナリティクス
上記の3つのツールを使いました。
「そんなにツール必要かよ？」と思うかもしれませんが、とりあえず知ってるツールで使えるものは使い倒したいので3つのツールでLION MEDIAの表示速度を改善するために原因を探し出し、さらに改善することの優先順位をつけます。
PageSpeed Insightsで最適化の提案を確認
まずは定番のPageSpeed InsightsでLION MEDIAの表示速度を遅くしてる原因が何かを教えてくれる最適化の提案を確認します。
使い方は表示速度を改善したいサイトのURLやページのURLを入力して「分析」をクリックします。
PageSpeed Insightsの速度結果はスクショし忘れたので画像はないですが、改善前はPCで「70点」くらい、モバイルで「30点」くらいです。
特に平均よりも下がったモバイルのスコアを見て、ますますヤバいかな？と思えたわけです。
そしてPageSpeed Insightsのスコアよりも重要なのが、改善できる最適化の提案の項目です。
LION MEDIAの表示速度の改善で提案された内容
- レンダリングブロックを改善すべし
- 画像を最適化すべし
その他にも細かすぎる考えたくもない改善の提案がありましたが、今回はスルー。
PageSpeed Insightsで私が絞り込んだ改善の提案で重要と思ったのはレンダリングブロックと画像の最適化です。
レンダリングブロックではhighlight.jsのスクリプトとスタイルシート。
画像は減らせるサイズが多い画像から順番に改善することにします。
改善のヒント探し Chromeデベロッパーツール
LION MEDIAの表示速度を改善するために使う次のツールがChromeデベロッパーツールです。
PageSpeed Insightsで改善の提案に出たレンダリングブロックしてる原因や画像の読み込まれ方をperformanceで確認したり、Networkでは画像のsizeとtimeを昇順を変えながら、改善する画像を絞り込んでいきます。
Chromeデベロッパーツールを開いて「Network」を開いたら「Disable cache」にチェック。これは本来の読み込みが分からなくなるのでキャッシュを無効にします。
そしてサイトをリロードして読み込むとダァーッと読み込んだファイルが分かるので「img」をクリックして読み込んだ画像だけを表示させます。
そうすると下に読み込んだ画像の一覧が分かるので「Size」をクリックしてsizeの多い順に並び替えたりして改善する画像を絞り込みます。
sizeの横のtimeとsizeを比較しても探しやすくなるかと思います。
このときPageSpeed Insightsの画像の最適化の提案に表示された画像とNetworkで確認する画像を照らし合わせて絞り込むヒントにすることで改善のヒントになりました。
ただヒントを絞り込みすぎると、いつまで経っても先に進めなくなるのでほどほどにです。
表示速度の改善の主役 アナリティクス
順番的にLION MEDIAの表示速度を改善するとき最初からアナリティクスを見てしまえば本当は早いです。
本来ならアナリティクスの速度の提案でセッション数の多い順から表示速度を改善していくとかのやり方が効率的なので、その場合は表示速度の改善の主役にもなれるアナリティクスを優先して使用するのがおすすめです。
でもなんで今回、主役のアナリティクスを最後にするのだ？
サイト全体に平均して使用されてるものからLION MEDIAの表示速度の最適化を改善していき、まずは全体的な表示速度を平均に戻していこうと考えたからです。
個人的にはアナリティクスを開くとフラフラする癖があるからです。
というように3つのツールを使って大体の表示速度を改善する検討がつくので、次は実際にLION MEDIAの表示速度を改善していこうと思います。
LION MEDIAの表示速度を速くする改善をする
今回のLION MEDIAの表示速度改善計画
- レンダリングブロックしてるスクリプトの改善
- 画像は大きいサイズからサイズ変更と画像圧縮
PageSpeed Insightsの最適化の提案で判断した結果、予想としては上記の2つの改善でだいぶLION MEDIAの表示速度が戻るはずなのです。
headのレンダリングブロック解決方法
レンダリングブロックしてたのは、LION MEDIAで記事を書くときに使用してるhighlight.jsのスクリプトとスタイルシートのheadの読み込みが原因の中で一番やらかしてくれていました。
それなのでレンダリングブロックはhighlight.jsに的を絞りました。
Chromeデベロッパーツールで確認したときに、highlight.jsのスタイルシートとスクリプトが同期的に読み込まれてたのが原因と思うので、headに置いてるスクリプトにasync属性をつけて非同期にします。
<script async src=” “> </script>
そしてスタイルシートもheadで読み込んでるのでpreloadをつけて先読みするようにします。
<link rel “preload” href=”style.css” as=”style”>
スタイルシートをプリロードした後で、そのページのレンダリングが必要になったときに使用できるようになります。
この2つの方法によってレンダリングブロックをしなくなり解決できます。
関連 highlight.jsがレンダリングブロックしたときの解決方法
LION MEDIAのアイキャッチ画像を改善する
次に画像の改善ですが、LION MEDIAで使う画像サイズから改善してみました。
画像の中でもLION MEDIAの表示速度の改善のために絞った画像は、ヘッダー下の「アイキャッチ画像」です。
LION MEDIAのトップページをChromeデベロッパーツールでperformanceを確認するとPageSpeed Insightsで出された改善の提案の画像とレンダリングで最初に読み込む画像が一致するものが多かったという単純な理由です。
LION MEDIAのトップページはアーカイブになっていて、それぞれの記事のアイキャッチ画像が「だぁーっ」と一斉に読み込まれます。
簡単に改善させようと画像の遅延読み込みのプラグインを使ってみましたが、私のサイトの場合は逆に表示速度が落ちたのでダメでした。
なので元のオリジナル画像をアップロードする前の段階でアイキャッチ画像を見た目に影響がない程度のサイズに小さくしておこうと思います。
アイキャッチ画像のサイズを変更する
LION MEDIAのアイキャッチサイズは5種類くらいですかね。
最近の投稿に使うアイキャッチサイズ「90×90」のような画像サイズからアーカイブのアイキャッチ「361×203」くらいまでのサイズがあります。
上の画像で言えば、アップロードした画像サイズが「640×410」実際に表示されてるサイズが「361×203」です。
緻密に画像サイズ調べても埒があかないのでピックアップ記事のアイキャッチサイズあたりを基準にして600幅くらいに基準サイズを決めて、差し替える画像サイズを変更します。
画像サイズが小さすぎると、それよりも大きなアイキャッチ画像でぼやける可能性があると思って少し大きめと考えました。
画像系はものすごく苦手なので少しずつ手探りで調整しました。
画像の使い方が得意な人はもっといい方法があると思うので適宜で調整してください。
それからWordPressの画像サイズ調整はそのまま何もせずです。
元の画像サイズが600幅に決まったので次は決めた画像を圧縮していきます。
画像を圧縮して容量を下げる
サイズ調整が終わったら画像を圧縮します。画像圧縮も悩む部分です。
「lossy」「glossy」「lossles」どの圧縮方法にするか考えた結果、表示速度の改善が目的なので多少の画像の劣化があったとしても圧縮率を優先して「lossy」がいいかと思います。
そこで今までewwwも使いながらパンダの圧縮も使ってた結果、パンダ圧縮のほうが使いやすかったのでパンダ圧縮に切り替え。
その他にshortpixelも併用するのもおすすめです。
LION MEDIAの表示速度を改善する今回の目的の画像のアイキャッチですが、記事のタイトル横のアイキャッチの場合は、そのアイキャッチがタイトルの背景画像にもなります。
画像幅600サイズにしたので伸縮してぼやけるのが気になりましたが、LION MEDIAの背景画像は黒くなるので画像をカバーしてくれます。
多少ぼやけたとしても目立ちません。LION MEDIAの仕様が活きてますね。
しかし使う画像によっては同じサイズにしてもぼやける可能性もありそうですし、背景画像の見切れがイヤな人は画像サイズ変更のときは確認や調整が必要です。
LION MEDIAの表示速度を改善した結果
レンダリングブロックと画像のsize変更と圧縮をしてLION MEDIAの表示速度を改善しましたが、PageSpeed Insightsでのスコアが上がったのか確認して結果を見ます。
PCのスコア
PCのスコアは98といい感じの改善です。サーバーの調子がいいと最高「99点」まで上がることがあります。
モバイルのスコア
モバイルも表示速度を改善する前は30点だったことを考えれば改善できました。ですがモバイルは50点より3〜5点くらい下がることがあります。
highlight.jsのレンダリングも消えました。
画像も狙って最適化した画像は消えたので結果的にはLION MEDIAの表示速度の改善に一役かってくれてると思えました。
表示速度を改善してPCのスコアが上がったので体感速度も以前より速いです。
LION MEDIAの表示速度をさらに改善をする場合はモバイルになるわけですが…
結果、キリがないとおもったのであきらめました。
おまけ
LION MEDIAの表示速度を改善しました。
それぞれの記事のヘッダー下で使うアイキャッチ画像はリサイズされるかもしれませんが、サイドや記事下の関連やカテゴリーとLION MEDIAのテーマ全体で使われます。
なので全体で統一されて使用される画像から改善していくというやり方もできるというパターンでした。
LION MEDIAの全体的な改善をしてからは、先述したアナリティクスでページごとの速度の提案をセッション数の多い順から確認していくとLION MEDIAのもともとの速い表示速度が戻ってきます。
