WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
先日に「プラグイン版のSEOランディングページを速度ツールで測定した記事」を解説させていただきました。PCでは100点が出たので今回は満点をとるためのノウハウをご紹介いたします。
目次
GoogleのWebページ表示スピード測定ツールで100点を取る
前提として「重たい処理」が入っているとページの評価は下がりやすいです。
１. 余計なスクリプトは取り除く
ウェブサイトではさまざまなスクリプトが使われます。それはただ単純に画像を読み込むためかもしれません。または華やかに見える動きをつけるためだけに実装されるスクリプトもありますよね。
<script type="text/javascript" src="https://example.com/wp-content/plugins/wp-sample-script/inc/js/init.js"></script>しかし、必要以上にたくさんのファイルを読み込ませると結果的に重たくなってしまいスピード測定ツールでの評価も悪くなるケースがあります。不要なスクリプトは使用しないようにしましょう。
２. CSSはhead内に記述する
どんなウェブサイトも基本的にはhtmlで作られているので記述ルールがあります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="author" content="作者情報">
<meta name="copyright" content="コピーライト">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="description" content="ディスクリプション">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="/css/sample.css">
</head>
<body>
</body>
</html>デザインを作ってhtml化する際に必要なのは正しくマークアップすることです。マークアップはhtml構造を推奨のルールで作り上げることを言います。CSSの外部ファイルの読込みはhead内で行いましょう。
ちなみに上記はhtml5の基本構造です。html5で書くかhtml4を採用するかといった書き方の選定もあります。
３. JavaScriptはbody最下部へ
さきほどCSSはhead内に記述するとお伝えしましたがJavaScriptは逆です。
わかりやすく言えばCSSは処理が軽いのでhtml文頭で読み込ませます。そしてJavaScriptはCSSと比べると重いのでhtmlの最後尾で実行すると覚えてけばOK。下記の通りbody終わり部分で指定しましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="author" content="作者情報">
<meta name="copyright" content="コピーライト">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="description" content="ディスクリプション">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="/css/sample.css">
</head>
<body>
<script type="text/javascript" src="/js/demo.js"></script>
</body>
</html>４. アップロード画像は圧縮する
ウェブサイトで容量を圧迫しやすいのが画像です。画質が良くなれば良くなるほど容量は増えます。特に最近はスマートフォンがさらに進化しているので１ファイルあたり5〜10MBへ膨らむので注意が必要です。
画像の大きさや容量を圧縮には「フリーソフトを使わない方法」もあります。
５. 導入するプラグインは最小限に
ワードプレス等のCMS（更新システム）が入っていないウェブサイトではプラグインの心配は不要です。代わりにコーダーが導入しているライブラリがたくさん入っていないかどうかを確認しましょう。
ただし最近は更新システムが入ったウェブサイトが全体の6割以上を占めているのが現状。以前にワードプレスの仕組みを詳しく解説した記事で更新システムについても触れているのでぜひご参照くださいませ。
▼ワードプレスとは何なのか？
https://wp-labo.com/about-wordpress/
上記URL先では更新システムの割合も解説しています。更新システムが入っているウェブサイトではプラグインといった便利な機能が使えるので導入しすぎて重たくなる場合が多いです。高得点を目指すなら余分なCSSやJavaScriptを読込みやすい過度なプラグイン導入は避けましょう。処理が増えすぎると自然と点数も下がります。
まとめ
本日は「ページ表示速度測定ツールで100点を取る方法」をご紹介いたしました。
・プラグイン等の余計なスクリプトはできるだけ取り除く
・CSSやJavaScriptはhtmlの適切な位置で読み込ませる
・表示用としてアップロードする画像は可能な限りで圧縮
ちなみにhtml全体を圧縮する方法もありますがそこまでしなくても100点は取れます。ポイントとしては余計なスクリプトを読み込ませすぎないことですね。あと使用する画像は事前圧縮作業を忘れない。
ぜひお試しくださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
