サイトを軽く、速いページを作ると離脱率が下がり、アクセスアップにつながります。
サクサク開く、軽いサイト作りをして行きましょう。
ここでは速いページ作りをして行きます。
軽いサイト作りをレクチャーして行くよ。
目次
サイトはどれだけ軽くなるか？
サイトを軽くしようと思えば、かなり軽くすることが可能です。
以前作ったサイトを元に説明して行こうと思います。
改善前は最初40点でした。
最初は軽くする努力を一切していませんでした。
これを、84点にまで持って行くことができました。
さらに、特殊な設定で91点まで上げることが出来ました。
ここでは、軽くするためにやったことを全て提供して行きます。
ぜひ快適な軽いサイトを作りましょう。
サイトの重さをチェック
サイトの重さはGoogleが提供するPageSpeed Insightsというサイトで確認することが出来ます。
いらないプラグインを停止・削除する
P3 (Plugin Performance Profiler)
このプラグインで、プラグインの重さをチェックすることが出来ます。
改善前
改善後
いらないプラグインは停止・削除することによって軽くすることが可能です。
改善前 → 改善後で約0.2秒ページ表示が速くなりました。
WordPress Popular Postsなどは、とても便利なプラグインですが、結構重いので、注意が必要です。
大きな画像をリサイズする
大きな画像は容量を使うため、ページ表示に負荷がかかります。
出来るだけ適したサイズの画像をアップするようにしましょう。
過去のものを整理するのは大変なので、プラグインを使うと良いです。
アイコンは画像ではなくCSSを使う
リストアイコンなど、1ページでたくさん使うものは、画像ではなくCSSを使いましょう。
CSSでアイコンが上手く出来ない人はFontAwesomeを使うと良いです。
FontAwesomeはCSSで出来ているので、初心者におすすめです。
シンプルな画像を使う
シンプルな画像とゴチャゴチャした画像では、シンプルな画像の方が軽いです。
出来るだけシンプルなものを使うようにしましょう。
キャッシュ機能を使う
キャッシュ機能を使うことによって、ページ表示が速くなります。
エックスサーバーを使っている人はFastCGI・mod_pagespeedの2つの機能を使うことによってかなりのスピードアップとなります。
FastCGI
mod_pagespeed
他のサーバーを使っている人はプラグインで代用すると良いです。
SNSボタンを非カウントor非同期にする
SNSボタンは「カウント数を表示する」設定になっていると、時間がかかります。
非カウントにしておくか、非同期設定にしておきましょう。
JavaScriptを/bodyの直前にする
Googleアナリティクスや他のJavaScriptをhead内に入れるのではなく、/bodyの直前に入れてみましょう。
/bodyの直前に入れることによって、ページ表示が速くなります。
AMP設定にする
AMPはモバイルの超高速表示をする機能で、Google検索からの1ページ目に有効です。
一瞬でページが表示されるので、ぜひ導入しておきたいです。
テンプレートに機能が付いているものもありますが、プラグインでもAMP設定が出来ます。
これらをやれば40点 → 91点に
これらを全てやると、点数はかなり良くなります。
重いサイトは途中で離脱してしまうので、ぜひ軽いページ表示を目指しましょう。
Step15: 記事のリライト方法と人気記事の作り方
