こんにちは、佐藤です。

移動中にWebを閲覧していて、「このページ読み込むまでに遅いなぁ…あ、もう次の駅着いてしまう、降りなきゃ！」なんてご経験はないでしょうか。

昨今SEOでもかなり重要視されつつある、Webページパフォーマンスについてのお話です。

一般に認知されつつあるWebページのスピード

Webに関わる人ならきっと気にして見ている部分ではありますが、
最近ではWebに関わらない人でも自宅でYouTube観るときに「遅い」というワード使うようになってますよね。
それだけ世間が「早さ/遅さ」に対して認知が深くなりつつある証拠だと個人的に感じています。
遅いせいでページが開けなくて目的の情報に辿り着けないと別のサイトに行ったりしてしまう事もごくごく普通です。
お子様であればより顕著。遅いと思ったら違う動画タップしてますよね。

え？うちのページこんなに遅いの？？

実は皆さん共通しているのですが、普段よく確認される端末や環境で閲覧する事に慣れているせいか、違う環境で見たときに自分たちのサイトの遅さに気付いて問題意識を持たれる事が多々あります。

普段から自分たちの運用するサイトのパフォーマンスのスコアリングを測定することをお勧めします。
Googleが提供するPageSpeed Insightsなどは初心者にも優しく改善手法を指南してくれますし、少しの改善で大幅な成果を得られることが多々あります。

何が原因で遅いのか

通常のWeb制作の流れでは、キモとなるデザインとコーディングの基礎の上に、後乗せのトッピングとなるタグを乗っけるのが普通でした。

技術の進化とともに基礎部分の肉付けが誰でも簡単に出来るようになりました。

その影響で、完成後から基礎に肉付けしすぎたり、表現部分で無駄なことをしていたりと基礎の最適化が出来ていないサイトが非常に増えてきています。

今回担当したのはページの基礎が5年～10年前に作られたサイトで、たくさんの担当者の手で改善が施され、後から肉付けを何重にもし続け、「誰が何の目的でこの肉付けを行ない、何をしているのかがわからなくなった」いわば、”謎の肉付け”が相当数あるページでした。

謎の肉付けに迫る

Webの知識が少しある方であれば、“謎の肉付け”が転がっているページと聞いただけで怖いですよね。

でも、実はほとんどのWebサイト上では”謎の肉付け”が今も動いていて、ページのパフォーマンスに悪影響を及ぼしている事がほとんどです。

実はこの“謎の肉付け”は、視点をかえると見違えるほどページが早くなる可能性を秘めています。

“謎の肉付け”は、わからないまま捨ててしまうと悲しい結果が待っているので、

・何をしているのかをソースコードを読んで明確化
・誰が管理してるのか
・どれぐらい改善できそうか

をリストアップして断捨離する事が重要です。

簡単な事なのですが、何かわからないものをわからないまま捨てたら、別の担当の方に「あ～使う予定あったのに…」と言われてしまいます。

それが物を売るサイトだったら…と考えると非常に恐ろしい結果が待ってるのは容易に想像出来ます。
また、捨てたはいいけど早くならない可能性をもっているものも当然ながらあります。

さも簡単なことのように箇条書きしていますが、通常の制作会社さんであれば、JavaScriptなどのプログラム要素が密接に関わるため深入りは避ける部分です。

ご安心ください、スネアクロスはJavaScriptに強い会社です。

さて、大掃除のお時間です

実際に大まかに以下のようなプロセスをもって対処しました。

対象ページ数：約20ページ

対象JS/CSSファイル数：2000（インライン込み）

• 1. 棚卸
• 2. 仕分
• 3. 計画
• 4. 検証
• 5. 単体テスト
• 6. 結合テスト
• 7. リリース
• 8. 測定

1~2、3~4、5~8のステップで各１ヶ月程度。
全体で３ヶ月で改善に至りました。

塵一つ見逃さないぐらいの勢いでWebページ上のソースコードを厳密に隅から隅まで大掃除。
パフォーマンスに悪影響がありそうなものは全てリストアップし、Googleタグマネージャ上のソースも精査。
最終的にプロジェクトメンバー間でファイル名を言うだけでだいたい把握している状態になっていました。

リリース直後、体感で早さがわかり、思わず「はやっ！」と声が出る速度に驚きました。

後日、クライアントから、思っていたより短く改善できて助かりました！という反響を頂きまして、私含めスタッフ一同嬉しく思っています。

Web上に残る、謎の肉付けの大掃除はまだまだ続きます。
スネアクロスが少しでもお役に立てればと。