ホームページの高速化

日本語フォントは文字数が多いためにファイルサイズが大きく、Webフォントとして使うには重いという問題があります。しかし、文字を画像化してしまうと調整も修正も面倒であり、検索もできないデメリットがあります。そこで、実際に使う文字だけを抜き出した「サブセットフォント」を作成することで、Webフォントとして現実的なサイズにまで軽くする方法をご紹介。

Base64というエンコード方法を使って、画像そのものをCSSソース中に埋め込む方法を解説。ウェブ上に小さな画像を多数掲載する際、画像ファイル1つ1つを読み込むよう記述していると、サーバへのリクエスト回数も多くなるため余計な時間がかかります。小さな画像ファイルをCSSソース中に埋め込むことで余計な通信を減らし、読み込み待ち時間を軽減する方法をご紹介。

ウェブページの読み込み待ち時間を短くする方法として、「次に読み込まれる可能性の高いファイルを先読みさせる」という手段があります。次のページの描画を事前に済ませておく「プリレンダリング」機能、共通のファイルを事前に読んでおく「プリフェッチ」機能の書き方・使い方をご紹介。HTMLのlink要素を1行記述するだけという簡単な方法で、先読みの指示ができます。

HTML内でCSSファイルやJavaScriptファイルを読み込ませる場合、記述の仕方によっては読込速度や表示速度が遅くなることがあります。ウェブページができるだけ速く表示されるよう、外部ファイルを読み込む記述にも注意してみましょう。CSSファイルやJavaScriptファイルを読み込む際に、読込速度や表示速度の低下を防ぐ記述方法をご紹介致します。

【ホームページの表示速度を速くする！】読み込む画像ファイルがたくさんあると、ホームページの読み込み速度が低下してしまいます。画像がたくさんあるなら、それらを「1つの大きな画像」に結合させてみましょう。すると、全体のファイルサイズも減り、通信回数も減るため、ページの読込速度が速くなります。複数の画像を1つにまとめ、スタイルシートを使って表示対象を選択するテクニック「CSS Sprite」の使い方をご紹介！