フリーランス チャレンジ!!

読者です 読者をやめる 読者になる 読者になる

フリーランス チャレンジ!!

週休4日制に俺はなる!

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つは自分にとって重要だったので今回は見送りました