こんにちは、すこれおです。

 

あなたのサイトの表示速度って気にしたことありますか?

今回はWordpressサイトの表示速度を簡単に上げられるだけ上げてしまおうというお話です。

 

Googleの理念的に、表示速度の遅いサイトはそれだけで「ユーザビリティを損ねる」と判断されて掲載順位の低下を招いてしまう恐れが今後どんどん大きくなります。

 

とは言え記事を追加したりSEO対策を行ったりするのとは違い、直接集客に繋がる部分ではないので放置しがちですよね。

ぶっちゃけめんどくさい。笑

 

そこで、今回の記事では出来る限り簡単に、手っ取り早くサイトの表示速度を改善する方法をお伝えしてみたいと思います。

PageSpeed Insightsで現状を確認

まずは現状の表示速度を確認してみましょう。

PageSpeed InsightsというGoogleの用意してくれているサービスで簡単に測定することができます。

 

アクセスして、真ん中のURL欄に自分のサイトのURLを入力し、右側の「分析」をクリックしてみましょう。

=>PageSpeed Insights

page-speed-insight

 

モバイルとパソコンの測定結果が出てきます。

 

このサイトは既に対策済みの為90点という結構な高得点が出ていますが、多分何も気にしていない状態だと50とか60、下手したら40代とかではないでしょうか?

 

低い点数だからと言って嘆く必要はありません。

今回の記事に書いてあることさえやれば、少なくとも70点代ぐらいには伸びますし、Wordpressサイトなら余計なプラグインなんかを入れていなければ上記の画像みたいに90点ぐらいまでは伸びます。

 

それでは早速表示速度の改善に取り掛かっていきましょう。

表示速度の改善

主な対応内容は以下の通りです。

1.画像の圧縮

2.キャッシュの活用

3.Javascript読み込みの非同期化

 

プログラマとかIT系の職業でない限り、よく分からない項目もあるかもしれませんが、とりあえずこの先の手順で示す通りに作業すればスピードは改善できるのでご安心ください。

 

では順番にやっていきましょう。

1.画像の圧縮

サイトには色んな画像をアップしていることだと思いますが、画像はブラウザで表示する為にサーバーから読者のパソコンへ通信する必要があるので、それらのサイズが大きければ大きいほど、当然時間がかかります。

ネット上で見られる画像というのはさほど画質にこだわられることがないので、見た目に影響がないレベルで圧縮をかけておきましょう。

主な方法は2つあります。

EWWW Image Optimizerを利用する

EWWW Image Optimizerというプラグインがあります。

これものすごい便利なプラグインで、まずこのプラグインを入れた状態でアップロードした画像を自動で圧縮してくれます

 

なので僕らユーザは特に画像のサイズを意識せず、これからもどんどんアップロードしていって良いわけです。

 

じゃあ既にアップロードしてしまっている画像はどうするの?ということですが、ご安心を。

ちゃんと既にアップロード済みの画像も一度に圧縮してくれる機能があります。

 

順番にやっていきましょう。

 

まずはEWWW Image Optimizerのプラグインをインストールします。

インストールして忘れずに有効化したら、左メニューから「メディア => 一括最適化」をクリックします。

 

「最適化されていない画像をスキャンする」をクリック

 

「最適化を開始」をクリック

 

これだけです。

 

今までにアップロードした画像が多いと結構時間がかかるので、しばらく放置しておけばできあがりです。

画像を直接圧縮して上書きアップロードする

基本的にはEWWW Image Optimizerを使うだけで画像の圧縮はほとんど完了するのですが、一部処理しきれない画像(それも割り合い大きな)が残って、PageSpeed Insightsの提案欄から消えない場合があります。

 

既に十分点数は上がっていると思いますが、気になる方はこちらも圧縮しておきましょう。

 

まずPageSpeed Insightsで自分のサイトの表示速度を測ります。

で、画像の圧縮の問題がEWWW Image Optimizerだけで解決できていない場合、以下のような表示が出ます。

 

「画像を最適化する」の「修正方法を表示」を押下して、詳細を見てみてましょう。

 

すると、こんな感じでどのファイルが問題なのか?を具体的に示してくれます。

※マウスを詳細のところに乗せるとファイルのフルパスが表示されます。

 

問題となっているファイルが分かったら、FileZillaなどのFTPソフトでそのファイルを使っているパソコンに一時的に持ってきます。

 

で、持ってきたファイルは以下のサイトで圧縮してしまいましょう。

Tiny PNG

 

自分の持っているPNGやJPGのファイルを、アップロードするだけで50~80%ぐらい圧縮してくれる便利サイトです。

このサイトを使って圧縮した画像は、FTPソフトを使って再び元の場所に戻してやればOK。

 

これで画像に関する問題点は全部解消できます。

2.キャッシュの活用

画像の圧縮が終わったら、次はキャッシュの活用を行います。

 

キャッシュの活用ってどういうこと?っていうのも説明しようかと思ったのですが、ちょっと長くなるので別の機会に取っておきます。笑

 

とりあえずどうすれば良いかだけ、パパっと解説してしまいましょう。

 

まずは、「/[ドメイン名]/public_html」配下にある、「.htaccess」ファイルをローカルに持ってきます。

※例えば僕のこのサイトなら、「/scoleon.com/public_html」配下にあります

 

で、メモ帳なんかで「.htaccess」ファイルを開き、以下の内容をファイル末尾に追記します。

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType text/js "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 year"
#フォント
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#圧縮の設定
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
#フォント
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

※全部コピペでOKです

 

で、保存したら「/[ドメイン名]/public_html」配下のファイルに上書きしましょう。

※念のため、元々あった「.htaccess」ファイルはリネームしてバックアップしておくことをお薦めします。

 更新した後にサイトが表示できないなどあれば、すぐに元あったファイルに戻せるようにしておきましょう。

 

キャッシュに関してはこれだけです。

3.Javascript読み込みの非同期化

で、最後にJavascript読み込みの非同期化。

多分何言ってるか分からない人が大半だと思います。笑

 

この対策もプラグインで簡単にできるので、とりあえず細かいことは置いといて改善してみましょう。

Async JS and CSS」というプラグインを使います。

早速左メニューの「プラグイン=>新規追加」で検索し、インストール、有効化しましょう。

 

基本的には有効化しておくだけでOKです。

 

が、もしプラグインやテーマ付属の機能などで「目次の自動作成機能」のを使っている場合、このプラグインが原因で目次が作成されなくなる可能性があります。

その場合、以下の記事を参考にしてちゃんと目次が作成されるように対応しておきましょう。

=>賢威7で目次の自動生成がされない場合の対処法

まとめ

さて、今回のまとめです。

・サイトの表示速度は検索結果の掲載順位に関係してくる可能性がある為、改善しておくほうが好ましい

・その際対応しておくべきものは主に以下の3つ。

  1. 画像の圧縮
  2. キャッシュの活用
  3. Javascript読み込みの非同期化

 

特に1と3に関してはプラグインをインストールしてポチポチするだけで簡単にできるので、ぜひともやっておきましょう。

たぶん、これ全部やればPageSpeed Insightsのスコアも70~80ぐらいには上がっているはずですので。

 

それでは今日はこの辺で。

ではでは。


この記事が役に立ったならポチっと押してくださると嬉しいです!