Webサイトの表示速度を向上させるために大切なのが、サイトを構成するファイルを軽量化することです。画像や動画等を圧縮している方は多いですが、テキストファイルはどうでしょうか。
HTML・CSS・JavaScript等のテキストファイルもMinify圧縮で軽量化を行うことが可能ですが、なんだか難しそうという理由で敬遠されている方が多いように思えます。
当記事では、Minify圧縮を行う具体的な方法についてまとめましたので、まだテキストファイルの軽量化を行われていない方は、参考にしてください。
目次
最も簡単なMinify圧縮方法
手軽に圧縮するなら、オンラインツールを使用する方法がお勧めです。ブラウザ上で動作するため、専用のアプリケーションやテキストエディタを持ち合わせていなくても下記のように圧縮することが可能です。
Minify圧縮できるオンラインツール
オンラインツールを使用すれば、圧縮したいコードを貼り付けてボタンを押すだけで圧縮を行うことが可能です。下記にHTML・CSS・JavaScript別に圧縮できるツールを紹介してますので、アクセスして使ってみてください。
2020/10/20*情報を更新いたしました。 ページの高速表示を叶えるためには基本的に取り扱いデータ量を落とすという考えはすぐに結果が出てきます。シンプルで効果もある高速化へのアプローチですのでこの機会に参考に対応をご検討ください。 Minify圧縮で高速化 テキストファ...
圧縮したコードを整形できる（Beautify）ツール
Minify圧縮を行うと、改行や空白が削除されて1行になるため、非常に読みにくい状態になります。一度整形された状態に戻す場合は、下記のオンラインツールを使ってみましょう。こちらも上記と同様にコードを貼り付けてボタンを押すだけで整形（Beautify）できます。
ファイルサイズの軽量化を行うためにMinify（ミニフィ）圧縮を行いますが、逆に圧縮されたコードを読みやすいように整形して確認したい時ってありますよね。 当記事では、圧縮されたコードを整形して読みやすくする処理（Beautify）をブラウザ上で行えるサービス「Dirty Markup」を紹介し...
Minify圧縮したファイルを管理する時の注意点
Minify圧縮した後はコードが読みにくいため、修正や更新などの作業が非常に大変です。
さらに上記のような自動整形ツールは、改行や空白等を調整するだけで、完全に元の状態（コメント等も含む）に戻すことができないため、元ファイル（例：◯.js）とは別にMinify化されたファイル（例：◯.min.js）を用意し、変換して更新していくのが一般的です。
上記の理由からメンテナンスに手間がかかるため、下記に紹介する自動で圧縮する方法がお勧めです。
自動でMinify圧縮を行う方法
テキストファイルの改行や空白は、読み手のために存在します。そのため、エディタやテーマファイルに記載されたコードは整形された状態のまま、サイト上に出力されるコードを圧縮できれば理想ですよね。
実は、WordPressには、このようにサイト上に出力されるコードを自動で圧縮してくれるプラグインが存在します。こちらを利用すれば、メンテナンスに支障を与えずにテキストファイルを軽量化できるため、ぜひ導入してみてください。
代表的なプラグイン「Autoptimize」
「Autoptimize」には、HTML・CSS・JavaScriptを自動で圧縮・変換する機能が備わっているため、テーマファイルを編集せずとも管理画面から簡単にMinify圧縮を行うことが可能です。詳細な仕様や導入方法は下記の記事を参考にしてください。
WEBサイトを閲覧していて、ページの表示がもたつくと煩わしいですよね。外出先のあまり通信環境の良くない状況などでしたらなおさらです。それだけでサイトの閲覧をやめて、別のサイトを探したりすることもあると思います。ページの表示スピードが閲覧者に多大な影響を与えることは、言うまでもありません。 とい...
プラグインを導入する時の注意点
非常に優れた「Autoptimize」ですが、このプラグインが原因でサイト上のレイアウトが崩れる等の不具合が生じる可能性があります。原因は様々ですが、必要な記述が削除されて動作しなくなることが多いようです。
例）JavaScriptの命令文の行末の「;」セミコロンの記述がない状態で圧縮すると、ブラウザの自動補完が働かず、正常に動作しなくなる
このように使用するテーマによっては正常に動作しない可能性があるため、表示や動作に異変があれば、一度こちらのプラグインを疑ってみましょう。
Minify圧縮機能が備わったテーマを使用する
最も確実な方法は、Minify圧縮機能が備わったWordPressテーマを利用することです。こちらの方法であれば、オンラインツールやプラグインを導入する必要がないため、それに伴う手間やリスクも存在しません。
もちろんTCDテーマにも「Autoptimize」と同様のコードを最適化する機能が備わっており、管理画面から下記のようにワンクリックでテキストファイルを軽量化できます。
まとめ
Minify圧縮について具体的な方法を3つ紹介しましたが、Webサイトの表示速度を上げ、管理を楽にするのであれば、自動で圧縮する方法が良いでしょう。
さらに「Autoptimize」のようなプラグインを導入できるか否かは、テーマに左右されてしまいます。そのため、もしサイトの表示高速化を重視されているのであれば、コード圧縮機能を備えたWordPressテーマを検討することをおすすめします。
コメント