Webの記録

WordPressサイトで表示高速化をいろいろやってみた。

投稿日:

この記事は約 7 分で読めます。

time_mini
スマホなどでWebページを閲覧するようになって、表示が遅いサイトはせっかくアクセスしても表示されないまま諦めてしまうことが多々あります。
Googleが検索結果の順位を決定するのにこの表示速度も含めていることから、ユーザビリティ面だけでなく、SEO的にも、表示速度の高速化は必要になっています。
そんなことから、私がちょっと試してみたコトをメモとして残します。(後半はWordPressプラグインを使用します)


やってみたこと

  1. 表示速度を測定してみる
  2. HTML、CSS、JSを縮小する
  3. キャッシュを利用する
  4. gzip圧縮してみる
  5. Enable Keep-Aliveの設定
  6. 画像を最適化する
  7. SNSアイコンなどの表示を見直す
  8. JetPackプラグイン「Photon」を利用してみる


1.表示速度を測定してみる

まずはサイトの表示速度を測定してみます。
私が使ってみたのは、以下の2つです。

PageSpeed Insights

PageSpeed-Insights
Googleが提供している無料ツール。URLを入力するだけで、パソコンとモバイルの両方について測定してくれる。
ここで改善すべき部分まで細かく指摘してくれるので、1つずつ改善していくと表示速度が上がる。

GTmetrix

gtmetrix
無料ツール。URLを入力するだけで測定してくれる。
細かな項目で1つずつ採点してくれるだけでなく、YSlow、Timeline、Historyのタブでは別角度で見ることができる。

2.HTML、CSS、JSを縮小する

cssで「@import」を使用することは止めた方が良いようです。採点項目に入っています。
「HTML、CSS、JSを縮小する」は無駄なコメントや空白、改行を減らすことです。
cssとjsを縮小するツールは、以下のものを使用しました。

compressor

compressor
cssやjsのコードを「1.paste」の枠内に貼りつけます。
「2.click」で「basic compress」か「powerful compress」を選択します。
(「basic compress」はコメントなどを削除しているけれど、まだ見た目は通常のcssの状態。「powerful compress」は、改行が全て消されて1行に複数行のコードが書かれている状態。メンテナンスが多い場合は「basic compress」の方をオススメします。)
「3.copy」で圧縮後のコードが出るので、それをコピーしてファイルに貼りつけます。
※時々、縮小するとWebサイトの表示が崩れてしまうことがあります。その場合は、縮小しない方が良いかもしれません。

3.キャッシュを利用する

以下の記述を.htaccessにそのまますると、「PageSpeed Insights」で2ポイントアップしました。
キャッシュする日数は、修正する可能性が多いものはなるべく短めに設定。他は長くても良いかと思います。

# ブラウザキャッシュ
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/x-icon "access plus 30 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"


4.gzip圧縮してみる

以下の記述を.htaccessにそのまますると、「PageSpeed Insights」で8ポイントアップしました。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
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
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
</IfModule>


5.Enable Keep-Aliveの設定

以下の記述を.htaccessにそのまますると、「PageSpeed Insights」で2ポイントアップしました。

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>


6.画像を最適化する

最適化ツールで容量が軽くなった画像をアップし直したら、「PageSpeed Insights」で9ポイントアップしました。
ここがボトルネックになっていたことが、よく分かりました!
最適化に使ったツールは、以前書いた記事「画像最適化に便利な4つのツール」の分を使用しました。
今回WordPressのオリジナルテーマで試してみて、1~6まで改善しただけで「PageSpeed Insights」の数値が71から92までにするコトができました。

7.SNSアイコンなどの表示を見直す

コンテンツに関係ないSNSアイコンやFacebookのLikeboxが意外と重かった!!ってコトがよくあります。
無くてもOKな場合は思い切ってバッサリ削除。あった方が良いな・・・という場合は、自作したり、読み込み遅延させたり。Webフォントなど利用するというコトもできます。
シンプルなものにすると、とても軽くなります。

8.JetPackプラグイン「Photon」を利用してみる

jetpack
WordPressの場合、オリジナルテーマでなく既成のテーマだったりすると、改善項目のうちなかなかできない部分もあったりするので、JetPackプラグイン「Photon」を利用してみると良いかもしれません。
私もこのプラグインを使ってみると、かなり数値が改善しました。
Automattic製のプラグインなので、信用度は高いですね。最初にJetPackプラグインと連携する部分が面倒ですが、JetPack自体はいろいろ便利な機能もあるので、試しても良いかも。

参考サイト

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ6【single.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今のところ、「index.php」「header.php」「sidebar.php」「footer. …

no image

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …

no image

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

WordPressのオベンキョウ②

今日は、プラグインを準備してみました。