【はてなブログ】ブログ高速化でやったことまとめ
どうも、keisukeです。
当ブログで行ったブログ高速化の作業内容をまとめてみようと思います。
みなさんは、ご自分のブログ表示速度を意識していますか？
ぼくは、ここ最近かなり気にしちゃっていてブログ更新が滞るほどですw
で、結構頑張ってブログ高速化をしたのでその作業内容を紹介します。
ブログの表示速度を計ろう！
まずは、ご自分のブログ・サイトの表示速度を計ってみましょう。
上記ふたつのサイトが、サイトの表示速度を計るサイトで最もポピュラーなものだと思います。
特にPageSpeed InsightsはモバイルサイトとPCサイトの表示速度を同時に計算してくれるので便利です。
TestMySiteの方は、モバイルサイトの表示速度に特化したサイトで、モバイルファーストなサイト作りを目指すのに便利なサイトです。
TestMySiteの方が評価がちょっと厳しめです。
ブログ高速化でやったこと
画像の最適化
まずはブログ内の画像を圧縮しました。
長編を640px～800pxにして、画像容量を50～90KBくらいまでにしました。
画像によって、圧縮しすぎると見るに堪えないくらい画質が下がるので一枚一枚しっかり画質を確認しながら最適化していく必要があります。
かなり骨の折れる作業ですが、この作業が一番サイトの表示速度を改善できます。
画像圧縮に利用したサイトはこちら。
CSS・HTMLの圧縮
CSSとHTMLの圧縮もサイト表示速度の向上に効果がありました。
専門的なことがわからない方からすると、そもそも圧縮できるんだって感じですよね(笑)ぼくもそうでした。
CSSとHTMLは圧縮する前に原文をちゃんとメモ帳なりにバックアップを取ってからやりましょう。
CSSの圧縮はこちらのサイトを使用しました。
Refresh-SF - Online JavaScript and CSS Compressor
HTMLの圧縮はこちらのサイトを利用しました。
レンダリングを妨げるJavaScriptを最適化
これに関しては色んなブログを参考にして試行錯誤して行いました。
あまり専門的な作業に自信がない方はやらないほうがよいかもしれません。
いろいろCSSやHTMLを弄って改善を試みるので。
ぼくも、Font Awesomeが表示されなくなったり、SNSシェアボタンやフォローボタンのアニメーションに不具合が出たりしたので結構時間がかかりました。
以下の記事を参考に作業を進めました。
PageSpeed Insightsで100点を出してみた - Blue Leaf
まとめ
はてなブログでは、改善できる手段が限られているので上記3つの方法を試してサイト表示速度の改善に努めればよいかなと思います。
っということで今回はブログ高速化でやったことについてでした。
では、また。
