どうも、最近はマイクロドローンにハマりすぎて水耕栽培がお留守になってるカタオカ(@peterminced)です！
さて、1年位前からブログ界で話題になっているのがサイト高速化。スマホユーザーが増えるに従って重要性は増しており、サーバー移転やテーマを変える人も出てきました。
私もVPSサーバーConohaにKusanagiを導入しサブサイトを運用してみたりとそれなりに試行錯誤。ただメンテする機会が多いこのサイトは、管理画面が使いやすく日々アップデートされるエックスサーバーで続けたい。そう悶々としていたら・・・
DIVEINTOCODE時代の同期が【WEBサイト高速化】に関する書籍を発売したという知らせが！
相変わらず目力がスゴイDIC野呂さん（左）と同期の佐藤氏（右）
今回はDIC同期 佐藤あゆみさんの著書「HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門」を読んで実際どれだけスピードスコアが上がったのかを感想交えてお届けしましょう。
目次
フロントエンドで十分対策できる事がある
サイト高速化というとバックエンドの話になりがちですが、実際サーバーをいじるとなると壊れないか気を遣ったり、煩雑な手続きを理解する必要があり手軽にできません。また外部にインフラ面を任せている場合、作業コストが発生します。
しかしフロントエンドなら少しWEBに詳しい担当者でもできます。本章では私自身が見落としていた気付きを中心に書きます。
適切な画像形式になっているか？
画像ファイルって種類がいくつかあるじゃないですか。JPEG・PNG・GIFとか。正直画像ならどれでも良くて、違いは下記くらいの認識しかありませんでした。
- JPEG：一般的に良く使われる
- PNG：背景が透けるやつ。割とサイズは軽くなる
- GIF：パラパラアニメ用
けどそれぞれ効果的な使いどころがあるんですね。
アクセスの多い記事を見てみたところ、写真をPNG形式でUPしておりめちゃくちゃサイズが肥大していることが分かりました((+_+))
CSSファイルの重さを侮っていないか？
cssファイルって突き詰めれば文字・テキスト情報。なのでそれほど重くないと思っていたのですが、チリも積もればサイトスピードに影響するそうです。
私の場合、CSSファイルを圧縮したり、余計な記述をまとめてスリム化するなどできる事が盛りだくさんでした。
cssを圧縮するminifyという技法
あと、フォントファイルも馬鹿にできなかった・・・
ちょっと書籍読んでwebページの高速化に取り組んでるんですが
WEBフォントの「Noto Sans Japanese」って読み込むのめちゃくそ重いんですね、、、気づかなかった。
とりあえず一時的に外しまっす pic.twitter.com/FJUEuJpWAa— カタオカ⌘兼業水耕農家FPV (@peterminced) 2019年5月11日
検証ツールを使いこなせているか？
WEBサイトの速さを計測するツールは下記のとおりたくさんあります。
しかしきちんと使いこなせていたかというと微妙で、ただ出てくるスコアだけ見て一喜一憂していた部分も＾＾；
細かい細部の結果はスルーしてた。というより意味分かってなかった汗
本書では計測ツール上のメッセージ意味だけでなく、当該現象が起こる背景まで深堀して説明がなされています。
また、chrome検証ツールを使ったスピード測定方法も明記。正直知らなかったので助かりました笑
実際に自サイトに適用してみた
本書で学んだ内容を元に、自サイトがどれだけ早くなるのか試してみました。
ポイントはTopページではなく、アクセス数の多い長文人気記事を対象としました。理由は、ブログの場合TOPページを経由せず個別記事に流入してくるパターンがほとんどだからです。
ベランダゴーヤ研究所：マイクロバブル記事の場合
3年前に書き、いつの間にかゴーヤ研の上位人気記事となったマイクロバブルDIY自作記事。
訪れた人がストレスなく閲覧できるようにと思い改善対象に選定。
- サーバー環境：エックスサーバー
- ワードプレスのテーマ：ストーク
- 月間アクセス数：3,000PV
【実施前のスコア】
モバイル：14
パソコン：28
モバイルだけでなく、パソコンのスコアが28と悲惨！まさかここまで遅いとは思わなかった・・・涙
【実施後のスコア】
cssファイルの最適化や不要なフォント排除など地道に積み上げた結果・・・
モバイル：53
パソコン：86
まとめると
- モバイル：14⇒53
- パソコン：28⇒86
と大幅に改善。使いやすいけどちょっと重たいストークのスコアとして考えるといい結果が出たと思います。
マイクロドローン専門サイト：FHD化の記事
趣味でハマり込んでしまったマイクロドローンの特化サイト。先日凄まじい労力をかけて公開したFHD（フルハイビジョン）化の手順記事を解析してみましょう。
- サーバー環境：エックスサーバー
- ワードプレスのテーマ：SANGO
- 月間アクセス数：公開したばかりなので不明。SNSでバズった。
【実施前のスコア】
モバイル：21
パソコン：37
なんと軽快に動作するSANGOを採用しているにも関わらず散々なスコア。気合入れすぎて40個も写真ぶち込んだのがイケなかったっぽい・・・。
SANGOだからって油断は禁物ですな・・・
【実施後のスコア】
画像の最適化や遅延読込などを施した結果
モバイル：54
パソコン：95
まとめると
- モバイル：21⇒54
- パソコン：37⇒95
とこちらも大改善！
ちなみにモバイルのスコアは3G回線を基準としています。現在ほとんど4G回線なので中くらいのスコアであれば問題はないとのこと。
著者：佐藤あゆみさんのこだわり
私が参加した出版講演会では、著者佐藤さんのこだわりを聞くことができました。
- WEBの情報は多い上に前提知識が必要で難易度高
- 入門者向けの体系的な知識がなかったのが執筆のきっかけ
- WEB担当者が自身で実行しやすいよう無料で使えるツールしか紹介しない
なんというユーザー愛。おかげで私のサイトも追加コスト不要で高速化できました。
どんな人が「Webページ高速化超入門」を読むべきか？
以上を踏まえてどんな人がこの本を読むと良いのか列挙してみました。
- [未経験からエンジニアを目指す人]：ポートフォリオにCSS圧縮の技法を盛り込めば高速化への意識がPRできる
- [サーバー・DB側で高速化してるエンジニア]：意外とフロントで解決できるかも
- [企業WEB担当者]：HTML・CSSの簡単な知識があれば自分で取り組める
- [リスティング広告の運用者]：LPのパフォーマンス改善に
- [ブロガー]：記事数・アクセス数多いほど効果を発揮
高速化による機会損失低減が実現できるので書籍代はすぐに回収できることでしょう。
出版記念講演会のサイン会の様子
まとめ
今までWEB検索で出てきたページでなんとなーく高速化に取り組んでいましたが、「Webページ高速化超入門」を読むことで理由や背景が理解できました。
実はこっそり他のブロガーさんのサイトをいくつかPageSpeed insightで見たのですが、速いサーバーに移転していてもそれほどスコアが高くない例がいくつか散見されました。なのでフロントエンドで劇的に改善する余地はまだまだあるのかなという所感です。
また、サーバー移転を考えられている方は一度書籍を読みダイエットの余地がないかチェックしておけば、移転後さらなる高速化が実現できるでしょう。
今日の一句
”引っ越しの 前にしとこう ダイエット”
コメントを残す