Webの表示高速化は、多くの制作現場において難易度の高いミッションになりがちです。選択肢多すぎ問題ネットワーク・バックエンド・フロントエンドのどれから着手すべきか、それぞれ多くの手法のどれから着手するべきか、どのページから着手すべきか。一発ですべてを解決する銀の弾丸はない。複数のアプローチを、コツコツ長期的に積み上げるしかない。速化によって運用の利便性が損なわれたり、最悪、不具合につながることも。ぶっつけ本番問題どのくらい速度が改善され、サイトの成果にどう貢献するか。予測が困難でやってみないとわからない。成果があったかすらわからない。いった複雑さから優先順位をなかなか決められず、先延ばしになりがち、長続きしない活動になりがちです。高速化のアイデアは3つに分類するとわかりやすいここでWebの表示高速化とは「ファーストビューを早く見せること!」と断言します。Insightsはファーストビューの描画が早くなると、劇的にスコアが改善されることが多いです。Indexなどの指標で計測できます。その視点に立つと、高速化のアプローチは次のいずれかに分類できます。Byte)を早くします。ダウンロードの絶対量を減らすデータの道幅にも限度があります。データ量・リクエスト数・距離、これらの絶対量を減らすことはとにかく正義です。ダウンロードの優先順位を整えるページの下部に必要な素材が先にダウンロードされると、その分ファーストビューに必要な素材の到着が遅れます。大事なのはこれらの分類それぞれについてバランスよく施策を行うことです。どれかに偏っては改善の成果を最大化できません。サーバーの応答速度を上げる静的コンテンツであればあまり問題にはなりませんが、複雑な機能を持つ動的サイトではいちばん重要です。ここが遅くなると全体が遅くなり、後続の頑張りではそれを取り戻すことのできない「クリティカルパス」に当たります。データベースのスロークエリの解決キャッシュ(全体・部分)の有効活用ファーストビュー以外の要素の非同期読み込みなどのアプローチがあります。パレートの法則に則り、80%の待ち時間が20%のコンテンツに費やされている関係がどのサイトにも散見されます。そこで個人的には、その部分だけをやっつける部分キャッシュ(パーシャルキャッシュ)がおすすめです。影響範囲も狭く、手軽です。ダウンロードの絶対量を減らすネットワークというデータが通る道は物理的に限られた幅があり、気合いと根性で限界を突破できるものではありません。電気や光がいくら速いとは言え物理的な距離が伸びると通過する機器が増え、遅れを体感し易くなります。データ量を軽くするリクエスト回数を減らす(同じ種類のデータをまとめる)キャッシュを活用してダウンロード自体を回避する再利用されない小さなCSSやJavaScriptはインライン化するCDNでユーザーに近いサーバーにキャッシュを残す世界的に、Webページを構成するデータの約半数に当たる51%(2019年3月)を画像が占めており、データタイプとしては最も高いシェアを占めています。画像はデザイン要素のみではなく、ユーザーが目にしたい「コンテンツ」としても使われます。画像はCSSやJavaScriptに比べてサイト固有のテクニカルな課題がなく、単純に軽量化しやすい、自動化しやすいという利点もあります。「ダウンロードの絶対量を減らす」という問題について、画像は最初に取り組むべきです。その発想から私たちはLightFileという製品に提供しています。ダウンロードの優先順位を整えるもし、終わりからデータを読み込む画期的な動画サイトがあったら利用するでしょうか?バカバカしいと一笑に付すジョークですが、Webサイトの多くがそんな愚を放置しています。外部のJavaScriptはレンダリングを妨げるのでできるだけHTMLの下部で読み込むか、インライン化するファーストビューに必要のない画像、CSS、JavaScriptは非同期で読み込む(遅延読み込みする)ゲームのようなインタラクティブ性のない通常のWebサイトでは、3つの問題の中でもっとも地味で効果は薄いと言えますが、全ページに等しく影響する問題なので甘くみることはできません。画像の遅延読み込みはライブラリも多く、効果が高いのでおすすめです。Chromeがブラウザの機能として実験的なサポートを試みていることも興味深い話題です。多くのユーザーに影響があり、簡単にできることから始めてもOKサイトの離脱ポイントが明確になっている場合はそこから取り組むべきですが、合意を固められない場合は次の軸で評価してみてはどうでしょうか。多くのユーザーやセッションに影響があるページや画面(アクセス解析から評価)簡単に対処できる問題(作業見積から評価)いずれも成果の予測より、遙かに正確に定量化できる評価軸です。評価軸を決められず手をこまねくくらいなら、そういった視点でタスクを決めてもよいでしょう。まとめ以上、つい後回しになりがちなWebの表示高速化の課題を整理し、ひとつひとつ着実に進めるための考え方でした。ファーストビューの表示が早くなれば成果あり!成果の大きさを正しく予見してホームランを打つより、バランス良く、コツコツとヒットを積み重ねることが大事!そもそも成果の予測は難しい。悩むくらいなら多くのユーザーに影響のあり、簡単にできることから始めよう!せっかくコストをかけて集めたみなさんのサイトのお客さんが、ストレスで無為に離脱することが減るように願っています。プログラマーの宮永です。趣味は投資と打撃系格闘技とドローンとブロックチェーンです。InsightsとLighthouse。Insightsの真実。点数の公式と高得点をとれない理由。5項目の最適化をすることがスコアアップの近道。パフォーマンス偏差値表(通販サイト編)を作ってみた通販サイトスマホトップには平均4.15MBの画像。画質を落とさず-41%削減可能。v3をリリース次へ新人にもわかる!WebPのブラウザ振り分けの仕組みを図解。InsightsとLighthouse。Insightsの真実。点数の公式と高得点をとれない理由。5項目の最適化をすることがスコアアップの近道。Insignts/表示高速化5スマホ表示高速化73画像最適化132WebP23WebP利用事例6Lighthouse19プロダクトLightFile104Ranklet18MTプラグイン4事例紹介5調査データランキングツール14技術系小ネタ1会社2広報27イベント14セミナーその他5月別アーカイブ2020年1月12019年11月22019年10月42019年9月12019年8月22019年7月22019年6月12019年5月22019年4月62019年3月102019年2月152019年1月52018年12月72018年11月72018年10月132018年9月132018年8月212018年7月162018年6月192018年5月152018年4月142018年3月102018年2月142018年1月92017年12月92017年11月142017年10月32017年8月52017年7月1運営会社についてアイデアマンズは、インターネット技術でオドロキを!提供することを目指しています。