サイトの表示速度

4秒以内に表示

サイトの表示速度は、一般に4秒以内でないといけません。それを超えると、読まずにサイトから離脱する人が激増します。

千分の1秒単位で速度を考える

そこで、サイトの表示速度を上げる努力をすべきなのですが、その基準は、1000分の1秒単位での争いになります。1秒単位ではなく、1000分の1秒単位です。

ものすごくわずかな速度を改善する戦いというわけです。当然、実際に測定して、速度の比較をしたいところです。とは言え、1000分の1秒単位というのは、体感や目測では到底測定できません。

体感や目測は無理でも、技術的には、この様なレベルでの速度の差を実際に測定することは不可能ではありません。とは言え、インターネット上だとなかなか安定して測定できませんので、理論上、一番速く表示される方法を目指すことになります。

測定例はこちらです。

コーディングを単純にする

HTML及びCSSをできる限り単純で短くします。そして、CSSは別ファイルにせず、head内にstyleタグで書くか、対象のHTMLタグの属性で書く様にします。

画像を少なく、小さくする

画像を表示するのは時間がかかりますので、これをなるべく使わないようにして、かつ、ファイルサイズを小さくします。

静的サイトにする

静的サイトなら、劇的に表示速度が速いです。WordPressなど動的サイトは表示が遅くなります。

高速サーバーを使う

サーバーは、なるべくレスポンスが良く、表示速度の速いものを選びます。「無応答」がどれぐらいの頻度で起きるかも重要です。つまり、まるでデータが転送されず、「waiting」の様な表示がずっと続く様な状況です。スピードだけでなく、この点も重要です。

物理距離の近いデータセンターのサーバーを使う

閲覧者からの距離が近い方が表示も速いし、無応答も少なくなる傾向があります。閲覧者が日本在住者など限定されていれば、日本国内か、日本に近い位置にある海外のデータセンターのサーバーを使うのが良いです。

コンテンツ・デリバリー・サービスを利用する

個人サイトでここまでやることはまずありませんが、特に世界中からアクセスされることを目的にしている場合は、コンテンツ・デリバリー・サービスを利用するのがよいと思います。

関連ページ:
A Quick Performance Comparison of Styled-Components vs Inline Styles in React Native (Medium)