Googleの「PageSpeed Insights」を使ってブログサイトの表示スコアを計測　表示速度は大丈夫かな？

みなさん、コウタロウです！！

今日はタイトルについて。

Googleが提供しているサービス「PageSpeed Insights」を使うとサイトの表示速度を確認することができるよ

上記ページを開いて確認したいサイトのURLを打ち込んで分析ボタンを押すと表示速度をスコアとして表示してくれる

例えば、私のブログを分析してみると、スコアMAXIMUM100として41

いくつ以上が最適化分からないが良くはなさそう

この「PageSpeed Insights」はスコア計測だけでなく、表示速度向上のアドバイスもしてくれる

ビックリマークで修正が必要となっている部分を見てみると「画像を最適化する」と書いてある

試しにURLにカーソルを当てると、ポップオーバー（背景黄色の吹き出し）にURLが表示されコピーすることができる

このURLをコピーしてブラウザで開いていみると

このおじいちゃんの画像サイズが大きんだな

この画像はサイト計測した記事の関連記事にある画像！

早速この記事を開いて、編集画面で画像を右クリックして「名前をつけて保存」で自分のPCにダウンロードして画像を圧縮する

圧縮したらその圧縮した画像にこの記事の画像を入れ替える

※ちなみにこの画像は162KB -> 25KBに圧縮しました

下記、枠でくくった6枚の画像を圧縮したところ41->42に改善

もっと改善されるかと思ったけど、画像の圧縮はそんなに効果が無かった

CSSは外部ファイルにするとパフォーマンスが悪いらしい

はてなブログの場合、デザイン->カスタマイズ->デザインCSSに記載してあると外部ファイルになるそうだ

私の場合、266行CSSが記載されてたのでこれをまずバックアップ

次に下記サイトにそのCSSを貼り付ける

CSSコードを貼り付けると、不要な改行、空白、コメントを削除して最適化されたコードを生成してくれる

このコードをコピーして、はてなブログの設定->詳細設定->headに要素を追加に貼り付ける

※下記のようにstyleタグで括ること

HTMLタグにasyncをを記載すると読み込みを非同期化してくれる

通常、先頭に書いてある外部JavaScriptを全て読み込んでから、HTML要素を読み込むため、JavaScriptの読み込みを待ってから画面を表示するので表示するのが遅く感じられる

asyncを記載することで外部JavaScriptを読み込みつつ、画面を表示するので今まで待っていたJavaScript読み込み分を待つこと無く画面が表示されるので体感的に早く感じる

私の場合、jQueryだけasyncが記載されてなかったので下記のように修正

※jQueryはデザイン->カスタマイズ->記事->記事下に書いてあった

42->44か

なかなか改善されないな？

こんなもんなのかな？

今回は、ここまで

もし、他に効果的な方法とかあれば追記するかもしれないし、別記事で紹介するかも

「はてなブログ　遅い」でGoogle検索すると、はてなスターはずせとか、はてブ数表示をやめるとか書いてあったけど、この2つは自分にとって重要だったので今回は見送りました