Webパフォーマンスのトリック - 基本を超えて

この記事はNew Relicが後援しました。 SitePointを可能にしてくれたスポンサーをサポートしてくれてありがとう！ ここで長年にわたって多くのパフォーマンスの話をしてきました。そして、いくつかのより高度な側面でトピックを再訪する時が来たと信じています。この記事に記載されているアプローチは、厳密にPHP関連するものではありませんが、適切に使用すれば、アプリケーションがまったく新しいレベルになることを確認できます。通常のものはカバーしないことに注意してください。CSS、JS、および画像のリクエストが少なく、より高速なWebサイトを意味し、同様のヒントは一般的な知識です。代わりに、あまり知られていない/使用されているアップグレードに焦点を当てます。

キーテイクアウト

HTML要素と不必要なタグを最小化すると、Webパフォーマンスの向上に役立ちます。事前にリソースをロードするためにプリフェッチテクニックを使用すると、速度とユーザーエクスペリエンスが向上します。 CSSLINTやCSSなどのツールを使用してCSSを検証して、エラーと潜在的なパフォーマンスの問題を検出するために説明します。 CSS 2Dを使用すると、トップ/左の代わりにオブジェクトを移動するために翻訳することもパフォーマンスを高めることができます。

GoogleのPageSpeedモジュールは、Webサイトの最適化のためのベストプラクティスを自動的に実装し、静的リソースのサービングを改善し、CSSとJavaScriptの模倣と最適化、画像サイズの削減 Googleのオープンソース圧縮アルゴリズムであるZopfliを使用すると、圧縮が3〜8％増加する可能性があります。 小さなパフォーマンスの修正は、Webサイトの全体的なパフォーマンスに大きな影響を与える可能性があります。 HARやDEVツールプロファイリングなどのツールを利用して、サイトのパフォーマンスを監視し、必要な改善を実装してください。
html
• 不要なタグを削除します
要素が少ないほど良い。不要なHTMLを削除します

vs.

