「閲覧するまで時間がかかる！」や「表示速度が遅いとSEO的に大丈夫？」などホームページの表示速度は、Webディレクターをいつも悩ませる要因の一つとなっています…
表示速度が改善することによって、ユーザーのホームページ閲覧性が向上するのはもちろんSEO対策やユーザーの離脱を防ぐことができるのでぜひ実装していきたいが何をすれば用意すればいいかわからない…そんなあなたのためにすぐにでもできる軽量化方法をまとめました！
画像サイズの圧縮
まずページの表示速度に一番影響があるのが、画像のサイズです。画像のファイルサイズはなるべく小さくして通信にかかる負担を減らすのが、表示高速化における最重要ポイントといえます。
画像サイズの圧縮に関してできる方法としては以下の３つが挙げられます。
– ファイル形式の最適化
– 適切な解像度にする
– 画像ファイルを圧縮する
ファイル形式の最適化
画像サイズの圧縮のためにはまず最適なファイル形式を選ぶ必要があります。
近年よく使われているのはJPGかPNG,SVGだと思いますが、例えば写真のように色数が多いものにPNGを使っていたりするとJPGよりサイズが大きくなってしまいます。ですので作成する画像によってファイルサイズを適宜選定するのが重要です。また最近ではWebPなどの新たな画像拡張子が登場してきておりさらなる改良ができるようになってきています。
適切な解像度にする
近年では大画面で高解像度のディスプレイが増えており、画質重視で解像度大きくしていくと,どんどんファイルサイズが大きくなってしまいます。ですのでクオリティを相談しながら最低限の解像度を決めることが重要です。
画像ファイルを圧縮する
上記の見直しをおこなったあとは画像ファイルの圧縮をしていきます。JPEGだとオリジナルの80%程度であればそれほど劣化も見られずに圧縮することができます。PNGファイルなども外部サービスを使用して圧縮することができるのでweb制作の際はマストの作業にしたいですね。
CSS,JSファイルのMinify化
Minify化とは、CSSやJavaScriptのコメントアウトや空白・改行の削除などを、ツールを使って機械的に行うことを言います。タスクランナーでCSSやJavaScriptをMinify化することもできますが、ウェブサービスでも手軽にMinifyできます。
Minify化をすると、ファイルサイズはかなり軽量化できます。
しかし人が読むにはとても難し状態になるので納品後にクライアント側でソースコードを変更する可能性があるなどの場合には、Minify化すべきかどうかは考慮する必要があります。
不要なコードの削除
ソースコードの文字数が多く、ファイルサイズが大きくなるにつれてダウンロードにかかる時間などが長くなるためページ表示速度は遅くなってしまいます。
ですので表示高速化のためには、不要な記述は削除し、ファイルサイズを軽量化するようにしましょう。
普段から開発中に生まれた残す必要のないコメントアウトや使用していないコードなどの記述は削除しておくべきです。
差分などをどうしても残す必要がある場合はGitを使うなどの管理方法を検討しましょう。
外部ファイルの結合
メンテナンスなどの観点から、CSSファイルやJavaScriptファイルを複数に分割したくなる時もあると思います。しかし、
現在広く普及しているHTTP/1.1では、この「HTTPリクエストに対してHTTPレスポンスを返す」という処理を、1つずつしか捌けず、HTTPリクエストの回数が増えるほど、通信に時間がかかってしまいます。
ですので、ファイルを複数に分割して、複数回のHTTPリクエストを送るよりは、ファイルを結合し、少ない回数でHTTPリクエスト/HTTPレスポンスが行われるようにした方が、結果的には表示速度が改善します。
まとめ
ほかにも様々な改善方法がありますが上記の方法を用いればいますぐにでもWebページの表示改善を行うことができます！
残りの改善方法についても改めて記事にしていきたいと思いますのでお待ち下さい！
