フロントエンドWebサイト高速化
サービス内容例
-
Webサイトの調査
始めにWebサイトの状態をPageSpeed Insights、YSlow、GTmetrix、デベロッパーツールなどを利用し調査いたします。調査結果をもとに、高速化を妨げる要因となっている部分はどこなのかを分析いたします。
-
調査結果から実施施策の協議
調査結果から導き出した課題について、運用要件、システム、インフラとの関係、費用対効果を協議しながらフロントエンドで解決すべき課題と対策を明確にします。
-
高速化施策の実施、レポーティング
協議した施策について実際の開発を行います。高層化施策を実施した後に改めてパフォーマンスの計測を行います。
また、継続的な調査をご希望の場合はそのための準備も行います。ほとんどのお客さまでは一度の施策実施だけでなく、その後、ガイドラインの作成、定期的なチェック、チューニングを実施していきます。
私たちが対応可能なサイト例、効果が出やすいケース
効果が出やすいのは、比較的大規模なWebサイトでインフラ、サーバーサイドプログラムでのチューニングを実施したが、フロントエンドの対策を実施していないWebサイト、スマートフォン向けに軽量化したいサイトです。
私たちで対応が難しい場合が多いのは、超巨大サイトでインフラ、サーバーサイドプログラムのチューニングを未実施な場合です。このケースでは、フロントエンドのチューニングに入る前にインフラ、サーバーサイドの高速化チューニングを実施するほうが効果的です。
フロントエンド視点でのWebサイト高速化のポイント例
画像の最適化
シンプルな対策ですが効果が大きくでるポイントです。画像の圧縮からサイズ指定、サイズなどいくつかの考慮するべき点があります。サーバーサイドでの対応と運用でカバー出来る内容でもあります。
肥大するJavaScriptのチューニング
近年のWeb開発ではJavaScriptを多様するケースが多く、JavaScriptのマージ、処理の最適化、適切なキャッシュ利用で実際の実行速度はもちろん体感としてのチューニングも実施できる場合があります。また、外部サービスとの連携がボトルネックになっている場合もあります。
JavaScriptの実行タイミング
JavaScriptの処理内容や実行タイミングによっては、ページが描画されるまでの待ち時間が発生し、ユーザーにストレスを与えてしまいます。この対策として、以前よりbodyタグの終了の直前に記述するという対策が取られてきましたが、これはRIA系のリッチなJavaScript処理が一般化した現在は注意が必要です。
RIA系の処理はJavaScriptが読まれるまで動作しないため、この記載を一律で採用してしまうと、画面に操作対象が表示されていても動作しないケースも出てきてしまい、逆にパフォーマンスを悪化させてしまうこともあります。いわば過渡期のテクニックともいえます。
実際のJavaScript処理と記述位置について最適化いたします。コードの最適化や圧縮は大きなソースでは効果があります。