ブログを開設して1ヶ月半経過しました。来月には「ニューヨーク 出産」のキーワードで検索1ページ目に表示されたいなーと目論んでいます。
SEO対策の一つとして、Google Speed Insightsのポイントを最低ラインの80点台に持って行かないと！ということで、今回修正した4つのポイントです。目新しいこともありませんが、同じような状況の方の参考になれば嬉しいです(∩´∀｀)∩ﾜｰｲ
修正前の状況
Google Speed Insightsで調べたところ、モバイルが63ポイント、PCが77ポイントでした。今回は両方とも80点超えを目指して進めていきます。
赤い修正項目をまずは解決
モバイル表示で一番ページ速度を落としているのが、赤く表示が出ている「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」という項目。Google先生によると邪魔なjsが3つ、cssが8つもあるそうです。
「レンダリングブロック」って何？と思いましたが、要はページの読み込みを遅くしているjsファイルやcssを最後のほうに読み込ませたり、ファイルサイズを小さく圧縮すればいいということでした。
参考にしたサイト
「スクロールせずに見える〜」で検索するとすっごくたくさんの記事が引っかかります。まずは検索してみてください。改めて言いますが、この記事に目新しいことはありません！w
今回修正したポイントは、下記サイトを参考にさせてもらいました。ありがとうございます！
ではどうぞ。
Font Awesomeの読み込み位置をフッターに変更
header.phpで読み込んでいた下記Font AwesomeのCDNコードをfooter.phpの</body>直前に移動しました。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
これだけでモバイルのポイントが「63→71」に、なんと8ポイントも上がりました！PCは1ポイントアップに留まりましたが、これは大きい。CDNは負荷が少ないとはいえ、やはり後のほうで読み込むに越したことはないですね。
Font Awesomeを使わなければもっと軽くなるかもしれませんが、Font Awesome大好きなので、その選択肢はなしw
Crayon Syntaxからhighlight.jsに移行
「修正しろ」と言われたうちの4つが、コードを綺麗に表示するプラグイン「Crayon Syntax Highlighter」関連のスクリプト。プラグインの減少は高速化につながる！ということで、下記のサイトを参考に「highlight.js」へ移行しました。
- サクライフ「ソースコードを表示するにはhighlight.jsが軽量ですごくいい！Crayonとも互換性あり」
- えじの自由帳「Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう」
highlight.jsでは行数の表示がなくなりますが、私はコードを書く機会も少ないので特に問題なさそう。用意されているスタイルシートも種類豊富です。デモ画面から確認してみてください 🙂
私はAtelier Seaside Lightを選択し、borderなどcssを少しだけ追加しました。cssの読み込みはheader.phpではなく、元々使っていたstyle.cssの中に直接書き込んでいます。
/* Atelier-Seaside Comment */
.hljs-comment,
.hljs-quote {
color: #687d68;
}
/* Atelier-Seaside Red */
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #e6193c;
}
/* Atelier-Seaside Orange */
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: #87711d;
}
/* Atelier-Seaside Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #29a329;
}
/* Atelier-Seaside Blue */
.hljs-title,
.hljs-section {
color: #3d62f5;
}
/* Atelier-Seaside Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #ad2bee;
}
.hljs {
display: block;
overflow-x: scroll;
background: #f4fbf4;
color: #5e6e5e;
padding: 0.5em;
border: 1px dashed #33cccc;
line-height: 1.4;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}肝心の結果はモバイルが「65→66」、PCは78のまま変化なしと微妙でしたが、プラグインが一つ減ったことと、圧縮しなきゃいけないjsとcssが大幅に減ったので良しとします◎
※Google Speed Insightsのポイントは他の要因もあったのか、Font Awesomeコードの移動で上がった分がいつの間にか落ちてました。なのでこの計測時点でモバイルは60点台に逆戻りしています(´・ω・｀)
Autoptimizeの導入
モバイルの「スクロールせずに〜」の項目でjsが2つ、cssが6つもまだ残っています。これを解消するためにプラグイン「Autoptimize」を導入しました。
javascriptとcssだけ圧縮するように設定し、htmlは何もしていません。そのうちhtmlも検証しようと思っています。
この圧縮効果でモバイルが一気に「66→74」、PCが「78→79」と大幅にアップしました。80点台まであと少し！
W3 Total Cacheの導入
最後に試したのが、超有名キャッシュ系プラグイン「W3 Total Cache」の導入。実は初期に一度導入したのですが、何かのデータとコンフリクトしてしまったのか色々おかしくなってしまったので、キャッシュ系のプラグインは怖くていれていませんでした。
設定はバズ部さんの記事「W3 Total Cache のおすすめの設定方法」を参考にしました。
検証結果はモバイルが「74→83」、PCが「79→82」とついに両方とも80点台に突入しましたー！(∩´∀｀)∩ﾜｰｲ
もっと上を目指すなら90点超えが望ましいですが、最低ラインはクリアしたと思うのでとりあえず安心◎
まとめ
体感でもちょっと速くなったような…気がします。私みたいなブログを始めたばかりの人の参考になれば嬉しいです♪
では、Ryo@nydewebdesignでしたー♪
