フロントエンドWebサイトのパフォーマンスを測定する方法

最適化プロセスといえば、新時代のWebデザイナーの間ではほとんど存在しません。 10年以上営業している多くのWebデザイナーでさえ、サイト最適化の重要性を十分に理解していません。.

長期間が経過した後、Webサイトは行き詰まり始めます。フロントエンドファイルには、誇張されたコードブロックまたはロックされた隠されたビットが含まれている可能性があります。これは最も一般的にはJavaScriptファイルや画像内で起こっているのが見られます。ユーザーエクスペリエンスのために楽しいWebサイトを作成することが重要かもしれませんが、最適化されたWebサイトがないと、デザインはせっかちなユーザーに完全に負荷をかけることすらできないかもしれません.

以下のコツは、興味がある初心者から中級者のWeb開発者向けです。 自分のページを最適化する 最大限に。利用可能な多くのテクニックがあり、それぞれがあなたのウェブサイトがどのような問題に苦しんでいるかに応じて動作が異なります。いくつかの領域をスキミングしてみて、あなたがあなた自身のマークにこれらのテクニックを適用できるかどうか確かめて.

HTTPリクエスト

Webサイトが読み込まれるたびに、HTTPリクエストがリモートサーバーに送信されます。この種のデータ転送は ネットワークプロトコル 平文ファイルの配布と保存に特に使用されます。これらには、HTML、CSS、JavaScriptなどの基本的なフロントエンドコードが含まれています。.

リクエストが送信されると、ブラウザは各ページ要素を解析します。解析エンジンに応じて、各Webサイトは異なる方法でロードされ、要素は転送速度に基づいてさまざまな順序で表示されます。たとえば、Internet ExplorerはChromeやSafariとは異なるWebページをレンダリングし、これらすべてはFirefoxやOperaとはわずかに異なる解析エンジンを実行します。.

考慮する必要があるのは、各ファイルの要求時間がどれくらいかかるか、そしてこの傾向が一貫して成り立つかどうかです。 1か月に10万人以上の訪問者を受け取ることを検討してください。各ページ要素をつなぎ合わせて外部ファイルをメモリにロードするのはブラウザの仕事です。.

多くの場合、Webサイトの最適化された速度参照の不格好なJavaScriptには、大きな画像ファイルが含まれています。 Verizon FiOSの普及により、インターネットの速度が600kbpsに達して上昇を続けることは一般的です。残念ながらこれは標準ではなく、高速接続でも最適化エラーが発生する可能性があります。.

サイトパフォーマンスの改善策

私たちは、Web開発とフロントエンド最適化の分野で一人ではありません。適切な作業を完了するためには、その仕事を処理するために必要な特定のツールがあります。.

Googleは、開発者がWebサイトを最適化し、最高レベルのパフォーマンスを確認できるようにするために作成されたPage Speedというプロジェクトをリリースしました。もともとこのプロジェクトはオープンソースのFirebugアドオンとして始まり、現在はWebサイトテストのためのサードパーティの参照として受け入れられています。.

Firebugユーザーのためのもう一つの選択肢はYahoo！のYSlowアドオンです。このスクリプトは各Webページ要求を分析し、パフォーマンスを向上させるための最も一般的な方法を提案します。これらの提案はYahoo!に基づいています。 Webデザインにおける最適化のベストプラクティスに関する開発者向けリソース.

このプログラムは、非常に多くの情報を含んでいるので、最初は少し厄介かもしれません。単に基本に固執して、簡単なドキュメンテーションに従うことによって、プロセスは簡単なことであるべきです.

開発者は常にプロジェクトに飛び乗ってコードを分割することに興味があるので、これは簡単なことではありません。ちょっとした手助けについては、YSlowのヘルプガイドをチェックしてください。.

スピードテクニック

あなたがすぐにあなたのウェブサイトに適用できるパフォーマンスをスピードアップすることができるいくつかの簡単なトリックがあります。最初のそして最も簡単な方法はあなたのCSSとJavaScriptファイルを分けることです.

CSSコードはあなたのドキュメントのヘッダに属します。 DOMの読み込み中にCSSプロパティを解析する必要があるため、これは便利です。 Webブラウザが見出しでCSSスタイルを認識すると、すべてのスタイルがロードされるまでWebページが完全に表示されるのを待ちます。また、アイコンや背景デザインに使用されている画像は読み込みに時間がかかるため、最初に読み込む必要があります。.

