※当サイトにはプロモーションが含まれています。
クライアント 今、サイトを見たら、表示が崩れてしまって大変な事になっています。
記事の更新などはしてないので、サイバー攻撃かもしれません。
クライアント 大至急、対応してください！
にゃテック 犯人は「Autoptimize」にゃ！
記事を更新したわけでも、プラグインをインストールしたわけでもないのに、突然、サイトの表示が崩れてしまったという経験はないでしょうか？
こういったトラブルの場合、JavaScriptやCSSなどのテキストファイルの圧縮（ミニファイ）をおこなうプラグインが原因のことが多いです。
何故、こういったプラグインにトラブルが多いのかも含めて説明します。
圧縮系プラグインについて
ファイルを圧縮して、容量を軽くするプラグインは大きく分けて２種類あります。
１つは、画像系のファイルを圧縮するプラグインで「ImageMagick エンジン」、「EWWW Image Optimizer」が有名です。
画像を圧縮するプラグインは、JPEGやPNGなどの画像ファイルの品質を維持しながらファイルサイズを小さくしてくれます。
もう１つは、テキストファイルを、ミニファイ（minify）化するプラグインです。
これらのプラグインは、JavaScriptやCSSファイルから不要なスペースや改行を削除し、ファイルサイズを小さくしてくれます。
なお、現在、テキストファイルを、ミニファイ（minify）化する代表的なプラグインは下記３つです。
- Autoptimize（オートオプティマイズ）
- WP Fastest Cache（ダブリューピー ファステスト キャッシュ）
- W3 Total Cache（ダブリュースリー トータル キャッシュ）
しかし、テキスト圧縮によるファイルサイズの削減は、実際にはわずかであることが多いです。
何故なら、多くの場合、JavaScriptやCSSファイルのサイズは数KBから数百KB程度であり、画像や動画と比べて元々のサイズが小さいからです。
ミニファイ化による不具合のメカニズムと事例
ミニファイ化（minify）とは、JavaScriptやCSSファイルから不要なスペース、改行、コメントなどを削除してファイルサイズを縮小する技術です。
しかし、これによりコードが誤動作することもあります。
以下に、ミニファイ化による不具合が起きやすいコードの一例を紹介します。
元のコード
body {
background-image: url("images/background.jpg");
}ミニファイ化されたコード
body{background-image:url(images/background.jpg);}URLが引用符なしで扱われ、特殊文字やスペースを含む場合、正しく解釈されないことがあります。
また、JavaScriptではセミコロンを省略することが許されていますが、ミニファイ化によってコード行を結合した際に、適切にセミコロンを挿入しないと誤動作することがあります。
元のコード
var x = 10
var y = 20
console.log(x + y)
ミニファイ化されたコード
var x=10var y=20console.log(x+y)
var x=10とvar y=20の間にセミコロンがないため、エラーになります。
自動更新によるデザイン崩れのメカニズム
プラグインやテーマの更新により、CSSやJavaScriptファイルの構造や内容が変更されることがあります。
この変更に対してミニファイプラグインが適切に対応できない場合、意図しない動作やスタイルの適用ミスが発生します。
新しいバージョンのテーマやプラグインが特定のCSSやJavaScriptの使用方法を変更し、それがミニファイ化されたコードと互換性がない場合、デザインが崩れることがあります。
更新前のコード
/* Old JavaScript */
$(document).ready(function() {
$(".button").click(function() {
// Action
});
});
更新後のコード
/* Updated JavaScript */
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".btn").addEventListener("click", function() {
// Action
});
});jQueryからネイティブJavaScriptに変更されたため、旧コードに基づいたミニファイ化が適用されず、機能が動作しない可能性があります。
まとめ
ワードプレスのテキスト系の圧縮プラグインは、圧縮による効果が限定的であることから必ずしも必要とは言えません。
特に、ファイルサイズが小さい場合や、他のパフォーマンス向上手段（CDNの利用やキャッシングの最適化など）を既に採用している場合は、その効果はさらに小さくなります。
そのため、テキストのミニファイを行うプラグインに頼るよりも、サイト全体の最適化や効果的なキャッシング、画像の最適化に注力した方がよさそうです。
楽天市場の検索結果
