Memoranote

興味のあること、感じたこと、気になったこと、体験したこと、手に取ってみたことを記したブログ

【はてなブログ】ページ読み込み改善のために高速化カスタマイズの検証をしてみた

f:id:Kiwham16:20190206110918j:plain

SEOの事を考えた時に、やっぱりサイトの読みこみ速度は重要だよね~と常々思ってる。
実際、仕事でもそこはずっと拘ってやっている。
じゃあ、自分のブログも改善していかないと、ということで、このお話。

計測使用ツール

PageSpeed Insights

天下のGoogle様が開発した、お馴染みのこちら。

現状

トップページよりかは記事ページの方が、ページボリュームも多いし差が出るかなと思い、一番直近でアップした記事で検証してみる。

んー。

 

まあね。

 

時間帯や検証のタイミングでも誤差はあると思うし、これはあくまで記事の一つだけでの検証なので、一概には言えないが、まあ大体こんな感じ。
正直、ブログ作成以来、javascriptなんかも含めて、そこら辺全く気にせずどんどんカスタマイズしていたので、もっと酷い惨状かと思ったけど、まあめっちゃ酷くは無い。

まあ酷いんだけど。

色々やってみた

ということで色々と検証してみる。

よく言われるのは、「画像の容量削減」。
が、個人的には(めんどくさいので)あまりしたくない。

最近では画質を落とさずに容量を削減出来るツールもありますが、あれも結局少なからず画質落ちてるからね。

という事で、それ以外の部分で検証してみる。

不要なSNSボタンの削除

ぶっちゃけ使うことのないようなSNSボタン消しちゃおう!
正直、SNSボタンの彩りだけでページに追加していたみたいなとこあるよね(いや、ない)。

はてぶ、Facebook、Twitterだけ残して他は全て削る。

方法

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「ソーシャルパーツ」の不要なSNSボタンのチェック解除

結果

お!
さっそく効果が。

確かにSNSボタンって読み込みに時間かかってるしね。

コメント欄削除

コメント欄ってコメント数多くなってくると、エリアも食ってるし、容量も多そう。

 

いや、この記事にコメントは1件もないんだけどね。

 

…。

方法

「ダッシュボード」→「設定」→「基本設定」→「記事」→「コメント設定」のラジオボタンを「なし」に

結果

 

は? 

 

無慈悲すぎんだろ。

モバイルに至っては、もはや息をしてすらいない疑惑。

サイドバーのInstagramとTwitterのウィジェット削除

インスタグラマーぶっていたため掲載していた、InstagramやらTwitterのウィジェットを、インスタグラマーぶるのはらしくないとの判断からこの際取ってみる。
こいつら揃いも揃って埋め込み式の要素なので、読み込みにもタイムラグあるし、多少は影響あるのでは。

方法

「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」のInstagramとTwitterのモジュール削除

結果

お!

モバイルに改善見られたのはガチっぽい。
PCも平均まであと一歩。

SNSボタンと一緒で、埋め込み型の要素は多少影響あるのかもしれない。

cssファイルの圧縮

cssは結構カスタマイズして行数が嵩んでいるので、改行などを全て削除する事により圧縮して容量を減らしてみる。

使用ツール

CSS Minifier

方法

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインcss」内のcssを上記サイトで圧縮した後、再度コピペ

注意点

カスタマイズしているcssのため、バックアップは取っておこう。
メモ帳などに圧縮前のcssを一度コピーしてどこかに保存しておくと良い。

結果

なんかもう訳が分からなくなってきた。

モバイルは改善しているので、効果ありと捉えたいが。

同じくjsファイルでもやってみたが、改善は見られず(最早省略)。

一応jsの使用ツール

JS Minifier (JavaScriptの圧縮)

気になったこと

計測結果の詳細画面で

詳細画面では原因となっている項目を羅列してくれているのだが、

ちょっとここが引っ掛かっていた。
これは、Facebookのボタンを実装する時に埋め込むソースなのだが、ここら辺りに絡んでくる所でなんか見直せないかなということで。

SNSボタンを上下から下のみへ配置

先ほど残したSNSボタンも記事を読んでから押して貰えれば良いかなと思っていたので、一度ページ上下に設置していたものを、ページ下のみに変更した(元々の設定はページ下のみになっている)

む!!

何故かモバイルはまた改悪になったが、PCが平均を超えた。

ほんまかいなこれ。

なんかなにもかもが信じられなくなっている。

彼女に、じゃなかった数字に振りまわされている。

まとめ

PageSpeed Insightsは気まぐれであり、ツンデレである。

そういうことにしとこう。

納得が行くほど改善はされていませんが、引き続き色々と検証はしてみます。

今回の検証は行ってみる価値はありますが、計測結果はあくまで個人差やPCのスペック、回線環境などにも影響するということはご了承ください。

それでは。