WordPressでGoogle先生に高速化しろと言われた

  • このエントリーをはてなブックマークに追加

最近サイトが以前より記事が増えて重くなったなぁ・・・

そんな経験はありませんか?

気が付くと

記事数が増えて

画像が増えて

サーバーの容量も少なくなり・・・・

ブログの表示速度が遅くなっている!!!

WordPressだとサーバーから

読み込む速度もありますので余計に重くなっちゃいます。

例えば

シリウス等のソフトを使って作成しているサイトであれば

スピード感ありますよね。

サクサク動くんですよね。

でもWordPressは違うっ!

毎回読み込むから非常に重くなる。

画像をバンバン突っ込んでいくと重くて

表示スピードに数秒かかる事だってあります。

スポンサーリンク
レフタリング大

Google先生に遅いと怒られた

表示スピードはプラグインだけで十分だろ!

スピードアップ入れとけば何とかなるさ!

そう思ってました。

WordPressプラグインは厳選しよう!入れ過ぎは速度低下!
WordPressプラグインは厳選しよう!入れ過ぎは速度低下!
WordPressのプラグインを厳選してインストールする事でサイトが重くなる事を防いで高速化を図ります。便利なプラグインですが、あまり入れ過ぎると重くなります。最低限のプラグインを導入していきましょう。

以前の記事でも書きましたが

スピードアップ対策プラグインは

Speed Up – JavaScript To Footer 

を使用しています。

キャッシュ対策関係はプラグインで入れると

WordPress記事が消えて画面真っ白
WordPress記事が消えて画面真っ白
昨日待ちに待った商品をゲットしたので、ブログ書くしかない!と気合を入れて迎えた今日。 パソコンつけて スマホで取った画像処理...

こんな事になりますので

W3 Total Cache 

はトラウマになっています。

この状況で

Googleの速度チェックサイトで速度確認してみるか!

きっと画像も圧縮してるし早いはず!

と妙な自信の元にチェックしたら・・・・

見事に惨敗!

オレンジとか赤って・・・

緑が欲しかったです・・・

(信号と一緒で、黄色と赤はダメなのさ・・・)

速度確認に使ったサイトは、この3つです。

1、PageSpeed Tools

2、GTmetrix

3、think with Google

3つのサイトで

一番評価が高めに出るのが2つ目のサイトの様な気がします。

いつでも比較的高得点をたたき出していたのですが

気が付いたら60点前後まで落ちてました。

このままじゃダメだ!

と思ったものの・・・

CSSとか色々記述いじった方がいいのか

キャッシュ系プラグインを再度試した方がいいのか・・・

一度サイトを

真っ白表示にしている身としては

弄るのは果てしなく怖いです。

ですが!

どうせやるならサイトの評価を何処まででも高めてやろうじゃないの!

Googleさんも表示スピードは大事って言ってる事ですし何か対策してやる!

そも思い直して、とりあえずチャレンジです!

使用テーマはsimplicity2

このブログのテーマはsimplicity2を使用しています。

かなり使い易いテーマですし

SEO対策もバッチリですのでお気に入りで使用させてもらっています。

Simplicity
Wordpressテーマ「Simplicity(シンプリシティー)」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つの

更新の頻度も高めですのでオススメです。

ただ一つ問題が・・・

キャッシュ系プラグインとの相性が

とても悪いです。

今回速度を上げようとする上では

キャッシュ対策がどうしても必要になってきます。

相性の良いプラグインはないのか・・・

片っ端から試すにはエラーが怖すぎます。

いちいちバックアップとるのも、メンドクサイし

下手に、画面真っ白になったら

もう立ち直れませんっ

しかし!

神は見捨てなかった!

大変ありがたい手法を見つけることができました!

問題全部解決です!(笑)

コピペ1発で高速化

.htaccessへの記述になりますので

バックアップ必須の作業になります。

間違って1文字ずれただけで

真っ白化現象になるので

絶対にバックアップを取ってから

行ってください。

既に書いてある記述の後ろに付け足す形になります。

今回の記述は「ブラウザキャッシュとリソース圧縮の設定」です。

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
 Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
 Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
 AddType text/cache-manifest .appcache
 AddType image/x-icon .ico
 AddType image/svg+xml .svg
 AddType application/x-font-ttf .ttf
 AddType application/x-font-woff .woff
 AddType application/x-font-woff2 .woff2
 AddType application/x-font-opentype .otf
 AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
 <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
 Header set Cache-Control "max-age=604800, public"
 </FilesMatch>
 # プロキシサーバーが間違ったコンテンツを配布しないようにする
 Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
 ExpiresActive On

 # キャッシュ初期化(1秒に設定)
 ExpiresDefault "access plus 1 seconds"

 # MIME Type ごとの設定
 ExpiresByType text/css "access plus 1 weeks"
 ExpiresByType text/js "access plus 1 weeks"
 ExpiresByType text/javascript "access plus 1 weeks"
 ExpiresByType image/gif "access plus 1 weeks"
 ExpiresByType image/jpeg "access plus 1 weeks"
 ExpiresByType image/png "access plus 1 weeks"
 ExpiresByType image/svg+xml "access plus 1 year"
 ExpiresByType application/pdf "access plus 1 weeks"
 ExpiresByType application/javascript "access plus 1 weeks"
 ExpiresByType application/x-javascript "access plus 1 weeks"
 ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
 ExpiresByType application/x-font-ttf "access plus 1 year"
 ExpiresByType application/x-font-woff "access plus 1 year"
 ExpiresByType application/x-font-woff2 "access plus 1 year"
 ExpiresByType application/x-font-opentype "access plus 1 year"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE

 # 古いブラウザでは無効
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

 # 画像など圧縮済みのコンテンツは再圧縮しない
 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/js
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-httpd-php
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

これをコピペ1発でOK!!!

ビクビク、良い方法はないかー!って探してたのがウソのよう(笑)

追記の記述をしてサイトの表示にエラーがないか確認も行いました。

特段目立った変化はありません・・・

早くなった・・・・かも・・・?くらいです。

一応、先ほどの3サイトで結果を確認していきます。

失敗しているかもしれないな。

という思いが無いわけではありませんでしたが

淡い期待を込めます。

どうかスピード上がっていますように・・・

・・・・・・・・・・・・

・・・・・・・

・・・・・

キター!!!

結果は思ったよりも良好です!

まだまだ修正の余地はありそうですが

しばらくはなんとかなりそうです。

今後もサイトのスピードアップに取り組む形になりますが

問題は画像ですかね・・・。

プラグインだけでは圧縮に限界があるので

圧縮してからアップして再圧縮の手法でもそのうち試します。

今回参考にしたサイトはコチラ

Simplicity

もし無料のテーマでブログ運営を行うなら使い易いですよ。

もちろん

何かあった際には自分でサイトを修正していく必要がありますので

  • ある程度の知識がある人
  • 知識は無いけど、調べて自力解決が出来る人
  • 誰か教えてくれる人がいる人

こういった人達向けになるかと思います。

皆さんも自分のブログの速度チェックをしてみては如何ですか?

1、PageSpeed Tools

2、GTmetrix

3、think with Google

スポンサーリンク
レフタリング大
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レフタリング大