こんにちは。青です。
ここ数日ブログのカスタマイズに没頭していました。
今回なぜ、カスタマイズしたかというと・・・
私のブログ、「読み込み速度」がめちゃくちゃ遅かったから！
このサイトを知っていますか？PageSpeed Insights
このサイトを使えば、モバイルとPCそれぞれのページ表示速度を確認できます。
先日アップしたこの記事で調べてみました。
ぬいぐるみのダニ除去には布団乾燥機がおすすめ！ - 八方美人ママの日常
▽モバイル
▽PC
モバイル14って！終わってる〜
試行錯誤した結果、なんとかここまでは改善することができました。
左：改善後モバイル ／ 右：改善後PC
モバイルもうちょっとどうにかなんないかな・・・PCはいい感じ！
はてなブログだと限界もあるようですが、表示速度を改善するためにできることを紹介します！
はてなブログでもできるブログの高速化！【表示速度改善】
ブログの表示速度が遅いと悪い影響がある
何かネットで調べ物をした時、サイトがなかなか表示されないことってないですか？
なんと、表示に3秒以上かかると約半数のユーザーは離脱してしまいます！
確かに「このサイト遅！他のサイト見よ〜」って思うことある！
さらに、ページの表示速度はGoogleの評価にも関係してくるそうです。
はてなブログは特にモバイルの速度が遅い
口コミを調べたら「はてなブログのモバイルスピードは遅い！」と皆さん口を揃えて言っていました。
はてなブログの宿命というやつでしょうか・・・
WordPressとは違うので、できることに限りがありますからね。
この辺りも完璧に改善したいなら、WordPress一択ということですね。
でも、いいんだ。私ははてなが好きだから！
はてなブログでできることを探します。
はてなブログでもできる高速化の方法
【高速化する方法】
- 画像を小さくする
- テーマを変える
- いらないCSSを消す
- はてなスターをやめる / ブックマークのコメントを非表示にする
- ブログカードは使わない
- シェアボタンをカスタマイズ
- CSSを圧縮
- Lazy Loadで画像を遅延ロードする
画像を小さくする
私はレビュー記事を書くことが多く、写真をたくさん使います。
今までもPhotoshopで小さくしていたつもりだったんですけどね。
まだまだ全然ダメらしい。
今回使用した画像を簡単に圧縮してくれるサイトがこちらです。
画像の画質を保ちつつ、ファイルサイズを圧縮してくれます。
以前お弁当の記事で使った写真です。
左がPhotoshopで圧縮していた画像73Kです。
これをOptimizillaで再圧縮した結果、右画像の28Kになりました。
63%も圧縮していて、この画質の良さ。最高！
もう地獄のような作業量なんですけど、今までの記事全ての画像を一枚一枚圧縮していっています。終わらない。泣きたい。
ちなみに、PageSpeed Insightsでは「次世代フォーマットでの画像の配信」をオススメしています。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
引用：PageSpeed Insights
でもね、JPEG 2000もJPEG XRもWebPも、はてなブログは対応していません。
JPEGで頑張るしかないのです。
ちなみに、PNGよりJPEGの方が軽くておすすめです。
テーマを速度の速いものに変える
実は、テーマによって読み込み速度が変わるのです！
今まで使っていたテーマは「UnderShirt」でした。
少しでも速度を速くしたいので、新しいテーマを探してみます。
色々調べた結果、あんまり凝っていないデザインならもっと速いらしい。
でもかわいくなーい！却下。
デザインは素敵で、速度が速いテーマが良い！
そんな都合のいいテーマはないですね。
とりあえず、色々みなさんの口コミを見た結果「Brooklyn」に変更してみました。
これね、実験的に変えてみました！
だって私素人なんでね。【UnderShirt】と【Brooklyn】どちらの表示速度が速いかは分かりませんから！
Brooklynの評価がよかったので、とりあえずやってみたという感じです。
※この記事を見てテーマを変えた結果「速度が変わらなかった&遅くなった」という苦情は受け付けません(笑)！私も実験段階なので。自己責任でお願いします。
でもやっぱりカード型が良くて、PCのTOPページはカスタマイズしちゃいました。
こういうカスタマイズをしなければもっと速いんだろうなと思いますが。
「デザインと速さ、どっちをとるか」難しいですね。
CSSの整理をする
使っていないCSSを削除します。泣く泣く諦めたものもあります。
例えばFont Awesome。
アイコンがとても可愛いのですが、読み込みが重くなる場合があるので削除しました。
はてなスターを消す
これ、今回一番悩みました。
はてなブログと言えば「はてなスター」でしょ！
でも、残念なことにはてなスターって重いんですよね。
これも泣く泣く排除。
今までスターを押してくれていたみなさん、本当にありがとうございました。
気になるのが「スターを無くしたらPVが下がる」説！
多分はてなブロガーさんならこの気持ち分かると思う。
これはそのうち検証して、追記したいと思います。
最近のメインは流入検索なので、あまり気にせずやっていきます。
一緒にはてなブックマークのコメント表示も消しました。
ブックマーク自体はなくなっていなくて、記事下の「B!」ボタンを押せば今まで通りのコメントページが開きます。
スターがなくなり、コメント欄も閉じている私のブログ・・・
せっかくはてなブログで運営しているので、横の繋がりも大切にしていきたいですよね。
今後はブクマや問い合わせメール、Twitterでコミュニケーションを取って頂けると嬉しいです！青@初心者ブロガー✖︎ママ (@aomama33) | Twitter
ブログカードを使わない
「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。
引用：はてなブログ ヘルプ
一緒に読んで欲しい記事がある場合、このようなブログカードを貼り付けますよね。
これもやめて、タイトルだけにしました。
シェアボタンをカスタマイズ
これは元々やっていましたが、はてなブログ標準のシェアボタンは重いそうです。
カスタマイズした方がデザインも可愛いですしオススメです。
難しくてやめたもの
他にも高速化のためにできることがまだあります。
が！素人には難しかったのでやめました。
▽CSSを圧縮
一応やってみましたが、若干CSSが反映されないものが出てきてしまいました。
そうするとブログのデザインが崩れてしまいます。
私にはそのあたりが修正できないのでやめました。
Minify Resources (HTML, CSS, and JavaScript) | PageSpeed Insights
▽Lazy Loadで画像を遅延ロードする
pagespeed insightsの改善項目に「オフスクリーン画像の遅延読み込み」とあります。
この辺りはちょっと読んででもう意味がわからなくて、手を出せない！
画像遅延読み込み（ Lazy Loading Images ）をはてなブログで試す方法 - LOGzeudon with はてなブログ
▽JavaScript の削除
使用していない JavaScript の削除は、はてなブログではできないようです。
PageSpeed Insightsで速度テストを行うと「使用していない JavaScript の削除」と表示される – はてな Support
まとめ
ブログの高速化のために色々と試してみましたが、はてなブログではできること、できないことがありました。
【今回私が行ったこと】
- 画像を小さくする
- テーマを変える ※私の場合、効果があったかは不明
- いらないCSSを消す
- はてなスターをやめる / ブックマークのコメントを非表示にする
- ブログカードは使わない
- シェアボタンをカスタマイズ
とにかく自分でもできることをした結果 ・・・
スマホは14から37へ！
PCは39から86へ！
PCはすごく改善しましたね。でも、やっぱりスマホは遅い。
スマホも数字でみるとあんまりだけど、体感としては結構速くなりましたよ！
はてなブログだとある程度は仕方ないようです。
そういうところを全て改善したいならWordPressにいくしかないですね。
でも、はてなブログのメリットもたくさんあるからな〜！辞められない。
「ブログで収益化したいけど、WordPressはまだハードルが高い！」という方は、はてなブログProが断然オススメです。
私もブログ開設半年で収益化に成功しています！