炭酸せんべい

気になったことを適当に。 MacやiPhoneのこと多めかもです。

MENU

Googleの評価を上げる ページの表示速度最適化に取り組んでみた結果

 

f:id:ypmemo:20170617172202j:plain

 

腹筋マリオ、どうもナカニシ(@tssb26)です。

少し前にパパむすさん(@papamusublog)の↓この記事を拝見してずーっと気になってたサイト(ページ)の表示速度

 

www.kailua020.com

 

今まで見よう見まねでゴリゴリとカスタマイズしてきましたので、たぶん無駄なコードがてんこもりなはず

この「ページの表示速度を上げる」とどうなるかというと、Googleさんの評価が上がって自ずと順位も上がるらしい

せっかくアクセスしていただいたのに、なかなかサイトが表示されないが為に他のページに移動されたら悲しいじゃないですか

そういうのを避けるためにも、小さなことからコツコツと(ふるっ)取り組んでおいた方がいいと思われます

ていうてもハト並みの脳みそですので、これも見よう見まねですが、最適化の為にやったこと記載しておきますので参考になさってください

 

 

 

とりあえず現状把握

ということで、まずは現在のサイトの表示速度を計測してみます

計測にはGoogleさんの「PageSpeed Insights」というサイトを利用します

こちら→ PageSpeed Insights


トップページ

f:id:ypmemo:20170617171402j:plain

お、そんなに悪くない数字
でも改善策はいろいろと表示されてます


比較的画像の多いページ

いかにも重そうな画像の多いページを計測してみたところ

f:id:ypmemo:20170617171422j:plain

はい、出ました!0点です!
いーや、Poorやて、プアー!
そんなページ、速度計測するぅー?
0点ってわかる?れーてん
100点満点中の0点て
その顔で?その稼ぎで?
計測しにきたん?はぁ?

って、Googleさんに言われてるような気がします

あかん、やっぱり可及的速やかに改善せんとあかん

 

改善策いろいろ

jQueryが重いらしい

カスタマイズしていたらjQueryというのを読み込むためのスクリプトがたぶんどこかにあります
普通は読み込みは1回でいいのに、複数回読み込んでる場合もあります

はい、うちです、しかもヘッダーに2行もあったという(気付けよ)

参考資料→ はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた - NO TITLE

 

【計測】

f:id:ypmemo:20170617171516j:plain

あれ?変化なし、これが一番の要因やと思ったんですけどね


画像のサイズを小さくする

画像もあんまり考えずペタペタ張ってましたので、画像のサイズと容量ともに縮小させました

サイズは横長画像は横幅640px、縦長画像は横幅400px
容量は50kb以下を目安に調整

 

【計測】

f:id:ypmemo:20170617171542j:plain

お!いきなり改善キタコレ!


外部ファイル読み込みJavaScriptコード最適化

head内でFontを読み込んでいるコードがあるのですが、これをページ表示を優先して、後からフォント読み込みをさせようという裏技

参考資料→ CSSの読み込みを遅延させるJavaScriptコード - NO TITLE

 

【計測】

f:id:ypmemo:20170617171606j:plain

変化なし


削除「こんな記事も書いてます」

標準オプションで関連記事表示ができるようになりましたので、元々つけていたのを試しにはずしてみました

 

【計測】

f:id:ypmemo:20170617171624j:plain

誤差範囲かな、ちょっと改善


PreConnectしておく

説明読んでもよくわかりませんが、要するに、ページ表示までの手順書みたいなのを渡しておいて表示が完了するまで手際よく仕事させることで表示速度をアップさせるということ(らしい)

参考資料→ スマホでのはてなブログの表示が重い・遅いのでできること - 後悔日誌


【計測】

f:id:ypmemo:20170617171639j:plain

変化なし


はてなスター

これが重いというのは聞いてましたので、試しに取っ払ってみました

 

【計測】

f:id:ypmemo:20170617171702j:plain

減っとるがな


全部消してみる

記事上下、シェアボタン、フォローボタン、パンくずリスト、広告
それとヘッダーフッターも表示しない設定にしてみました

 

【計測】

f:id:ypmemo:20170617171719j:plain

それでもこのレベルか、微妙やなぁ


元に戻す

あんまり成果なかったので、全部戻してみて計測

 

【計測】

f:id:ypmemo:20170617171743j:plain

やっぱその辺の落ち着くか

 

最後に

いかがでしたか、とりあえず元に戻しました

最初の0よりかはだいぶ進歩したと思いますが、カスタマイズして利便性上がればある程度の速度遅延はしゃーなしってところですかね

ただ、画像サイズ調整は即効性ありです

あと、この速度計測サイト「PageSpeed Insights」ですが、計測結果を30秒ほど保持してますので
次に計測する場合は30秒以上待ってから行ってください

これで全体的に順位も上がってくればいいんですけどね

検索からの流入がまだまだですので、また様子みてみます