「使用していない CSS を削除してください」とは？改善方法も解説【PageSpeed Insights】
Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「使用していない CSS を削除してください」とはどういう意味か、また診断結果を改善する方法についても解説します。
「使用していない CSS を削除してください」とは？
ホームページを長年運営していると、コンテンツの追加や修正をたくさんすることになります。新しい記事を作った時にそのページでしか使わないCSSを作ったりレイアウト変更でCSSを追加したりと、ボリュームのあるホームページだと、CSSのファイルには数千行ものコードが書き込まれるものです。
そこで問題となるのが、新しいCSSを追加する時に古いCSSを残してしまうことです。ホームページの見た目は何もおかしなことが無いため、見ているユーザーにとってはレイアウトなどの違和感はありません。しかし、ユーザーがホームページを閲覧する時には、必ずCSSのファイルも読み取るため、無駄なCSSがあるとそれだけページの表示に時間がかかってしまいます。
「使用していない CSS を削除してください」の改善方法
使用していないCSSが多くてページの表示速度に負荷がかかるとSEOにとっても良くないし、見ているユーザーにとっても表示があまりにも遅いと離脱される恐れがあります。そういった問題を無くすために、使用していないCSSを削除する必要があります。
別のフォルダに全ファイルを移す
使用していないCSSを削除するには、どれが無駄なCSSなのかを探さないといけません。まだ作成中で運営していないホームページであれば問題ありませんが、すでに運営をしているホームページだと、CSSのコードを簡単に消したり戻したりできません。ホームページのレイアウトなどが変わってしまうからです。
そこで、一度サーバー内にあるホームページのデータを丸ごとコピーして、別のサーバーなどに移動してからCSSをチェックしていけば、稼動しているホームページに影響が出ません。
例えば、サーバーにある「main」というフォルダの中にドメイン設定をしているなら、同じ階層に「main_new」というフォルダを作成して、その中に「main」の中のすべてのデータをコピーしていきます。そして、実際に使用していないCSSを探すのは、「main_new」の中にあるCSSをチェックします。
「main_new」の中で無駄なCSSを削除し終えたら、「main」のフォルダを「main_old」にして「main_new」のフォルダを「main」に切り替えれば、ユーザーには何の違和感も無く、無駄なCSSが削除されたホームページが閲覧できるようになります。
今後の管理をしやすくするには
CSSのファイルは、複数用意すると管理がしやすくなります。例えば、ヘッダーやフッター、基本的なレイアウトなど、全ページで使用するCSSは「common」というファイル名にして、その中にコードを書き込みます。
また、ひとつのページでしか使用しないCSSがあるなら、そのページ名のCSSファイルを作成して読み込ませれば、他のページで無駄なCSSコードを読む必要が無くなります。このように、CSSのコードを複数のファイルに分解して作成することで、管理がしやすいだけでなく、必要の無いCSSも無駄に読み込む必要がなくなります。
なお、サイトのCSSが改善できるかどうかは、「PageSpeed Insights」でチェックすることが可能です。チェックしたいURLを入力し分析することで、CSSの改善によるページの読み込み推定時間がわかります。ぜひ、活用してみてください。
