不要なファイルの読み込みを停止し、WebサイトのHTTPリクエストを減らす方法–WordPressの最適化のヒント

Crunchifyでは、いつでも参照できる複数の速度最適化チュートリアルを公開しています。

コンテンツプロバイダーとしてMaxCDNを使用しています。 ほぼ4年が経ちましたが、これまでのところうまく機能しすぎています。 Genesis WordPressFrameworkとMaxCDNが最適な組み合わせです。 デフォルトでは、Genesis Frameworkには多くの最適化、Googleマークアップスキーマ、モバイルフレンドリーな構造などが付属しています。

先週、MaxCDNアカウントを調べていたところ、突然トップのダウンロードリソースに気づきました。 上の画像でわかるようtop 9 out of 10 resource files個が、先週、約5 millions回以上ダウンロードされました。

私は驚いて、本当にそれらのリソースが必要だと思いましたか？ これらのファイルを個別にロードする必要がありますか？ サイトをロードするために絶対に必要なstyle.cssファイルを除いて、必要でない場合にこれらのファイルを取り除く方法。

簡単なトリックでこれらの9つのファイルをすべて取り除く方法を始めましょう

ステップ1

list all of those 9 filesましょう。 2列目は、ダウンロードされた回数を示しています。

ステップ2

Crayon Syntax Highlighterプラグインファイルをグループ化しましょう。

3つのファイルがあります：

neon.css 、 crayon.min.css 、 crayon.min.js 。 これらのファイルを取り除くための合計7つの詳細な手順を含む完全な個別のチュートリアルを作成しました。 よろしくお願いします。問題が発生した場合はお知らせください。

ステップ-3

次に、 wp-embed-min.jsます。 WordPress4.4以降の自動埋め込みスクリプトを無効にする方法のチュートリアルをご覧ください。 フロントエンドで埋め込みファイルのロードを停止します。

ステップ-4

3 more .pngファイルを調べてみましょう。

bg-pattern.png

この画像をヘッダーとフッターの背景に読み込んでいました。 代わりにカラー#333を使用してそれを取り除きました。

crunchify-sprite.png

このスプライト画像を読み込んで、サイドバーにソーシャルフォローボタンを表示していました。 fontawesomeフォントに置き換えました。

h3.png

一部の場所でH3投稿のチェックマークを表示するために、これを読み込んでいました。 fontawesomeフォントに置き換えました。 以下はfontawesomeに相当するものです。

ステップ-5

これで、2つのファイルだけが残ります。 crunchify-logo.pngとbg.png 、私はそれを維持しようと思いました。 そのため、画像として呼び出す代わりに、それらのファイルに相当するbase64画像を追加しました。

前：

後：

両方の画像をbase64画像に変換しました。 別の接続を開いて画像のサーバーにHTTPリクエストを送信する必要がないという利点があります。

リクエストが少ない=ページの読み込み時間が短縮

SVG (Scalable Vector Graphic) imageを使用すると、網膜ディスプレイで見栄えのする鮮明さ（非常に小さい場合を除く）を失うことなく画像を任意のサイズに拡大縮小できるという利点があります。

これらのData URIsは、 .pngや画像だけでなく、あらゆるリソースに対応しています。 これは私がオンラインで使用した単純な.pngから.svgへのコンバーターツールです。

概要

このチュートリアルは、WordPressを高速化してパフォーマンスを向上させる方法のセクションの一部です。 あなたはそこにすべてのWordPress最適化のトリックとヒントを見つけるでしょう。

この手順を実行することで、10個のうち9個の不要なリソースをすべて削除しました。つまり、各ページのリクエストが9個少なくなるため、ページの読み込みが非常に速くなります。

サイトページの速度を向上させる他のヒントがあれば教えてください。 Crunchifyでは、速度が主な基準であり、それがプラグインの使用量が非常に少ない理由です。 すべてのページwithin half a second読み込まれます。