今日、いくつかの決定で大切な価値を達成することがほとんど不可能であるか、非常に高価になる理由をお話したいと思います。 ページ速度のヒントをいくつか見て、それらについてお話します。
最新の画像形式を使用する
このヒントでは、「 JPEG 2000、JPEG XR、およびWebP画像はより効率的な圧縮を使用するため、PNGおよびJPEG画像よりも読み込みが速く、トラフィックも少なくなります。 」 私の意見では、このアドバイスは、いくつかの理由で満たすのが最も難しいです。
JPEG 2000、JPEG XR、およびWebPのブラウザーサポート
検証のために、ブラウザを使用して形式をサポートする方法を見つけるためにcaniuseを使用します。 このサイトでは、JPEG 2000がサファリ（Windowsバージョンを除く）、JPEG XR for IEでのみサポートされていることを学びます。 WebPは良くなっていますが、誰がサポートしていないのでしょうか？！）そうです！ サファリ したがって、普遍的な形式は存在しないことがわかり、自宅で使用したい場合は、少なくとも2つの形式を読み込む必要があります。 これは少なくとも時間であり、最大でバナーを作成するデザイナーに支払います。
CMSサポート
もちろん、デザイナーに500ルーブルを支払うことはそれほど大きな問題ではありませんが、CMSを扱うのはそれほど簡単な作業ではありません。 現時点では、3つのCMS（Wordpress、Bitrix、Joomla）のサポートを確認できました。 すぐに使用できるものはどれも、リストされている形式のいずれもサポートしていません。 Wordpressにはwebpを実行するというプラグインがいくつかありますが、実際にはこのための単一の無料プラグインはありません。 さらに、これらの場合でも、記事の本文へのwebpのロードに失敗し、投稿を保存すると、サポートされていない形式のファイルへのリンクが削除されます。 Bitrixでは、そのようなモジュールすらありません。 あなたはワードプレスのためのもの、ビトリクスのためのものを自分で書く必要があります。 これらは、十分な知識と十分な時間を必要とする単純な改善ではありません。
効果的な画像エンコーディングを設定する
ヒント：「 最適化された画像の読み込みが速くなり、モバイルデータの消費が少なくなります 。」 これは非常に良いアドバイスですが、実際には、「maskalka」でGoogleサイトヘルプにリンクがあるWinsite Image Optimizerプラグイン（ imageoptimへのリンク）を使用してワードプレスで画像を検索しても、常に「大きな」画像を誓います。 com ）その後、彼の不満はすべて同じままです。
まだ何をすべきか？ 「Photoshopステージ」でファイルを最低品質で保存し、「名前を付けて保存」するのではなく、インポートすることをお勧めします。 サイズの違いは非常に大きいです。
ディスプレイブロックリソースを排除する
ヒント ：「 ページコンテンツのロードを妨げるリソースがあります。最初に必要なJS / CSSリソースのロードを構成し、他のリソースのロードを延期することをお勧めします。 」
「何を、どこで、いつ」知っている場合、自作のサイトで作業する場合、このアドバイスは非常に簡単です。 しかし、CMSおよびプラグインとモジュールの使用に関しては、これを行うのは困難です。 たとえば、Wordpressでは、使用するプラグインにすべてが依存します。 この問題を解決するには、プラグインのコードを掘り下げて、プラグインがスクリプト（およびjqueryから起動）に接続する方法を見つける必要があります。 次に、 wp_deregister_scriptを使用して、プラグインからスクリプトの接続を削除し、必要な場所に適切な場所にロードします。
別の方法は、スクリプトやスタイルを1つのファイルに圧縮することです。 この方法は実際にページ速度に多くのポイントを与えますが、実際にはコンテンツのレンダリングを遅くする可能性があり、javascriptの一部は機能しません。
この方法を試したところ、ページ速度が「入力のおよその遅延時間」パラメーターの低下を示すことがわかりました。おおまかに言って、モバイルのサイトはスローダウンし始めます。 また、ファイルを圧縮（1つのファイルにマージ/ 1つのファイルにマージして縮小）するほど、これらのパラメーターは悪化します。 つまり、スマートフォンはそれを読み取って実行するために緊張する必要があります。
サーバーの応答時間を短縮する
簡単なように思えますが、アドバイスですが、ウェブプログラマーに常に依存しているわけではありません。 サイトのプロファイラーを調べて、速度が低下するコードを見つけます。 同じファイルで同じコードが複数回呼び出されることがあります。 実行結果を変数に書き込み、必要に応じて使用します。 キャッシングを使用します。 私はmemchedを使用しようとします。プロジェクトに応じて、ホスティング業者に月額30〜120ルーブルを支払うからです。 これはあなたの役に立つと思います。
隠し画像の読み込みを延期する
テストの推奨事項「 対話の開始までの時間を短縮するために、すべての重要なリソースが読み込まれた後、非表示の画像に対して遅延読み込みの原則を使用することをお勧めします。」
これを行うことは非常に簡単であり、これを行う方法はインターネット上に多くの例があると思います。 たとえば、 CSS-tricksに関する良い記事があります。 彼のコードが機能するための主なことは、画像の属性を変更することです。 とても簡単です。 遅延ロードは適切ですが、javascriptファイルは+1です。
記事の冒頭で、私はかなり矛盾したアドバイスについて話し、最後には効果的なアドバイスに目を向けました。 はい、もちろんコードの最適化は良いですが、ウェブサイトの所有者は利益を考えており、これらの変換はSEOを通じて利益の増加につながると考えています。
ウェブサイトのコードの最適化はプロモーションの最初のステップに過ぎず、検索エンジンのプロモーション自体は、製品に対する需要が形成されているサイトに対してのみ有効であることを理解する必要があります。
PS
妄想しないでください。SEOでのWebサイトプロモーションの需要が形成されている必要があることを知って、顧客のニーズを満たせば、サイトがトップになります。