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

ブログ

f:id:ksakae1216:20161225112847p:plain

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

 

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

 

  • もう一度表示速度を計測
  • 最後に
  •  

    PageSpeed Insightsで表示スコアを計測

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

    PageSpeed Insights

     

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

     

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

    f:id:ksakae1216:20161225105233p:plain

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

     

    表示速度の向上に取り組んで見る

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

     

    画像の圧縮

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

    f:id:ksakae1216:20161225105439p:plain

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

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

    f:id:ksakae1216:20170101000133p:plain

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

     

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

    f:id:ksakae1216:20161225105840p:plain

     

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

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

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

    f:id:ksakae1216:20161225105938p:plain

     

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

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

    f:id:ksakae1216:20161225110018p:plain

     

    CSSの最適化

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

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

     

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

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

    syncer.jp

     

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

     

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

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

    gista77031b5c4aaf23ff8ef3627fb594782

     

    JavaScriptの非同期化

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

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

     

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

     

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

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

    gist485b029ca0e79e1a92e0fad9f30ffc5d

     

    もう一度表示速度を計測

    f:id:ksakae1216:20161225112524p:plain

    42->44か

    なかなか改善されないな?

    こんなもんなのかな?

     

    最後に

    今回は、ここまで

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

     

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

    コメント

    タイトルとURLをコピーしました