もちろん、すべてのシナリオには適用されませんが、できるだけ多くのDOM要素を削除できるようにHTMLを構成します。
• 不要なタグを省略して、HTMLドキュメントのファイルサイズを減らすこともできます。これはかなりハッキーに見える傾向があり、標準に反しているように見えるので、生産に展開するときにのみ行う必要があります。そうすれば、同じコードで作業する他の開発者を混乱させません。
  prefetch
  知恵とは、ブラウザにリソースが事前に必要になることを伝えるときです。リソースは、ドメインのIP（DNSプリフェッチ）、画像やCSSファイルなどの静的リソース、またはページ全体になります。

  ユーザーがサイトにアクセスした後に別のドメインに移動することを期待する場合、またはたとえば、画像のようなサブドメインで静的リソースをホストする場合、example.com、DNSプリフェッチは、それが必要とする数少ないミリ秒を削除するのに役立ちますDNSサーバーImages.example.comをIPアドレスに解決します。ゲインはそれほど多くはありませんが、蓄積されているため、ユーザーのブラウザにしているリクエストからまともな読み込み時間を削ります。 DNSプリフェッチは、

  のようなで行われます。現在のページを使用した後に現在の訪問者がロードするとサブドメインがある場合、DNSプリフェッチを使用しない理由はありません。

  次の訪問でいくつかのリソースが必要になることがわかったら、それらをプリフェッチしてブラウザキャッシュに保存することができます。たとえば、ブログがあり、そのブログに2部構成の記事がある場合は、2番目の部分からの静的リソース（つまり画像）が事前にロードされていることを確認できます。これは、次のように行われます。 PicasaのWebアルバムは、これを広範囲に使用して、現在視聴している画像に2つの次の画像を事前にフェッチします。古いブラウザでは、JavaScriptにPhantom Image要素をロードすることでこれを実現できます。

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  これにより、画像がキャッシュにロードされますが、どこにも使用しません。ただし、この方法はCSSおよびJSファイルでは機能しません。そのため、古代のブラウザでプリフェッチする場合は、リソースを使用して独創的でなければなりません。 xmlhttprequestスプリングスを思い起こさせる - ajaxを介してそれらをロードし、それらをどこにも使用しないでください。それをやってのける方法については、ここを参照してください。
  注意すべきことの1つは、ユーザーが必要とするか、ほぼ確実なリソースのみをプリフェッチすることです。ユーザーがページングされたブログ投稿を読んでいる場合は、確かにプレッチしてください。ユーザーがフォーム送信画面にある場合、送信後にリダイレクトされる画面に期待できるリソースを確実にプリフレットします。サイト全体をプリフレットしたり、ランダムにプリフェッチしたりしないでください。帯域幅を考慮し、モバイルデバイスを念頭に置いて、控えめにプレイすることを使用します。通常、モバイルデバイスは限られた帯域幅にあり、2MBの画像を事前にダウンロードすることは、おそらくユーザーフレンドリーではないでしょう。これらの問題は、選択的にプリフェッチすることで回避できます。ユーザーがモバイルデバイス上または限られた帯域幅の接続にあるときに検出し、そのような場合にはプリフェッチを使用しないでください。さらに良いことに、Webサイトに設定を追加して、人々にプリフェッチに同意するように依頼します。ユーザーエージェントの文字列で設定を保存し、すべてのデバイスでのプリフェッチを個別に許可または禁止できるようにします。

  ページ全体をプレイしてプレレンダーすることもできます。ページのプリフェッチとは、DOMコンテンツ（HTML）を取得することを意味します。これは通常、ほとんどのコンテンツが実際にJavaScript、CSS、画像にあるため、それほど速度を高めません。コンテンツはページプリフェッチで取得されていません。このタイプのフェッチは現在、Firefoxによってのみ完全にサポートされています。プレレンダリングは別の問題です。プレレンダリングはChromeのみであり、舞台裏のDOMを取得するだけでなく、CSS、JS、画像の形で関連するすべてのコンテンツを取得します。実際、それはすでにページ全体をバックグラウンドでレンダリングしています。ページはRAMに座っており、完全に開いてレンダリングされ、訪問を待っています。これにより、ユーザーがプレレンダリングリンクをクリックすると、変更が瞬時になりますが、前の段落で説明されているのと同じ問題を導入します。さらに、サーバーはこのプレレンダーを訪問として登録するため、ユーザーが実際に心を変えてプレレンダリングされたWebサイトを開かない場合、歪んだ分析を取得する可能性があります。プレレンダーの構文は次のとおりです

  現時点では、プレレンダリングまたはプリフェッチされているページを検出する適切な方法は1つだけです。これは、AndroidブラウザとOpera Miniを除くすべての主要なブラウザで現在サポートされているページVisibility APIを使用しています。このAPIを使用して、ページが実際に監視されていることを確認し、その後、あなたがしている可能性のある分析トラッキングを開始します。
  css

css lint

• CSSLINTを使用してCSSを検証し、エラーと潜在的なパフォーマンスの問題を指摘します。最も効率的な可能なCSSを書くために、csslint wikiに記載されているルールを読んで尊重します。
  css説明

  SQLがデータベースの世界で説明しているのと同じように、https://github.com/josh/css-explainの気の利いたCSS説明ツールもあります。これを使用して、CSSセレクターを分析できます。すぐにテストしたい場合は、このファイルの内容をブラウザのコンソールに貼り付け、cssexplain（ '。item.subclass.anotherclass'）のようなコマンドを発行するだけです。

• 目標は、1〜10のスケールで可能な限り低いスコアを取得することです。また、JSFiddleで試してみることができます。結果はあまり真剣に受け止められていませんが（CSSSlintのアドバイスに従った方が良いです）、彼らはまだセレクターの複雑さを説明し、少なくとも考えられる問題を示唆するのに良い仕事をしています。

  翻訳対上/左

  CSS 2D翻訳を使用して、トップ/左ではなくオブジェクトを移動します。ポール・アイリッシュとクリス・コイヤーがこのような素晴らしい仕事をしたとき、これを詳細に説明しようとする意味はありません。必ず彼らの素材を読んだり見たり、この知識を焼いたりしてください - 可能な限り上/左に翻訳してください

  。

