2020/10/20*情報を更新いたしました。
ページの高速表示を叶えるためには基本的に取り扱いデータ量を落とすという考えはすぐに結果が出てきます。シンプルで効果もある高速化へのアプローチですのでこの機会に参考に対応をご検討ください。
Minify圧縮で高速化
テキストファイルからは不要な改行、スペース、コメントなどを削除するMinify（ミニフィ）圧縮などが効果的です。以下に有名なツールを紹介していますので、活用してMinify圧縮の恩恵を体感してみるとよいでしょう。それぞれの使い方などもゆくゆくご紹介できたらと思います。ここではサクっと対応かのうなツールの紹介に留めています。
本当に容量が落ちるので気軽にお試しください。バックアップは確実にしっかりと行い、問題が出た場合はもとのファイルに戻しましょう。
HTMLのMinify圧縮
「HTML Minifiler」は動作上、不要な改行や空白、文字列を削除して、圧縮してくれるWebサービスです。HTMLをコピペするだけで使えるお手軽圧縮ツールです。
CSSのMinify圧縮
CSS Minify
CSSO
JavascriptのMinify圧縮
JavaScript Minifier
gzip圧縮でさらに高速化
Minify圧縮と別にgzip（ジー・ジップ）圧縮という手法も存在します。Minify圧縮を施した後にgzip圧縮を行うことで最初の容量から40～60％の容量圧縮が可能になる場合もあります。
gzip圧縮はテキスト系ファイルに対して大きな効果を発揮しますが、すでに独自の圧縮処理がされたPDFファイルや画像などに対しては逆に容量が増えてしまうこともありますので前後の変化をみてどの圧縮を採用するかは検討をしたほうがよいでしょう。
gzip圧縮を行う場合、1つずつgzip圧縮を行ってアップロードする方法でもよいのですが、.htaccessファイルを用いて自動的に圧縮することも可能です。コードの一例を記載しておきますが実際の使用は自己責任でお願いします。
<IfModule mod_deflate.c>
# mod_defiltgerを有効化
SetOutputFilter DEFLATE
# 古いブラウザ対策
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
# 画像は圧縮しない GIF、JPEG、PNG、ICO
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
# ユーザーエージェントごとにキャッシュさせる
Header append Vary User-Agent env=!dont-vary
</IfModule>gzip圧縮についてもっと深く知りたい方の為に参考サイトをいくつかシェアさせていただきます。
・gzip圧縮でCSSやJSなどの転送量を減らす方法
https://syncer.jp/how-to-make-gzip
・Vary Header – KeyCDN Support
https://www.keycdn.com/support/vary-header
WordPress用のgzip圧縮として以下サイトに詳しく説明されていましたのでシェアさせていただきます。
・WordPressサイト用の.htaccess例 | dogmap.jp
https://dogmap.jp/2010/04/20/wordpress-htaccess/
他にも多くの方が.htaccessファイルの記述例を公開されているので参考に取り入れるようにすると良いでしょう。WordPressの場合はプラグインも豊富になるのでマメにアップデートされている圧縮系のプラグインがあればそれを採用するのも一つの手ではあります。
以下のウェブサイトへ行き、該当ウェブサイトのURLを入力するだけで簡単にgzip圧縮ができているか確認できますので設定を行った場合はしっかり効果が出ているか確認をしてみましょう。
・GIDZipTest: Web Page Compression (Deflate / Gzip) Test
http://www.gidnetwork.com/tools/gzip-test.php
ここで触れた方法以外にもphp.iniでPHPの出力をgzip圧縮にする方法もあります。そちらはまた別の機会にでもご紹介できたらと思います。
最後に少し補足ですが、Apacheを使ったmod_defilteの設定はお使いのサーバーにより動作しないことがあります。また、phpなど動的にhtmlファイルを出力していない環境においては予め全ファイルをgzip圧縮してサーバーにアップしたほうが通信時の圧縮処理がなくなる分さらに高速です。Wordpressを使っているなどphpで動的にHTMLを出力する場合、予めHTMLを用意することができません。mod_defilteを使用できる環境で採用することが今の段階ではよい選択肢かなと思います。
Apacheを使ったmod_defilteの設定ができない環境においても事前にgzip圧縮を掛けたCSSやJSファイルを使うことは有効ですので是非お試しください。
画像の圧縮形式
スマートフォンの普及、ディスプレイの高解像度化もあって美麗な画像を用いたコンテンツの優位性が高まっています。しかし、画像ファイルはサイズも大きくなりがちで、通信量の増加原因にもなってしまいます。
最近の傾向として、画像を多用するコンテンツも増えていますので、Webページ容量の50％ほどを占めるページも多く存在します。1ページのコンテンツがほぼ画像というものもありますね。そんな多く使われる画像に対して容量削減対策を取るのはとても効果的です。
そもそも画像を使わないというのが一番の選択肢です。ブラウザの進化もあって多くのデザイン表現はCSSを使って行うことができます。アイコンやボタンなどにおいては、よほど凝ったデザインを採用していない限りHTMLとCSSで対応をするようにしていきましょう。
しかし、写真や図表を用いた方がコンテンツの質を高めることができるというケースも多くあります。その時は最適な画像処理を施して画像を使うようにしていきたいですね。ロゴ画像であっても以下のページで紹介しているSVG形式を採用することでよりきれいに、より軽量化して導入することもできます。
Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。 さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。 ...
画像の圧縮形式について
画像の圧縮形式としては以下の種類を把握しておいたら問題ないでしょう。多くの方が画像の種類として認識しているものかと思いますが、実際は画像データの圧縮方法でそれぞれ用途に合わせて最適な形式を選択する必要があります。
・JPEG（.jpeg / .jpg）
・PNG（.png）
・GIF（.gif）
それぞれの画像特性は以下のページで詳しく書いていますので参考にしてください。
WEBで使う画像ファイルには、複数の種類があります。 同じ画像ファイルでも、複数のファイル形式があり、「.jpeg」などの拡張子と呼ばれる文字列で判別できるようになっています。 当記事では、そんな画像ファイルの拡張子について、種類別の違いや特性をご紹介いたします。 拡張子とは ...
さらに画像サイズを圧縮する
画像サイズを無駄に大きなものを採用しないことでデータとして小さくまとめることができますが、画像には撮影日時、場所、どのカメラを使って撮影したかなどを記憶しているメタデータが存在しています。Webページでの使用においてそれらが不要であれば削除することでさらに容量を抑えることが可能です。
以下におススメの圧縮サービスを紹介します。便利なサービスがたくさんありますので活用していかないと損ですね。
WordPressプラグインを使って圧縮
「Compress JPEG & PNG images」はWordPressで使えるプラグインで、実際に使ってみましたが中には50%近くも容量サイズを圧縮できたものもありました。
2020/02/28 情報を更新いたしました。 個人法人に限らずWEBサイトを運営していると、規模の大小があっても画像を多く活用しているでしょう。ただ、サイト内に画像が増えすぎると容量が大きくなり、ページの読み込みのスピードが落ちてしまいます。サイトを閲覧してもらうために読み込みスピードを最速...
Webサービスをつかってブラウザでお手軽に圧縮
サーバー上、コマンドラインで一括圧縮
・GitHub – tjko/jpegoptim: jpegoptim – utility to optimize/compress JPEG files
https://github.com/tjko/jpegoptim
・画像軽量化ツール LightFile
https://core.lightfile.net/
・pngquant
https://pngquant.org/
・ImageMegick
https://www.imagemagick.org/script/index.php
・Squoosh（Google公式のツール）
WEBサイトの表示速度を向上させるために画像の軽量化は必須です。しかし、画像を圧縮すればするほど画質が劣化していくため、その妥協点をさぐるのに難航している方は多いのではないでしょうか。 当記事では、画像の圧縮率に伴う画質の変化をリアルタイムで確認できる画像圧縮ツール「Squoosh」を紹介して...
Adobeを活用している方はPhotoshopを使って高度な圧縮処理を掛けることができます。手軽さよりも質を追求される場合は導入を検討してみましょう。
