サイト読み込み速度を改善してSEO対策をする方法

サイト読み込み速度を改善してSEO対策をする方法

最近、結構頑張ってサイトを作りこんでるんですが、検索順位が逆に下がってヘコんでいました。

そこで一旦、記事の作成は横に置いて自分のサイトを客観的に見てみるとあることに気が付きました。

サイトの読み込み速度がめちゃくちゃ下がってるぅぅぅぅー

訪問者が記事を見やすいように画像を追加して、その画像をさらに見やすいようにプラグインを追加してってやってたらサイトの読み込み速度が下がっていたんです。

サイトの読み込み速度がSEOに影響するのは有名な話しですので、サイトの読み込み速度を改善するというSEO対策を施しました。

まずは自分のサイトのサイトの表示速度を計測

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

自分のサイトの読み込み速度がグーグルにとってどのように評価されているのかを調べる一つのツールとしてPageSpeed Insightsを使います。

モバイルとパソコンでの表示速度を数値化してくれるツールで、それぞれ100点満点での計測になります。

また、数値化してくれるだけでなく読み込み速度改善ポイントも教えてくれるので、その指摘に従ってサイトを改善していきます。

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

webサイトは基本的に縦長1ページ構成となっています。

そしてその1ページを上から順に読んでいき、スクロールして下へと読み進めていくわけです。

そして現在のwebサイトはデザインをJavaScriptやCSSという別のファイルで管理しています。
このJavaScriptとCSSのファイルを上から順番に処理していくことでサイトの読み込み速度を改善できるというわけです。

JavaScriptとCSSの最適処理としては、ワードプレスのプラグインによって簡単にSEO対策することができます。

使用するプラグインはHead Cleanerになります。

⇒ Head Cleanerダウンロードページ
※管理画面のプラグイン新規追加の検索窓からも追加できます。

Head Cleanerを有効化して下記のように設定していきます。
Head Cleaner設定

ブラウザのキャッシュを活用する

キャッシュとは、ブラウザが一度見たサイトのデータを一時的に保存する機能になります。

同じサイトを何度も訪問する時、一回一回サイトの画像やHTMLを読み込むとそれだけサイトの速度が低下しますが、一度キャッシュで記憶させてしまうことで次回からスイスイページ閲覧できるというわけです。

キャッシュを活用するには、.htaccess(ドットエイチティアクセス)ファイルにソースの追加をする必要があります。

.htaccessは、サーバー全体の下層ファイルに影響を及ぼすファイルになりますので、間違ったソースコードなどを追記しないように慎重に行ってください。

Xサーバーではサーバーパネルログイン後に.htaccessファイルが編集できます。
.htaccessファイル

.htaccessファイルに以下のソースを追記します。
[html]

ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 216000 seconds”
ExpiresByType application/x-javascript “access plus 216000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 216000 seconds”

[/html]
ついでにデータを圧縮して転送量を削減する以下のソースコードも追記してあげると、サーバーへの負担も軽くなるのでサイトの速度改善に繋がります。
[html]

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php

[/html]

画像を最適化する

サイトの表示速度に大きく影響を及ぼす原因が画像の読み込みです。

画像のファイルサイズが大きければ大きいほどサイトの表示スピードは下がります。
この画像を劣化させずに縮小させることができれば、サイトの表示速度がアップするというわけですね。

その為に、EWWW Image Optimizerプラグインを使用します。

EWWW Image Optimizerは、今までのアップロードした画像を一括して縮小してくれるプラグインです。

⇒ EWWW Image Optimizerダウンロードページ
※管理画面のプラグイン新規追加の検索窓からも追加できます。

有効化したら、管理画面のメディア>一括最適化を選択します。
EWWW Image Optimizer設定1

最適化されてない画像をスキャンする、を選択します。
EWWW Image Optimizer設定2

最適化を開始を選択します。
EWWW Image Optimizer設定3

PageSpeed Insights表示速度のビフォーアフター

《ビフォー》
モバイルビフォー
パソコンビフォー
《アフター》
モバイルアフター
パソコンアフター

SEOチェキ!でのビフォーアフター

無料SEO対策ツールSEOチェキ!でもサイトの読み込み時間が分かります。
⇒ SEOチェキ

《ビフォー》
SEOちぇきビフォー
《アフター》
SEOちぇきアフター

まとめ

今回私は、サイト作成に夢中になってサイトが重くなって、逆にユーザビリティーが悪くなり検索順位が下がるというなんともお粗末な結果となりました。

自分の作業に集中することは大切ですが、その作業が本末転倒な作業になっていないか、手を止めて客観的に作業分析をする時間を作るといいかもしれません。

サイトの速度低下に本当に気が付きませんでした。。。

特に画像を記事によく使われる方は注意して作業に励んでくださいね。