ページの高速読み込みは、検索エンジンのランキング、ウェブサイトのコンバージョン率、全体的なユーザーエクスペリエンスを向上させるために非常に重要です。 Web サイトのページの読み込み速度も、Web サイトのパフォーマンスを測定する際の重要な要素です。
ウェブサイトが最高のパフォーマンスで実行されていない場合、読み込みが遅いため、ランキングや検索トラフィックが低くなり、コストが高くなります。ページの読み込み速度は、ユーザーの行動とコンバージョン率に大きな影響を与える可能性があります。
それで？読み込み速度を最適化する簡単な方法は何ですか?
1.画像の最適化
まず、ウェブサイトを少しでも高速化する可能性を得るために、ウェブサイト上の画像を最適化する必要があります。元の画像から余分な注釈、不要なスペース、無駄な色を削除し、画像を JPEG 形式で保存すると、占有容量が少なくても高品質が保証されます。
WordPress ウェブサイトの場合は、smush.it プラグインを使用してウェブサイトの画像を自動的に最適化することをお勧めします。画像が PNG 形式の場合は、tinypng を使用して画像を最適化し、画質を向上させることができます。
2. GZip圧縮をオンにする
GZip圧縮は複雑に聞こえますが、実際には非常に単純で、HTTPリクエストのサイズを削減して応答時間を短縮するために使用されます。これにより、HTML ファイルの代わりに GZip 圧縮ファイルをブラウザに送信できるため、ページの待機時間と読み込み時間が短縮されます。 Apache サーバーの場合、次のコードを .htaccess ファイルに追加して、GZip 圧縮を有効にすることができます。
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
ログイン後にコピー
上記のコードで GZip 圧縮が有効にならない場合は、それを削除して次のコードを使用します:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>
ログイン後にコピー
または、HTML/PHP ファイルの先頭に次の PHP コードを追加します:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>ログイン後にコピー
3. サーバーの応答時間
たとえウェブサイトが非常に最適化されていたとしても、サーバーの応答時間がよほど速くなければ、あまり効果はありません。 Web サイトの速度を向上させる場合、サーバーの応答時間が重要な役割を果たします。サーバーの応答時間を改善するための提案をいくつか示します。
共有/ホスト型サーバーを選択する代わりに、専用サーバーを使用します。
Webサーバーの品質を向上させます。
不要なプラグインを削除します。必要なプラグインのみを常に有効にしておく必要があります。
4. ブラウザキャッシュ
ブラウザにはキャッシュ機能があり、指定したファイルを保存し、HTTPリクエストを削減し、Webサイトの読み込み速度を向上させることができます。 .htaccess ファイルのexpiresヘッダーを設定することでブラウザのキャッシュを有効にできます。これを実現するには、次のコードを使用します:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
ログイン後にコピー
注: 有効期限がファイルにリンクされており、ファイル内のコンテンツを変更する必要がある場合。このとき、ブラウザが新しく追加されたコードを取得できるように、最初にファイルの名前を変更する必要があります。
5. 長い接続（Keep-Alive）をオンにする
Keep-Aliveヘッダーは、ブラウザとサーバー間の分散リクエストのレイテンシーを短縮するために非常に重要です。ユーザーがブラウザーを通じて Web ページをリクエストすると、ブラウザーはサーバーから送信された特定の HTML ファイルを読み取り、リクエストされたページに外部 CSS および JavaScript ファイルが含まれている場合、ブラウザーはこれらのファイルを取得するために別のリクエストを再度送信します。ご想像のとおり、これによりページの読み込み時間が増加します。
Keep-Alive ヘッダーを使用すると、ブラウザがこのページに関連するすべてのリソースをサーバーから取得するまで接続を維持できます。この機能を有効にするには、.htaccess ファイルに次のコードを追加します:
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
ログイン後にコピー
6. CDN を使用します
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
7、压缩CSS、JavaScript和HTML文件
通过删除所有不必要的空格和注释，从而减小文件大小，提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具，非常有用。
CSS Minifier
Avivo
HTML Compressor
8、避免重定向
重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家，却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间，降低加载速度。
9、指定字符集
指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ログイン後にコピー
10、避免错误请求
当用户在网站上搜索时，收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此，建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接，清除它们，改善用户体验。
11、丢弃跟踪代码、嵌入视频的元素和分享按钮
很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验，实际上这只会给网站增加更多的服务请求。例如，一个iframe会请求一个新页面，这会自动降低网站的加载速度。所以，丢弃这些跟踪代码，可以提高网站加载速度，提升用户体验。
12、异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中，脚本是在后台下载的，不会影响浏览器对页面的渲染和加载。
<script async src="http://www.yoursite.com/script.js"></script>
ログイン後にコピー
13、样式表置顶，脚本置底
将样式表放在顶部有利于页面迅速加载，因为这样可以使得页面慢慢呈现。一般来说，在同一时间，大部分浏览器支持并行下载两个组件（图像、样式和脚本）。但是通常而言，脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。
14、JavaScript的延迟解析
为了加载网页，浏览器必须解析所有的标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。
15. JavaScript と CSS のブロックを避ける
ブラウザが Web ページをレンダリングする前に、まず HTML マークアップ言語を解析して DOM ツリーを構築する必要があります。このプロセス中にスクリプトが見つかった場合、プロセスは中止され、元のアクティビティを続行する前にスクリプトが実行されます。したがって、JavaScript、特に外部スクリプトのブロックを避けることをお勧めします。
JavaScript をブロックすると、ウェブサイトの遅延が発生する可能性もあります。したがって、重要でない JavaScript のロードを延期するか、非同期でロードすることもできます。もう 1 つのオプションは、これらの HTML コードを Web サイトに埋め込み、CSS が最適化されていることを確認することです。
16. コードを最適化する: インライン CSS を使用しないでください
インライン スタイルでは、コンテンツとデザインを明確に分離できません。同時に、多くのメンテナンス作業が必要となり、Web サイト管理者にさまざまな不便をもたらし、Web ページのサイズがさらに大きくなる可能性があります。
17. ファイルの分離
WebサイトのファイルはCSS、JavaScript、画像に分けることができます。ファイルを分離しても、Web サイトの読み込み時間は直接改善されません。ただし、そうすることで、特に Web サイトのトラフィックが突然急増した場合に、サーバーの安定性が向上します。サブドメインはファイルのホストにも使用できるため、並列ダウンロードの数が増加します。
18. HTTPリクエストを可能な限り減らす
Webページの速度を最適化するもう1つの簡単な方法は、HTTPリクエストを減らすことです。 Web サイトが一度に大量の HTTP リクエストを受信すると、訪問者は応答時間が遅くなり、CPU 使用率が増加するだけでなく、ページの読み込み時間も長くなります。では、HTTP リクエストを減らすにはどうすればよいでしょうか?以下の手順を参照してください:
Web サイト上のオブジェクトの数を減らします。
ウェブサイト上のリダイレクトの数を最小限に抑えます。
CSS スプライトテクノロジーを使用します (画像コンテンツの必要な部分のみ)。
JavaScript と CSS ファイルをマージします。
参考記事
ページ速度を改善する12の実用的な方法
Webサイトのページ速度を最適化する13+の方法
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
