みなさん、コウタロウです!!
今日はタイトルについて。
PageSpeed Insightsで表示スコアを計測
Googleが提供しているサービス「PageSpeed Insights」を使うとサイトの表示速度を確認することができるよ
上記ページを開いて確認したいサイトのURLを打ち込んで分析ボタンを押すと表示速度をスコアとして表示してくれる
例えば、私のブログを分析してみると、スコアMAXIMUM100として41
いくつ以上が最適化分からないが良くはなさそう
表示速度の向上に取り組んで見る
この「PageSpeed Insights」はスコア計測だけでなく、表示速度向上のアドバイスもしてくれる
画像の圧縮
ビックリマークで修正が必要となっている部分を見てみると「画像を最適化する」と書いてある
試しにURLにカーソルを当てると、ポップオーバー(背景黄色の吹き出し)にURLが表示されコピーすることができる
このURLをコピーしてブラウザで開いていみると
このおじいちゃんの画像サイズが大きんだな
この画像はサイト計測した記事の関連記事にある画像!
早速この記事を開いて、編集画面で画像を右クリックして「名前をつけて保存」で自分のPCにダウンロードして画像を圧縮する
圧縮したらその圧縮した画像にこの記事の画像を入れ替える
※ちなみにこの画像は162KB -> 25KBに圧縮しました
下記、枠でくくった6枚の画像を圧縮したところ41->42に改善
もっと改善されるかと思ったけど、画像の圧縮はそんなに効果が無かった
CSSの最適化
CSSは外部ファイルにするとパフォーマンスが悪いらしい
はてなブログの場合、デザイン->カスタマイズ->デザインCSSに記載してあると外部ファイルになるそうだ
私の場合、266行CSSが記載されてたのでこれをまずバックアップ
次に下記サイトにそのCSSを貼り付ける
CSSコードを貼り付けると、不要な改行、空白、コメントを削除して最適化されたコードを生成してくれる
このコードをコピーして、はてなブログの設定->詳細設定->headに要素を追加に貼り付ける
※下記のようにstyleタグで括ること
gista77031b5c4aaf23ff8ef3627fb594782
JavaScriptの非同期化
HTMLタグにasyncをを記載すると読み込みを非同期化してくれる
通常、先頭に書いてある外部JavaScriptを全て読み込んでから、HTML要素を読み込むため、JavaScriptの読み込みを待ってから画面を表示するので表示するのが遅く感じられる
asyncを記載することで外部JavaScriptを読み込みつつ、画面を表示するので今まで待っていたJavaScript読み込み分を待つこと無く画面が表示されるので体感的に早く感じる
私の場合、jQueryだけasyncが記載されてなかったので下記のように修正
※jQueryはデザイン->カスタマイズ->記事->記事下に書いてあった
gist485b029ca0e79e1a92e0fad9f30ffc5d
もう一度表示速度を計測
42->44か
なかなか改善されないな?
こんなもんなのかな?
最後に
今回は、ここまで
もし、他に効果的な方法とかあれば追記するかもしれないし、別記事で紹介するかも
「はてなブログ 遅い」でGoogle検索すると、はてなスターはずせとか、はてブ数表示をやめるとか書いてあったけど、この2つは自分にとって重要だったので今回は見送りました
コメント