WordPressは単純なブログプラットフォームとして始まったが、現在のコンテンツ管理システムに進化し、現在は広い割合のウェブサイトに電力を供給する。最も人気のあるCMSとして、その急速な成功はWeb開発の世界では素晴らしい汎用ツールである可能性があります。
プラグインのエントリーと大規模な生態系のための低い障壁と 無料のWordPressテーマ 技術的に熟練したユーザーが複雑なシステムを構築することを許可します。しかし、WordPressのWebサイトが牽引力を獲得し、時折の訪問者を超えて問題を引き起こす場合、これは両刃の刀である可能性があります。
WordPressについてはわからない?ロードのリストの他のタイプのユーザーもありません ウェブホスティング プロバイダ。そして簡単にサイトをデザインしたい場合は、これらの素晴らしい試してみてください ウェブサイトのビルダー 。
新しいユーザーがWebサイト上に着陸すると、最初のトラブルの兆候が表示されます。ロードタイムは困難であり、エレメントは1つずつ別々のスタイルシートの負荷としてページの周りをジャンプします。サーバーがメモリを使い果たす前に長くはありません。データベースがクラッシュし、Webサイトのバックアップを行うためのサーバーの再起動が必要です。
デフォルトでは、ユーザーがWordPressのWebサイトによって提供されるページに着陸すると、バックエンドはテーマと任意のプラグインを実行してページをレンダリングする前に実行されます。たくさんのプラグインが使用されているかテーマが不十分な場合、これは長いデータベースクエリと、必要ではないJavaScriptとCSSを含めることができます。
ありがたいことに、スロースピードを引き起こす主な問題の多くを対処することができ、そしてこのチュートリアルでは私たちは最も愚かなものでさえ最適化することができる方法を調べます。 WordPress Webサイト 。あなたのスキルをさらに高めるために、私たちの切り札を見てください WordPressチュートリアル 試すために。
ウェブサイトを高速化する最初のステップは、それが始まるのかをどの程度うまく実行しているかを見つけることです。 GoogleのPageSpeed InsightsとPingdomのページロードチェッカーを含む、これを助けるためのツールの配列が存在します。私たちは使うでしょう gtmetrix それがいくつかのチェックを組み合わせるにつれて。サイトに移動してWebサイトのURLを入力します。
短時間の遅延後、GTMetrixはチェックの結果を表示し、A-Fからいくつかのスコアを与えます。それはまた、完全にロードされた時間と合計ページサイズを与えます。この下に、いくつかの要素の内訳が与えられます。
最も重要なメトリックの1つは総ページサイズです。これは、画像、ビデオ、CSS、およびページに含まれている任意のスクリプトなど、ページ上のすべてのロードされた要素のファイルサイズです。 gtmetrixを使用して、ウォーターフォールタブを開き、ページ上の最大の要素を見つけるためにテーブルをサイズで並べ替えます。
画像とビデオは通常、ページ上の最大のアイテムです。不要なバックグラウンドビデオを排除し、自動的に再生されている場合は、ビットレートの低いビットレートでビデオをエンコードしてください。プラグインをインストールしてください EWWW Image Optimizer 。メディアライブラリから、新しいBulk Optimizeオプションが利用可能です。これを実行してください。
あなたが貯蔵するために多くのメディアを持っているならば、それは安全にこれらの素晴らしい隠しています クラウドストレージ オプション。
ページに追加された画像は高解像度にあり、次にCSSで縮小されます。大きいサイズが使用されていないため、この帯域幅は浪費されます。ダッシュボード&gtに行きます。設定> EWWW Image OptimiserとSelectサイズ変更を選択します。 「検出のサイズ変更」をクリックしてください。さて、管理者によって見られるページは、サイズ変更する必要がある画像を強調表示します。画像エディタ内のこれらの画像のサイズ変更または自動サイジングでCDNを使用すると、この問題が解決されます。
これは、ページのサイズを縮小するために人間が読めるようにするコード内の文字を削除するプロセスです。サードパーティのテーマを使用するときは、などのプラグイン 自動追加化 これに最適です。インストールし、設定&gtに進みます。自動対応> [CSSオプション]をクリックして[CSSコードの最適化]をクリックします。カスタムメイドされたテーマを使用して作業するときは、GULPなどのビルドツールを使用して削減されます。
CSS:
a {
-webkit-box-shadow:なし
テキスト装飾:なし。
}
熟成
a {-webkit-box-shadow:なし;テキスト装飾:なし;
サードパーティのテーマを使用する場合、Autoptimiseプラグインは「集約CSSファイル」オプションを有効にすることで、ほとんどのシナリオをカバーできます。これは、各ページのすべてのCSSを、多くの小さいものではなく単一のファイルにまとめます。
ライブチャット、分析、追跡ツールは、ページが対話型になるまで秒を追加する大きなJavaScriptファイルをバンドルできます。 DOMがロードを終了するまで実行されないように、これらのスクリプトにDEFER属性を追加します。
scrc = "path-to-file.js" defer>&script>
プラグインが多すぎると、WordPressが不要です。非常に多くのプラグインが解放されているため、開発者は自分のソフトウェアのプレミアムバージョンをプッシュし、管理者ダッシュボードへの通知を押すなどの不要な肥満の機能を含みます。使用されていないプラグインを無効化して削除します。必要に応じて後で、後でインストールできます。
Webサイトのエンジンはそれが実行されるサーバーです。その安価で、影響を受けた、そしてひどく維持されているならば、それは不十分でした。 go Google Pagespeed Insights. そしてウェブサイトのURLを入力してください。結果で、「サーバーの応答時間を短くする」を探します。これがレポートに表示されている場合は、スローサーバーがパフォーマンスのせいにしている可能性があります。
GZIPは、ユーザーに送信される前にWebサイトのサイズを減らすことができます。その後、ユーザーのWebブラウザはデータを自動的に解凍して表示します。欠点がないと、gzipが有効になっていることを確認することが重要です。 GZIPが有効かどうかを確認するためのいくつかのツールがあります。お試しください ギフト 。
WordPressダッシュボード内でオープンツール&gt。サイトの正常性と[情報]タブをクリックします。 「サーバー」アコーディオンを開き、PHPバージョンの値を確認してください。これが7.x.x以下の場合、少なくともPHP 7.1にアップグレードすることを強くお勧めします。テストは、シミュレートされた訪問者の2倍の順序を介してこの許可された処理を変更します。
プラグイン&GTにアクセスしてください。新しいプラグインを追加し、 "Cache Enabler"を検索します。このLightweight Pluginは、WebサイトがPageを2回のレンダリングさせないように、キャッシュ内のページをキャッシュに保存します。代わりに、プラグインはページを静的HTMLファイルに1回処理してから、このファイルを後続のユーザーに処理します。
さまざまなデバイスが画像を異なるサイズでレンダリングし、表示されているとおりに画像を大きくすることを困難にします。含まれている無料の「フォトン」サービスを使用する ジェットパック 、画像は右サイズで自動的に処理されます。
ブラウザキャッシュは、Webサイト上のページをリロードするたびに特定の要素を再ダウンロードする必要がないか、再度訪問するたびに、特定の要素を再ダウンロードする必要がないことをユーザーのブラウザに指示します。これは、.htaccessで手動で実行できます。あるいは、「レバレッジブラウザキャッシュ」などのプラグインを使用できます。
ウェブサイトを使用して本物のユーザーをシミュレートし、Webサイトをストレスの下に置くためには、負荷テストを実施する必要があります。負荷の影響を与えるためにサーバーを監視している間、次のようなサービスを使用してください。 ローダ トラフィックをWebサイトに送信する。サーバーのCPUとメモリは安全な制限内に留まる必要があります。
最適化が実行されたら、あなたはテストしてウェブサイトへの改善を測定する必要があります。 gtmetrixをもう一度実行して、履歴タブを使用してページロード時間の違いを確認します。キャッシュが有効になっている場合は、テストを実行する前にキャッシュを「プライム」するために少なくとも一度Webサイトにアクセスしてください。
この記事はもともとCreative Web Design Magazineの第292号に掲載されました ウェブデザイナー 。 問題292を購入する 。
GenerateJSのJavaScript Superstarsのラインナップを見るために2020年4月に参加してください - あなたがより良いJavaScriptを構築するための会議。今すぐ予約 GenerateConf.com
関連記事:
肖像画の写真はバランスをとる行為です - 心を念頭に置いていることがたくさんあります。あなたの主題と通信し、彼らが安心して感じるこ�..
(イメージクレジット:グレンサザン) Zbrushの退職地、またはモデルを一般的に再検�..
否定的な絵は絵を描くことを指します 負の宇宙 それは正の形を定義します。これは伝統的な水彩画で特に重要です。そのため、オ..
Adobeは今日の新しいシリーズのチュートリアルを起動しています。これは、さまざまなデザインプロジェクトを作成する方法を概説します。 ..