• スムーズにスクロールします

  FacebookやGoogleなどのサイトが agesを開くときにスクロール可能になることに気付いたかもしれません。ウォームアップするのに時間が必要なようです。これは、今日の多くのウェブサイトで問題であり、UXの巨大なガットパンチです。ページをスムーズにスクロールさせることは、特に何を注意すべきかを知っている場合は、見た目ほど難しくありません。スクロールラグを減らすための鍵は、ペイントを最小限に抑えることです。画面上のコンテンツがフレームからフレームに変更されたときに塗料が起こること、ブラウザは画面で塗り直す必要があります。新しい外観を計算し、この新しい外観をスラップする必要がありますレンダリングされたWebサイトが構成するレイヤーの1つ。これらの問題の詳細については、塗料の問題を診断する方法を調べるには、Paul Lewisの優れた投稿を参照してください。

サーバー

簡単な勝利でPHPを最適化します

• PHP側からアプリをスピードアップするためにできることはたくさんあります。簡単な勝利については、Fredric Mitchellの最後の記事またはSitePointの他のパフォーマンス関連記事をご覧ください。

  GoogleのPageSpeedモジュールを使用してください

GoogleによるPagesSpeedモジュールは、NginxとApacheにインストールできるモジュールであり、Webサイトの最適化のためのいくつかのベストプラクティスを自動的に実装します。モジュールは、クライアントが知覚したようにWebサイトのパフォーマンスを評価し、すべてのルールが可能な限り尊重されていることを確認し、特に静的リソースのサービングを改善します。使用していないメタデータを削除することにより、CSSとJavaScriptを縮小、最適化、および圧縮し、ブラウザキャッシュをよりよく利用するためにヘッダーを適切に有効にすることにより、画像サイズを削減します。何よりも - あなたからのアーキテクチャの変更は必要ありません。サーバーに差し込むだけで動作します。モジュールをインストールするには、これらの手順に従ってください。NGINXのソースからビルドする必要がありますが、それは単なるカップルコマンドです。 PagesSpeedを適切に紹介するには、次のビデオを参照してください。今では少し長くて古いですが、それでも信じられないほど貴重なリソースです。

• spdy

• 画像にWebpを使用してください

  WebPは、JPG、PNG、GIFのすべてを交換することを目的とした画像形式です。アルファ層（透明性）、アニメーション、ロスレス、損失のある圧縮などをサポートします。ブラウザの採用は非常に遅いですが、前述のPagesSpeedモジュールのようにWebP変換を自動化するツールを使用して、最近のすべての画像タイプをサポートするのは簡単です（画像をFlyで自動的にWebpに変換できます）。 Webpに関する詳細な紹介と議論については、この包括的なガイドを参照してください。

zopfli
• で圧縮します

  Zopfli圧縮を使用して、静的リソースを事前に圧縮します。これはオープンソースの圧縮アルゴリズムであり、再びGoogleが先導し、オンラインで使用される通常の圧縮方法と比較すると圧縮が3〜8％増加します。小規模なWebサイトではこれはほとんど違いが生じませんが、アプリをスケーリングしたり、多くのクライアントに静的コンテンツを提供したりする場合、Google Web Fontsチームが報告しているように、顕著な違いが生じます。 >

結論

アプリのパフォーマンスを改善するには多くの方法があり、しばしば人生にあるように、全体はパーツの合計よりも大きくなります。この記事で言及したいくつかの測定値とそれに先行する測定値のいくつかを実装すると、素晴らしい、具体的な改善が得られます。それらすべてを実装すると、アプリが非常に速くて軽いアプリがあり、時間を経て移動できます。アプリを監視したり、HARを利用したり、開発ツールのプロファイリングを見たり、これをすべて行うサービスにサインアップしたりしてください。サイトのパフォーマンスの側面を無視しないでください。最近のほとんどのプロジェクトは「やり取り」ですが、誇りに思っていないウェブサイトをクライアントに残さないでください。 あなたができる小さな修正を過小評価しないでください - あなたはどれが卓越性への転換点になるかわからない！ HTMLのDivタグとSPANタグの違いは何ですか？html、DivおよびSPANタグのHTMLの違いは、それぞれブロックレベルとインライン要素をグループ化するために使用されます。 Divタグは、より大きなコードのチャンクに使用されるブロックレベルの要素であり、スパンタグは、ライン内のHTMLの小さな塊に使用されるインライン要素です。それらの主な違いは、それらがWebページのレイアウトにどのように影響するかです。 Div要素は新しい線を作成し、利用可能な全幅を取り上げますが、Span Elementsは新しい線を作成せず、必要なだけ幅を占有します。