反対に、すべてのJavaScriptファイルをサイトのフッターに移動すると、ハングアップ時間が大幅に短縮される可能性があります。多くのブラウザは並列ダウンロードをブロックしています。つまり、ページをレンダリングする前にユーザーのWebブラウザが4秒間停止して外部のJSが完全にロードされる可能性があります。.

これは常に可能というわけではなく、すべてのWebサイトで常に必要というわけでもありません。インクルードファイルの配置に関係なく、同じレスポンスタイムで同じページがページに読み込まれる場合は、再生を気にする必要はありません。.

動的コンテンツはDOM全体が完成するまでロードできませんが、時々これはエラーを返します。 CSS / JSインクルードをテストして、最適化のメリットがあるかどうかを確認します。.

ファイルサイズ圧縮

大きなファイルを圧縮することは非常にポピュラーになりました。それは今ロード時間を減らし、ファイルサイズを非常に小さく保つためにWebページで利用することができます。ほとんどの作業はすでに行われており、YUI Compressorのミニサイズファイルなどのツールを使用するのは無駄な作業です。.

このタスクを手助けするために、Web上には他にもたくさんの無料サービスがあります。. CSSを縮小 プロセスを簡単にするためのCSS圧縮インターフェース全体を持っています。同じWebサイトには、同じタスクの多くを実行するがスクリプトを体系的に保つカスタムJavaScriptコンプレッサーもあります。.

あなたはまたあなたのWebページの最大の画像を圧縮することを検討するかもしれません。これは、Adobe PhotoshopやGIMPなどの写真編集ソフトウェアで、より低い解像度で画像をリサンプリングするだけで実行できます。 PNG画像は、jpgやTIFF形式よりも平均してはるかに小さいサイズでエクスポートされます。 Image Optimizerなど、圧縮プロセスを支援するためのオンラインツールも多数あります。.

ソースチェックとメトリクス

これはWeb開発者によってはあまり行われないルーチンであり、驚くべき結果をもたらすことがあります。 Webサイトのすべてのページ要素を分析することで、どれが最もロードに時間がかかったのか、そして各ピースがロードされた順番を確認できます。.

最も人気のあるツールMozilla FirebugはFirefoxブラウザ用のプラグインです。このアプリは、各Webサイトの応答時間、ヘッダー情報、ページ要素、およびスクリプトを確認するために、ブラウザの下部に小さなツールバーをインストールします。このスクリプトは、Google Chromeの拡張機能としてFirebug Liteにも移植されています。.

mod_pagespeedを使ったApache

すべてのセットアップがApache Webサーバーを実行しているわけではないので、このオプションは常に利用できるわけではありません。このモジュールは直接関連しています GoogleのPage Speedモニタ 先に述べた。実際、mod_pagespeedのコードはもともとGoogle Codeのデータベースからの多くのライブラリに基づいていました.

Apacheでは、サーバー管理者はモジュールと呼ばれる小さなパッケージをインストールしてサーバーのパフォーマンスを向上させることができます。. mod_pagespeed 実行時に自動的に最適化手法を実行するこれらのモジュールの1つです。一覧表示するプロセスが多すぎますが、主なアプリケーションの中にはオンザフライのHTML / CSS / JS圧縮や画像キャッシュなどがあります.

このプロジェクトは現在Googleに収容されており、開発者に公開されています。 Googleは、Apache HTTPサーバーを実行しているすべてのホスティングアカウントにmod_pagespeedを実装するためにGoDaddyと協力しています。.

他の多くのオプションが利用可能ですが、特に重要なWebページの事前最適化を考えると、フロントエンド開発作業は最も激しいものです。サイトのヘッダーや大きな画像を最適化することは、非常に面倒ですがやりがいのある作業です。.

この記事で紹介したテクニックをいくつか考えて、それらをWebプロジェクトにどのように適用できるかを見てみましょう。多くの場合、開発者は自分たちの仕事を評価し、古いコードを片付けるのに十分な時間がかかりません。それでもいくつかのヒントを探しているのなら、フロントエンドのメンテナンスと便利なパフォーマンスの強化についての究極のウェブ最適化ガイドを読むべきです。.