近の調査結果によると、殆どのユーザは読込み時間が長いWEBサイトに対して表示が完了するまで待てない事が解っています。
とくに3～4秒以上かかるようだと、待てずに別のウェブサイトに移動してしまい、7割以上のユーザはその後、再訪問をしなくなってしまうそうです。
Googleの検索エンジンについても、ページの表示速度は検索結果順位を判断する上で重要なポイントとなっているので、このことからページの表示速度を見直すことはとても大事なことです。
あなたのウェブサイトの読込み速度を向上させたい場合、まず読込み時間が長くなってしまう原因を理解しておく必要があります。
読込み時間が長くなる要因としてまず挙げられるのが、サーバに送信されるHTTPリクエストを多く発行することです。
そして2つ目の要因は、ウェブサイト上に配置しているJavascriptやCSS、画像ファイルのサイズです。当然、大きい画像ファイルを表示する場合には、明らかにページの読込みにはかなりの時間がかかります。
つまり、あなたのウェブサイトを高速化するには、画面レイアウト、コーディング手法、画像の解像度を最適化するほか、下記で紹介する細かなテクニックを加えてあげることです。
ページの表示スピードがなぜ遅いのかを調査する
まず、ページの表示が遅くなっている原因を解析することです。
どのように解析するは、Googleの「PageSpeed Insights」で行うことができます。これ以外ではYahooの「YSlow」もウェブサイトのパフォーマンス計測をするための優れたツールです。
どちらのツールもFirefoxやChromeなどのブラウザの拡張機能が提供されているので、いつでも気軽に使うことができます。
画像を圧縮する
大きな画像ファイルは、ウェブサイトの表示速度を下げてしまう主要な要因です。ウェブサイト上に配置する画像は、用途毎に的確に圧縮をすることが重要です。PhotoshopやFireworksでJpegを書き出す際の品質レベルを適切に行うということです。
画像をリサイズする
画像の圧縮と併せて、画像サイズをページに合わせてリサイズすることも重要です。同じくPhotoshopやFireworksで書出し際に、HTMLソースに合わせてしっかりピクセルサイズを合わせましょう。
ブラウザのキャッシュ機能を有効にする
ブラウザのキャッシュ機能を利用して、サーバ負荷を軽減することでレスポンス時間を短縮しましょう。
.htaccessファイルに次のコードを追加することで実現できます。
1 2 3 4 5 6 7 8 9 10 11 | # BEGIN Expire headers ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType text/html "access plus 2592000 seconds" # END Expire headers |
ファイルタイプ毎にキャッシュ時間を指定することで、ブラウザ側で強制的にリロードしない限りキャッシュデータが利用されることになります。
CSSスプライトを利用する
CSSスプライトは、ページ上に配置された複数の画像ファイルを1ファイルにまとめることができるので、サーバーに発行するHTTPリクエスト数を削減できるという利点があります。
そして「SpriteMe」は、既存サイトをCSSスプライトに対応することができる便利なツールです。FirefoxやChromeなどブラウザの拡張機能も提供されているので活用しましょう。
JavaScriptの読込みを後回しにする
JavaScriptの読込みを行っている間は、HTMLの読込みがストップしてしまうため、ページの表示速度が遅くなってしまいます。これを解消するにはHTMLのレンダリングの後にJavaScriptを読込むことが望ましいです。
具体的には、下記のようにdefer属性を指定することで解決します。
HTML、JavaScriptとCSSを圧縮する
ページの表示速度をアップさせる手法として、HTML、JavaScript、CSSを圧縮することも挙げられます。
例えば、あなたのウェブサイトがWordPressで作られているなら「WP Minify」のような専用のプラグインがありますし、オンラインツールもたくさん揃っています。
Content Delivery Network（CDN）を利用する
CDNは、ウェブサーバのタイムラグを解消するための優れた技術です。
ファイルサイズの大きいコンテンツをネットワーク上の様々な場所に分散させることができるので、ウェブサーバに多くのアクセスがあった場合でも負荷を抑えることができます。
JavaScriptとCSSを1ファイルにまとめる
JavaScript、CSSの複数の外部ファイルを読込んでいる場合、ウェブサイトは非常に遅くなります。
可能であれば、1つのファイルにまとめて下さい。それだけでウェブサイトの表示速度は向上します。
Googleのウェブマスター向けガイドラインに準拠する
ウェブサイトやスマートフォン向けのアプリを開発しているなら、Googleのウェブマスター向けガイドラインは目を通しておくことをお勧めします。
ガイドラインは絶えず変化していますが、基本的なポイントは常に認識しておく必要があります。これはウェブサイトの高速化を考慮する上でも重要なことです。
以上で紹介させていただいた手法が全てではありませんが、殆どのウェブサイトにおいて表示の速度アップができる重要な施策です。
読み込み時間が短いウェブサイトは、確実にユーザのストレスが軽減されて訪問されやすくなりますし、検索エンジンのランキングも大幅に改善されます。
あなたのウェブサイトの表示が遅いと感じているなら、以上の施策を行ってみては如何でしょうか。
ไม่มีความคิดเห็น:
แสดงความคิดเห็น