役に立つかは別として

頭の中にあるゴチャゴチャを出しとけばスッキリするかも

PageSpeed Insights使ってみたけど、どう修正すればいいのか全然わかんないっす

ふと思いついてPageSpeed Insightsでメインブログの表示速度をチェックしてみたら、モバイルは100点中60点で「Poor」パソコンの方は76点で「Needs work」だった。

え~!?

 

で、提示された「適用可能な最適化」のリストを見てみたんだけど、ほとんどどうしていいのか分かんないものばかりだった。

いや、分かる人には分かるんだろう。

でも残念ながらあたしはほとんど分からなかった。ふー。

 

なんとか理解できて対応したのは、(1)スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する、っていうのと、(2)画像を最適化する、っていうのだけだった。

 

(1)に関しては、「設定>詳細設定>Headに要素を追加」の部分に「上に戻るボタン」用のJavaScriptが入ってたのが問題の1つで、「読み込みを遅延させるか、非同期で読み込むか、HTML内に直接インライン化するかして下さい」っていう指示だったんだけど、なんか調べてたらHeadにJavaScript入れないで「上に戻るボタン」を設置するやり方があったからそっちで作り直した。

CSSも4つ「配信を最適化してください」って言われたけど、こっちは具体的にどうすりゃいいのか理解できず。

 

(2)に関しては、一体どの画像のこと言ってんのさ??って感じだったんだけど、下の方に「このページ向けに最適化された画像、JavaScript、CSSをダウンロードできます」って書いてあって、ダウンロードして画像のファイルを見てみたら簡単に分かった。

で、自分でいじれる画像は全部最適化してもらったものと差し替え。

ちなみに、アイキャッチとしてサイドバーに出てくる画像は全て100px✕100pxになってた。これ、記事中のものをそのまま流用する形だと全部アウトってことだよね。

あたしは大抵記事中の画像とアイキャッチ画像は別だからいいけど、とにかくもっと小さくしとけ!ということらしい。

あと、自分で直せないものもあった。ブログランキングのアイコンとかはてなスターのアイコンとか。

 

でもとりあえず自分で分かるものは全部頑張って直した!

 

で、もう一回表示速度チェックしてみたら、なんとモバイルは61点、パソコンは78点に!

 

……って、ほとんど変わってないじゃん!

 

ちぇ。

 

あとは全くどうしていいのか分かんないものか、どうやらサーバーの設定を変えなくちゃいけないってことらしいなっていうものばっかで、たぶんWordpressでやってれば対応できるんだろうけど、はてなじゃしょうがない、みたいな感じ。

たぶん。あたしの理解があっていれば。

 

あたしのはてなProは2年契約だけど、切れたらWordPressに引っ越すべきなのかなぁ……。

 

うーむ。

 

追記:今この記事のアイキャッチ画像をサイドバーで見て思ったんだけど、100px✕100pxって画像が汚すぎるじゃん。これダメでしょ?

入れ替えよう……。

 

 

応援クリックお願いします~