トップ＞
カスタマイズ＞
【チェックリスト】新年度に向けてWordPressサイト：HTML/JavaScriptチェック！

【チェックリスト】新年度に向けてWordPressサイト：HTML/JavaScriptチェック！

columbusproject
- カスタマイズ
Photo：
2022-02-10

新年度に向けてWordPressサイトを点検する際、どこからチェックすれば良いかわからないとお悩みではありませんか？

HTML/JavaScriptに関するチェックリストをご用意しましたので、前回の記事【チェックリスト】新年度に向けてWordPressサイト：セキュリティチェック！と合わせて、時間のある時にチェックしてみてください。

今回は新年度に向けて、WordPressサイトにおけるHTML/JavaScriptに関するチェックリストについてお話します。

1.各種検証ツールを使用してチェック

はじめにページ表示速度、HTMLタグやCSSの整合性などをチェックできるツールを利用してみましょう。

PageSpeed Insights：https://pagespeed.web.dev/
Markup Validation Service：https://validator.w3.org/
CSS Validation Service：http://www.css-validator.org/validator.html.ja

上から順にページ表示速度、HTMLタグ、CSSのチェックができるツールです。GoogleやW3Cの提供するツールであり、無料ですので気軽に使ってみてください。明らかにおかしい値やタグの閉じ忘れのチェックに役立ちます。時間がない場合はこれらの検証ツールによるエラーの修正や改善だけでもしておくと良いでしょう。時間がある方、じっくりチェックしたいかたは以降の項目を読み進めてみてください。

2.PageSpeed Insightsの結果を見ながら、明らかに重いJavaScriptを見直す

PageSpeed Insightsはサイトの表示に関するチェックができるツールです。1ページごとの情報量、HTMLタグ、CSS、JavaScriptによる表示スピードを可視化できます。

もし、何らかのJavaScriptを後から導入している場合、明らかに重い場合は外すか、別のものにすることでページ表示速度が向上します。ただし、よくわからないのに安易に削除や修正をしてしまうと、不具合が発生する可能性があるので注意してください。

3.Markup Validation Serviceの結果を見て、テーマのテンプレートを修正、改善する

Markup Validation ServiceはWordPressで出力されたHTMLの整合性や正確性をチェックするツールです。ほとんどのテーマはデフォルトであれば問題ありませんが、もし何らかのカスタマイズをしているのであればエラーが発生する可能性があります。

タグの閉じ忘れや入れ子の組み合わせの異常がないかをチェックし、必要に応じてテーマのテンプレートを修正、改善しましょう。PHPファイルを直接編集する形になるので、不慣れな場合はバックアップを取って作業するか、もしくはWeb制作会社に任せることをおすすめします。

4.CSS Validation ServiceでCSSのエラーがあれば修正、改善する

CSS Validation ServiceはCSSの整合性や正確性をチェックし、エラーなどで教えてくれるツールです。CSSの場合もテーマをデフォルトのまま利用していれば特に問題ないはずですが、やはり何らかのカスタマイズをしていればエラーが発生する可能性があります。

CSSもテーマテンプレートから修正することができます。ただし、HTMLタグとCSSの両方の知識を必要とするため、不安であればいきなり変更しないこと、バックアップを取って作業するか、外部委託した方が安全かもしれません。

5.目視によるチェックをパソコン・スマートフォン・タブレットで行う

各種検証ツールによるチェックが終わり、改善すべき箇所の修正が終わったら、次は各ページを目視によるチェックを始めます。なるべくなら実機でチェックしたいところですが、実機がない場合はブラウザの拡張機能などでユーザーエージェントを変更しながら、もしくはブラウザのウインドウの幅を狭めながら対応してみてください。

または、WordPressの外観のメニューからカスタマイズに入り、表示の変更をしながらチェックするのもおすすめです。