HTML コーディング代行会社のブログ

Web サイトの表示を高速化する 5 つの方法2019.05.18

Web サイトが表示される仕組みをご存じでしょうか？クライアント (パソコンやスマホ等) のブラウザからサーバにリクエストをして、それをサーバがレスポンスしたデータをブラウザで表示するという流れで、表示速度はクライアントマシンとサーバのスペック、ネットワーク環境、そしてデータ容量によって大きく変わります。例えば、皆さんは 「iPhone 6 から iPhone XS に変えたら Web サイトがサクサク動くようになった。」 とか、「4G 回線から Wi-Fi に切り替わった途端、動画がスムーズに再生された。」 という経験ありますよね？

ハードウェアやネットワークのことはさておき、このページでは、僕たちフロントエンドエンジニア、HTML コーダーが Web サイト表示の高速化に貢献出来る 5 つの方法を紹介していきます。

1. 画像を最適化する

もし、Photoshop や Illustrator から書き出した画像をそのままサーバにアップされているのでしたら、画像圧縮サービスやソフトの利用をオススメします。大量に処理する方は PNGoo を。手軽に使えるインストール不要のオンラインサービス TinyPNG 等も有名です。いずれも該当ファイルをドラッグ & ドロップで完結し、難しい操作は不要です。ビフォアー・アフターを比べると感動するかもしれませんよ。

2. JavaScript の見直し

WordPress 等で生成されたソースコード見ると、時々 「ギョッ！」 とします。最悪のケースだと、js ファイルが 27 つ設置されたブログサイトを見たことがありますが、言うまでもなく表示速度も最悪でした。不要な js ファイルを削除したり、body の最下部に移動させたり、可能であれば非同期処理 (async / await) を行うことで、大幅に改善されるかもしれません。

3. 各種ファイルの最小化

「Ctrl + U」 を押して本サイトのソースコードをご覧になると、見るも無残な状態になっているのがお分かりいただけるでしょうか (笑)。はい、これが最小化です。css ファイル はさらにヒドいですが、チリも積もれば山となる精神でチャレンジしてください。本サイトでは minify プラグインを使用していますが、「HTML minify」 や 「HTML 圧縮」 と検索すると様々なツールを見つけられます。

4. gzip 圧縮

お使いの Web サーバによりますが、本サイトの場合、gzip 圧縮の設定を行っています。gzip 圧縮とは、サーバからファイルを転送する際にファイルを圧縮し、高速化を目指すものです。

5. ブラウザキャッシュの利用

css や js、画像関連ファイル等、更新頻度の低いファイルをブラウザにキャッシュさせることで、次回の読み込み速度が上がります。レンタルサーバの場合、.htaccess に設定する方法が一般的です。

P.S.
サムネイル選びを失敗しました。
神々しい富士山を背景に、時速 285km の 「のぞみ」 が突き抜けるという、スピード感あふれる写真素材を 写真 AC さんから拝借し、ノリノリで Photoshop で切り抜いているとき、はたと気付いたのです。「あ、ウチなら飛行機の方が良かったかな。。」

POINT

当社の案件では、特に指定の無い場合は 1 と 2 を実施しています。3 ～ 5 をご希望のお客様は別途ご相談ください。

コーディング部ログ TOP