ここでは、見逃せないウェブサイトの速度向上テクニックをいくつか紹介します。
ウェブサイトが 3 秒 以内に読み込まれない場合、潜在的な収益を失い、検索エンジンの上位ランキングを逃す可能性があります。同様に、十分な安全性がなければ、ハッカーがあなたの Web サイトを追い詰めて評判やビジネス上の損失を狙う機会を与えることになります。
したがって、より良く安全なユーザー エクスペリエンスを実現するために、セキュリティとパフォーマンスの調整から逃れることはできません。
そのため、パフォーマンスの最適化について話すとき、圧縮の有効化、ファイルの縮小、キャッシュ、軽量テーマの使用、最小限のプラグインの維持などのことを耳にします。
それらは問題ありませんが、この記事でリストしたものは他にもたくさんあり、WordPress、Joomla、Magento、Drupal、Node.js などのあらゆるプラットフォームに適用できます。
すでに持っているものとそうでないものを見てみましょう。
優れたホスティングパッケージ
場合によっては、不適切な Web ホストと共有ホスティング プランを選択することが唯一の間違いとなることがあります。
しかし個人的には、悪いホストの話ではないと思います。主に超格安のホスティング サブスクリプションに関するものです。
毎月のホスティング料金がコーヒー 1 杯未満の場合は、何か問題があります。
共有ホスティングは、誰も乗りたがらないが、「魅力的な」運賃のために忍び寄る超満員バスのようなものだと仮定してください。
共有ホスティングで最も有利なのは、初回割引と、単一サーバーを共有する Web サイトの数に関する比類のない不透明性です。
これをお話しします。その数は通常数百単位です。
これにより、ノイジーネイバーによるパフォーマンスのボトルネックが頻繁に発生し、そのような Web サイトの大部分は Google 検索の最初のページに表示されるほど生きていません。
最終的には、重要なプロジェクトについては VPS または専用サーバーに切り替えます。
コンテンツ配信ネットワーク
CDN (コンテンツ配信ネットワークの略) は、優れた Web ホスティング パッケージを選択した後に 2 番目にあります。
これは世界中の聴衆を持つ人にとって必要です。その理由は、どこでも Web サイトをホストできるわけではないからです。単一の場所に配置されたままになります。したがって、日本のユーザーが米国ニューヨーク市にホストされている Web サイトにアクセスしようとしている場合、距離はネタバレになります。
ただし、Cloudflare のような CDN に登録すると、このローカリゼーションの問題は解決されます。 CDN は、Web サイトのコピーをサーバー ネットワーク上でホストし、最も近いサーバーからのリクエストを処理します。これにより、海を隔てて配置されている単一の中央サーバーの負荷が軽減されます。
さらに、CDN に基づいて、通常の Web ホストが提供できるものよりも高いセキュリティを享受できる場合があります。
IPv6を有効にする
IPv6 は IPv4 よりも高速です。 IPv6 経由でアクセスすることで、 LinkedIn は ヨーロッパで 40%、 Facebook では 約 10 ～ 15% の改善が見られました。
Google による世界的な IPv6 採用グラフをご覧ください。
ユーザーの約 42% が IPv6 経由で Google に接続していますが、 IPv6 対応の Web サイトは 21.2% のみです。
興味深いことに、Cloudflare は、IPv6 対応 Web ページの読み込みが IPv4 対応 Web ページより 27% 高速で あることを発見しました。
では、あなたの Web サイトは IPv6 に対応していますか?わからない！オンラインでテストできます。
そうでない場合は、次の方法でそれを行うことができます。
Cloudflare、Incapsula、CacheFly、AKAMAI などのほとんどの CDN プロバイダーは IPv6 を提供しています。コントロール パネルを確認して有効にすることができます。
CDN を使用せず、Linode、DigitalOcean などの VPS でホスティングしている場合は、これを参照して Nginx および Apache Web サーバーで IPv6 を許可してください。
IPv6 を使用しても何も害はなく、ページの読み込み時間が約 10% 短縮されるという 簡単な効果 を得るには楽しいでしょう。
HTTP/3 または HTTP/2 を選択してください
HTTP は、Web ブラウザで URL にアクセスしたときに Web ページを読み込むために使用される進化するテクノロジーです。
すべては 1991 年の HTTP/0.9 から始まり、HTTP/2 や現在最も優れている HTTP/3 などのアップデートが続きました。
HTTP/2 は、HTTP/1.1 に比べて次のような多くの利点をもたらしました。
- サーバープッシュ
- 多重化
- リソースの優先順位付け
- ヘッダー圧縮
- 低遅延
現在、Web サイトの 39.3% で使用されており、HTTP/1.1 よりも 7 倍高速 です。 HTTP/2 に切り替えると、 ページの読み込み時間が最大 30 ～ 40% 短縮される ことが期待できます。
ただし、HTTP/2 には独自の問題があります。
たとえば、先頭のブロックに悩まされます。ここで、TCP 接続に問題があると、すべてのストリームがブロックされる可能性があります。しかし、UDP ベースの HTTP/3 では、単一のパケット損失が他のすべてのストリームに影響を与えることはありません。
さらに、HTTP/3 では、再接続時の TLS ハンドシェイクを回避することで、待ち時間を短縮できます。全体として、HTTP/3 は HTTP/2 のすべての利点を備えていますが、それに伴う抵抗はありません。
Web ホストで HTTP/3 または HTTP/2 のサポートを確認できます。あるいは、CDN プロバイダーが、優先 HTTP バージョンに簡単に切り替えることができる場合もあります。
画像の最適化
すべての Web ページに画像が避けられない部分となるテキストの壁を通過したい人はいません。一方で、Web ページに画像があると重くなり、ページの読み込み時間が大幅に長くなります。
そのため、このソリューションでは、WebP や AVIF などの比較的軽量な形式で画像を提供することが求められます。サイズが大幅に縮小されるだけでなく (場合によっては 80% 以上)、出力品質は基本的に変わりません。
これらの次世代形式で直接変換してアップロードできるようになりました。または、 Optimole などのサードパーティ変換サービスに登録して、これを即座に実行します。
過剰なHTTPリクエストを削減する
Web サイトは単一の部分として読み込まれることはありません。代わりに、テキスト、画像、CSS、JavaScript などのすべての要素が HTTP リクエストとして送信されます。
他のすべての条件が同じに保たれ、Web ページに「ノー」が少なくなります。の HTTP リクエストの方が、より多くの HTTP リクエストを含むリクエストよりも高速に読み込まれます。
結論的には、HTTP リクエストの数を可能な限り減らすことが最善です。
私の個人的な WordPress の経験から言えば、Generate Press のような軽量テーマを選択するのが効果的です。さらに、プラグインの数を減らすことも、高速で安全な Web サイトの構築に貢献します。
ただし、それ自体が特別な注意を必要とする主題です。
特に、WordPress Web サイトを使用している場合は、これをチェックして HTTP リクエストの数を減らします 。
Web セーフ フォントに切り替える
私たちは皆、自分のウェブサイトがユニークでユーザーフレンドリーであることを望んでいます。そして多くの人が最初にとるのは、別のフォントに切り替えることです。
幸いなことに、Google フォントなどの無料のオプションがいくつかあります。ただし、これにより複数の HTTP リクエストが追加されます。さらに悪いことに、サードパーティのフォント サーバーがオフラインになると、Web サイトはシステム フォントに戻ってしまいます。
これに対抗するために、一部のウェブマスターは自分のウェブサイト上でフォントを自己ホストし、自立に向けた動きを行っています。ただし、サーバーからユーザーのデバイスにロードする必要があるファイルが追加されます。これは追加の HTTP リクエストを意味し、たとえわずかであってもパフォーマンスの低下を伴います。
したがって、サーバー障害時にフォントが交換される危険を冒さずに、可能な限り高速なエクスペリエンスを得るために使用できる特定の Web セーフ フォントが存在します。これらのフォントはシステム フォントと呼ばれ、Windows PC、Mac、Linux システム、iOS、Android などで共通です。
Web セーフ フォントをいくつか紹介します。
- エリアル
- ヴェルダナ
- トレビュシェット-MS
- タホマ
- タイムズ ニュー ローマン
- ジョージア
- 衝撃など
キャッシュを活用する
キャッシュとは、データをローカルに保存することを意味します。これにより、再訪問時に Web サイトを可能な限り最速で読み込むことができます。また、読み込み時間を短縮するためにキャッシュを導入することが専門家によって推奨されることがよくあります。
たとえば、WordPress には WP Fastest Cache などの多くのキャッシュ プラグインがあります。あるいは、.htaccess ファイルを編集してブラウザ キャッシュを展開することもできます。
ただし、これはプラットフォームに基づいているため、これを実装するにはさまざまな方法が考えられます。
非同期ロード
これは、私の個人的な WordPress の経験から直接得られた別のページです。実際、何が起こったかというと、Google Search Console が、コア ウェブ バイタル テストに不合格だった私の 40 以上のブログ投稿について警告を発しました。
Core Web Vitals は Google のページ評価であり、Google の検索エンジンで上位にランク付けしようとするすべての人にとって重要です。
これをさらに理解するには、 の記事の 1 つでこの Pagespeed 分析を確認してください。
WordPress 開発者のおかげで、これらのテストに見事に合格しました。
しかし、私の個人的なプロジェクトでは、特に Largest Contentful Paint (LCP) と First Contentful Paint (FCP) で失敗していました。具体的にはLCPが3.3秒、FCPが2.4秒程度でした。
私は IT の背景がないブロガーなので、ある点を超えて最適化することができませんでした。私の規模では、プレミアム テーマ、追加のプラグインなし、システム フォント、WebP イメージ、クラウド ホスティングなど、適切なボックスにすべてチェックを入れていました。
役に立ったのは、Jetpack boost WordPress プラグインの 1 つの切り替えです。
簡単に言うと、
<script>
タグに
async
または
defer
属性を付けることで、サードパーティの Javascript を非同期的に読み込みます。こうすることで、ページの構築を妨げることなく、スクリプトがバックグラウンドで個別に読み込まれます。
私にとって、この 1 つの対策により、LCP と FCP はそれぞれ 1.7 秒と 1.2 秒に低下しました。
念のため、LCP 値と FCP 値を取得する前に、この 「必須ではない JavaScript を延期」 トグルに加えて、シングル投稿レイアウトからアイキャッチ画像も削除しました。
リダイレクトを最小限に抑える
Web サイトのパフォーマンスを最大限に高めるためには、リダイレクトがないことが理想的です。ただし、誰もがリンク リダイレクトを使用することがあります。
それでも、ルールは単純です。リダイレクトごとにページの読み込みに時間がかかります。リダイレクトを追加しすぎると、新しいリリースを入手するために人々が毎回行列するインターネットの Apple Store でない限り、ユーザーはより早くどこかに飛び去ってしまいます 😀。
動画は慎重に
ビデオはページの閲覧時間を短縮し、テキストの単調さを避けるのに役立ちます。これらはイメージよりも優れたアップグレードであり、多くの場合避けられません。
それを行う最も簡単な方法は、YouTube ビデオを埋め込むことです。ただし、 Google PageSpeed を使用して、YouTube 動画がある場合とない場合の 2 つの Web ページを比較して、これらの埋め込みが Web ページのパフォーマンスに与える影響を評価することができます。
例として、テスト Web サイトに 2 つの投稿を公開しました。 1 つは他に何もない (テキストや画像など) YouTube ビデオがあり、もう 1 つは何もありません。次に、Google Pagespeed でこれら 2 つを比較してみました。
合計ブロッキング時間、速度指数、FCP、LCP への影響がわかりますか?特に、合計ブロック時間が 1 秒増加しました。これは、ユーザーが競合製品に切り替えるのを促すのに十分です。
これらの結果を確認し、さらに詳しい情報を得るために、 Pingdom Website Speed Test ツール でこれら 2 つの URL を実行しました。
1 つの YouTube 動画に 23 個の余分な HTTP リクエストが追加され、ページ サイズと読み込み時間が増加し、全体的なパフォーマンス グレードが低下していることを確認できます。
ただし、この低下をカバーするパフォーマンスのコツがいくつかあります。まず、ビデオの非同期読み込みを選択できます。これは、総ブロック時間を短縮するのに役立ちます。
さらに、遅延ロードも可能です。特に、面倒な作業を行ってくれる YouTube 埋め込み WordPress プラグインが 数多くあります。
最後に、ビデオのサムネイルを埋め込むと、クリックされたときにのみビデオが読み込まれます。
HTML、JavaScript、CSS を縮小する
これは大海の一滴のように感じるかもしれませんが、縮小すると実際に物事が滑らかになります。
縮小化は、余分な空白、セミコロン、コメント、改行などを含む不要な要素をソース コードから削除し、すべてをコンパクトにします。
プラットフォームに応じて、これを行うか、ツールですべてを縮小する必要がある場合があります。ただし、縮小されたコードを変更するのは悪夢に近いため、標準バージョンのバックアップを保存しておくことが常に最善です。
それでも、マシンはそのコンパクトなコードをすべて問題なく読み取ることができ、わずかながらパフォーマンスが向上していることに気づくでしょう。
Web圧縮を使用する
Web 圧縮は zip に似ていますが、Web ファイルに対して機能してページの読み込み時間を短縮し、最新のブラウザでサポートされています。
簡単に言うと、他のすべてが同じであれば、圧縮が有効な Web サイトは、圧縮が有効になっていない Web サイトに比べて、コンポーネントをより速く提供します。この Web ベースの圧縮は HTML、JavaScript、CSS、画像などに作用し、場合によってはページ サイズを 70% 以上削減できます。
Gzip と Brotli の 2 つのオプションがあります。おそらく、Web ホストには 2 つのうちのいずれかが適用されます。
ただし、 圧縮をテストして、 Web サイトでどの圧縮が有効になっているかを確認することはできます。また、圧縮がない場合は、Web ホストに依頼するか、Web 開発者に圧縮を導入するよう依頼します。
外部要素
これを HTTP リクエスト セクションの拡張と呼ぶこともできますが、これについては別途説明する必要があります。
Web サイト上の外部要素には、広告、分析、プラグイン、フォーラムなどを含む (ただしこれらに限定されない)、ネイティブではないすべての要素が含まれます。
このような要素により Web サイトに余分なコードが追加され、HTTP リクエストなどが追加され、Web サイトが肥大化して使いにくくなります。
同意しますが、いくつかはどの Web サイトにも存在しており、同様に避けることはできません。それでも、この意味ではミニマリストであり、さまざまなサービスを試して、パフォーマンスへの影響が最も少ないサービスを選択してください。
より高速なウェブサイト!
ウェブサイトのパフォーマンスは、一度設定したら忘れてしまうことはありません。 World Wide Web は刻々と進化するため、常に最新の情報を入手し、最高の速度とセキュリティを実現するために迅速に適応することが最善です。
ただし、セキュリティは速度と同じくらい重要です。
WordPress の専門家である私たちは、WordPress のセキュリティに関する最良の実践方法についていくつか説明せずにはいられません。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
