ユーザーをイライラさせないスマートフォンwebサイトを作るために

ページの表示速度高速化のためにポイントとなる画像

webページの表示速度を上げるためには、サーバーから送られてくるデータ量をなるべく削減する必要があります。画像はデータ量のなかでも多くを占める傾向にあるため、画像のデータ量の削減が重要になります。
まず画像は必要最低限の数にしましょう。そのうえで適切なフォーマットを各画像で選択することも重要です。適切なフォーマットでない場合には、データ量が大きくなってしまう可能性があります。写真素材は「jpeg」形式を、線画やイラスト系は「png」形式を選択するのが基本です。また、簡単な図形やアイコンなどはCSSで作成すると、データ量を削減できるうえに高解像度のデバイスでもぼやけることなくキレイに表示できます。
画像のデータ量を減らすための方法としては最適化・再圧縮もあります。画像のクオリティを維持しつつデータ量を削減できるツールがあるので、利用してみるといいでしょう。

そのほか様々な表示高速化のための施策

通常、人によって書かれたソースコードには改行や余分なスペース、コメントなどがあります。そのため、これらを取り除くことによってデータ量を削減できるのです。この方法はミニファイル処理と呼ばれています。また、一度サーバーから読み込んだデータをクライアント側で保存しておくキャッシュを利用すれば、二度目からはサーバーとやり取りするデータ量の削減が可能です。キャッシュは、サーバーの「.htaccess」と呼ばれるファイルに設定内容を記述することで利用できます。そのほか、JavaScriptファイルを読み込む必要がある場合は、ボディタグの閉じタグの直前に記述することで、ページの表示速度の向上につながります。

スマホサイト制作において大切なのは、どの機種のスマホからでも見やすい構成にすることです。また、PCから見る場合のことも想定して文章の列が崩れたりすることがないよう注意することが必要です。