モバイルユーザーの47%以上は、ウェブサイトの読み込み速度に悩まされています。管理者は、今後このような問題を解決していかなくてはならないでしょう。それには、レスポンシブを上げるだけでは効果は上がりません。サイトのランキング、サーバーのローディング削減、コンバージョンの効率化・・・これらのことを改善していく必要があります。
そこで、ウェブサイトに使えるレスポンシブを上げるためのテクニックを、10個ご紹介したいと思います。
1. HTTPのリクエスト数を減らす
HTTPは、モバイルデータの速度に大きく関与しています。CSSまたはHTMLのファイルが各要素(スクリプト、画像、スタイルシート、フラッシュなど)を読み込む際にリクエストが要求されます。その要素が多ければ多いほど、読み込む速度も長くなります。そこで、リンクを7個までにし、フォームや機能を追加する代わりに短いコピーを作成して時間を短縮してください。また、画像ではなくCSSを使用して多機能シートを活用するのもおすすめです。さらに、スクリプトを排除して下部に移動させることで、ユーザーを長時間待たせることなくコンテンツを表示させることが可能です。
2. ブラウザのキャッシュを利用する
ほとんどのブラウザにはストアのコピーが残っています。ユーザーのデバイスには、一番初めにサイトを閲覧した際のファイルが残されます。なので、翌日ないし一週間後に再度サイトにアクセスすると、ブラウザメモリにコンテンツがダウンロードされているため、より早くページが表示されます。これがブラウザのキャッシュと呼ばれるもので、間違いなくモバイルサイトのパフォーマンスに役立っています。研究では、この機能があるおかげサイトの読み込みスピードが2.4秒から0.9秒にまで縮むと言われています。
3. 不要なリソースを削除する
スタイルシートの作成には決まったフォーマットがありません。なかにはブラウザには関係のないコードも含まれます。そのため、デザインした後には必ずコードを短くする必要があります。そこでまずは、いらないコードを削除してください。次に、余白やラインの崩れている部分など、不要なスクリプトとファイルを削除します。その際に、cleanss.comという自動ツールを使用することも可能です。ページを表示するコード(JavascriptとHTML) やスタイルシート(CSSファイル)を整えることで、サイトのスピードはさらにアップします。
4. 画像を圧縮する
モバイルサイトのスピード改善には、画像の圧縮も必要不可欠です。JPEG、PNG、GIF画像は30〜40％まで縮小が可能です。サイトのスペースにあわせ、解像度が変わらない程度のリサイズが必要でしょう。WordPressを使用している場合は、プラグインを利用することも可能です。様々なファイルサイズで試す方が良いのはもちろんですが、解像度は落とさないように気をつけてください。
5. 全ての画像を最適化する
サイトの読み込みが遅い主な原因として、フルサイズの画像を使用していることも理由の1つです。2MB以上の画像はサーバーの容量を消費し、ユーザーのストレスを増加させてしまいます。そこで、画像を加工する際はフォーマット、サイズ、src属性の3つに配慮しましょう。適切なサイズに画像を切り取るのも効果的です。通常のディスプレイでは、1200×1200がおすすめです。また、TIFF、GIF、BMBよりはJPEGフォーマットの方が扱いやすいです。画像コンテンツは全て削除し、色味も落としてください。空の<img src =’….’>はサーバーに不要なトラフィックを招く原因となっているので、見つけた場合は削除してください。
6. サーバーのレスポンスタイムを減らす
モバイルサイトのスピードは、適切なコードがきちんと記述されているかどうかだけではなく、ブラウザがサイトからデータを受信する長さにも左右されます。これはメモリの空き容量からデータベースの問い合わせまで異なるからです。サーバーのレスポンスタイムを減らすために、200ミリ秒以内にデータを受信する必要があります。また、サーバーのソフトウェアを変更してウェブページのリソースを減らすことも可能です。最終的には、優秀なウェブホストに変更することが好ましいです。
7. リダイレクトを削除する
Googleでは、リダイレクトの数を減らすことが推奨されています。ユーザーがページを移動する際、たくさんの時間を要するので長い時間待つ必要があります。これではユーザーに不満が溜まり、サイトへの満足度も低くなってしまうでしょう。リダイレクトが発生することで、HTTPのリクエストが増えてサイトの読み込みが遅くなります。サイト内のリダイレクトは一つずつ解消しておきましょう。
8. gzipファイルのサイズを小さくする
gzipの圧縮は、通常の圧縮と大して変わりません。唯一の違いは、ウェブサイト用の圧縮だということです。圧縮を利用しているかどうか不明な場合は、ホスト先のプロバイダに問い合わせてみましょう。もし未使用であれば、cPanelというファイルタイプに変更するか.htaccessのファイルコードを追加しましょう。主な圧縮ファイルとしては、text/plain, text/html, text/javascript, text/xml, and text/cssなどが挙げられます。rss+xml, application/xml, application/javascript, application/xhtml+xml, and application x-javascript
といったアプリを使用してファイルを圧縮することも可能です。これでファイルサイズが縮小し、サイトのスピードも改善されます。
9. ウェブページの上部にはCSSを、下部にはJSを設置する
CSSとJavaScriptはサイトのパフォーマンスを大きく左右します。特に、JavaScriptはアニメーションやサイトのインタラクティブにとって重要です。JSを使用すれば、UI の改善も期待出来るでしょう。ですがここでは、モバイルユーザーにフォーカスしてコンテンツを考えなくてはなりません。なので、HTMLが読み込みを完了した後にJavaScriptが表示するようにしてください。CSS(Cascading Style Sheets)の場合は、フラッシュやスタイル化されていないコンテンツを表示させないためにも、それを上部に設置する必要があります。さもないと、スタイル情報が何もないコンテンツを読み込む可能性があります。この2点を改善すれば、サイトのスピードも劇的に改善されるでしょう。
10. ホストとSSDを追加する
SSD (Solid State Drives)を使用すれば、通常のHDDに比べて20倍の速度でパフォーマンスが向上します。さらに、SSDのサーバーはアクセスや待ち時間が短く、衝撃にも強いです。専門サーバーを使用することでサイトのスピードが改善され、より良いUIをユーザーに提供出来るでしょう。
モバイルサイトにとって、スピードというのはた重要な要素の1つです。これを改善することで、新規ユーザーを取り込むだけでなく、サイトの認知度アップにも繋がります。これらのテクニックを活用し、パフォーマンス向上にぜひ役立ててください。
おすすめ新着記事
おすすめタグ