Webサイトのパフォーマンスを改善するにはどうすればよいですか？

ウェブサイトのパフォーマンスを改善する方法はいくつかあります。最も効果的な方法の1つは、画像を最適化することです。大規模で高解像度の画像はサイトを遅くする可能性があるため、サイズを変更、圧縮、最適化することが重要です。別の方法は、ファイルのサイズを縮小してサイトをスピードアップできるCSSおよびJavaScriptファイルをマイニングすることです。コンテンツ配信ネットワーク（CDN）を使用して、世界中のユーザーによりコンテンツをより迅速に配信することもできます。ユーザーエクスペリエンスに大きな影響を与えます。ウェブサイトの負荷が遅いことは、ユーザーを苛立たせ、より高い反発率につながる可能性があります。一方、高速負荷のWebサイトは、ユーザーの満足度を向上させ、エンゲージメントを向上させ、潜在的により高い変換率につながる可能性があります。したがって、ウェブサイトのパフォーマンスを最適化して可能な限り最高のユーザーエクスペリエンスを提供することが重要です。ウェブサイトのパフォーマンスに大きく影響します。たとえば、不必要なタグ、テーブルの過度の使用、およびフォームの不適切な使用は、ウェブサイトを遅くする可能性があります。一方、クリーンでよく構造化されたHTMLは、ウェブサイトの読み込み速度と全体的なパフォーマンスを向上させることができます。バックグラウンドでリソースをロードするためにプリロードし、サーバープッシュを実装して単一のクライアント要求に複数の応答を送信し、サービスワーカーを使用してリソースをキャッシュしてキャッシュから直接提供します。これらの手法はあなたのウェブサイトのパフォーマンスを大幅に改善することができますが、ウェブテクノロジーと慎重な実装を深く理解する必要があります。 GoogleのPageSpeed Insights、GTMetrix、WebPagetestなど、ウェブサイトのパフォーマンスを測定します。これらのツールは、ウェブサイトの読み込み速度、リソースの使用、その他のパフォーマンスメトリックに関する詳細な洞察を提供できます。また、ウェブサイトのパフォーマンスを改善する方法に関する推奨事項を提供することもできます。

WebサイトのパフォーマンスにおけるJavaScriptの役割は何ですか？ Webサイトの機能とインタラクティブを強化することはできますが、書かれていない、または過度のJavaScriptがWebサイトを遅くすることができます。したがって、効率的なJavaScriptを作成し、その使用を最小限に抑え、Webサイトのパフォーマンスを改善するためにJavaScriptファイルを延期または非同期にロードすることが重要です。

CSSはWebサイトのパフォーマンスにどのように影響しますか？

CSSは、いくつかの方法でWebサイトのパフォーマンスに影響します。大規模で複雑なCSSファイルはウェブサイトを遅くすることができるため、CSSを清潔でよく組織化することが重要です。また、パフォーマンスの問題を引き起こす可能性があるため、過剰なCSSアニメーションの使用を避ける必要があります。さらに、CSSスプライトを使用して複数の画像を1つに組み合わせて、HTTPリクエストの数を減らし、ウェブサイトの読み込み速度を改善する必要があります。 >サーバーの応答時間は、サーバーがブラウザからの要求に応答するのにかかる時間です。サーバーの応答時間が遅いと、ウェブサイトが大幅に遅くなる可能性がありますが、サーバーの応答時間が速いと、ウェブサイトの読み込み速度が向上します。したがって、信頼できるホスティングプロバイダーを選択し、サーバー構成を最適化してサーバーの応答時間を改善することが重要です。ますます多くのユーザーがスマートフォンやタブレットでWebを閲覧しているため、重要です。レスポンシブデザインを使用し、モバイルの画像を最適化し、重いJavaScriptとCSSの使用を減らし、モバイルに優しいナビゲーションを実装することにより、モバイルデバイス用のWebサイトを最適化できます。また、さまざまなモバイルデバイスでWebサイトをテストして、すべてのモバイルデバイスを確認する必要があります。

以上がWebパフォーマンスのトリック - 基本を超えての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。