スポンサーリンク
目次
サイトスピードの高速化は必須






ワードプレスを運営しているとコンテンツの増加と共にサイトスピードが遅くなることがあります。サイトスピードが遅いとユーザーエクスペリエンスに深刻な影響をもたらします。1秒遅くなるだけで、ページビューが11%下がる、カスタマー満足度が16%下がる、コンバージョン率が7%下がるという結果が出ています。

良い記事を書いてもサイトスピードが遅いとせっかく訪れたユーザーを逃す原因になるので改善は必須科目と言えるでしょう。
下記画像は、サイトスピードを改善する前の、当サイトの画像になります。ページスピードが73%YSlow Scoreが57%、かなり劣悪な状態です。改善後はページスピードが94%YSlow Scoreが87%と改善することが出来たので、その方法を説明していきます。
サイトスピードを確認しよう

当サイトで利用しているスピードサイトを紹介していきます。当サイトではサイトスピードを複数利用してサイトスピードを確認しています。サイトによって偏りがあるので精査するためです。
GTmetrix
GTmetrixはGoogleのPage Speed InsightsとYahoo のYSlowのスコアを同時に計測することができるツールです。
タブを開くと遅くしている原因を表示してくれます。
Page Speed Insights
Page Speed Insightsはグーグルが開発したスピードサイトで当サイトが1番使用していたサイトです。
Page Speed Insightsはアルファベット順のシンプルな評価表示になりますが下にスクロールすると改善が必要な個所を表示されると共に改善方法を教えてくれます。
Pingdom
Pingdomは参考程度に使用していたサイトですが読み込み速度、リクエストにかかる時間をグラフにて表示してくれます。
Pingdomは元々ウェブモニタリングを行う企業だけあって、各解析は非常に信頼出来るものです。
集客に強いサーバー選び
自サイトを快適なスピードにするには、レンタルサーバー選びは必要不可欠で自サイトのデータを保管する家のようなものです。安いからといってスペックの低いサーバーを選ぶと、アクセスが集中した時にサーバーがダウンするなど安定したスペックの選定は非常に重要です。
最初に選んだサーバーの機能が低くて変更しようにも「サーバーの引っ越し作業」が発生して非常に手間なので最適なサーバー選びをお勧めします。

それでは、おすすめを3つほど紹介していきます。
エックスサーバー
1番のおすすめは当サイトも利用しているエックスサーバーです。利用している運営者も多くサーバーが安定していてトラブルの場合は夜間、土日祝でも24時間のメールで対応してくれます。
1番安いプランの「X10プラン」でも容量は200G、転送量/日は50G、マルチドメインは無制限、MYSQLは50個まで可能です。料金は初期費用3000円、月額1000円
もし容量が不足すればプランのアップグレードが可能です。個人サイトでは「X10プラン」で問題ないでしょう。他のサーバーと比べると高めになりますが、マイナス面はありません。
エックスサーバーで高速化
サーバーパネルから無料で高速化できるサービスがあります。
サーバーパネルにある「PHP高速化」と「mod_pagespeed」というメニューがあるので、その二つをONにするだけです。
PHP高速化(FastCGI化)はCPU処理が軽減され高速で処理できるようになります。

mod_pagespeed表示速度の向上、転送量の軽減により高速化が可能になります。
ヘテムル
高性能サーバーのヘテムル。
転送量も多く、複数のサイト運営に最適です。256GB、無制限のマルチドメイン、100個のDB国内最大級バックボーンとハイスペックサーバ
CPU 20コア 128GBメモリ搭載、オールSSD
料金は初期費用が4,266円で月/1,620円と割高になりますが、複数のサイト運営を視野に入れるならヘテムルがお勧めです。
X2
高性能と言われるエックスサーバーの上位版です。
他のサーバーでは制限があるマルチドメイン、MySQL、メールアカウントが無制限で利用できます。アクセスが大量集中しても安定性が抜群です。他のサーバーとは比較できない性能があります。その分、料金が高めに設定されています。
スポンサーリンク
初期費用が6,480円で月/1,944円となっています。
ブラウザキャッシュする
先ほど紹介したスピードサイトのPageSpeed Insightsではコンテンツの読み込みを速くする方法を教えてくれますが、その中に「ブラウザキャッシュを活用する」という項目があります。
これを設定するかしないかでは断然した方が処理速度が上がるので、速くするなら設定しましょう。当サイトでは10点近く点数がアップしたのでおすすめです。
「.htaccess」というフォルダーに書き込むのですが「.htaccess」はサーバーを制御する強力なフォルダーで記述を少しでも間違うと真っ白になります。ワードプレスなら管理画面に入れないという最悪の状態になるのでバックアップは必須となります。.htaccessはあなたのドメイン/public_html の直下にあります。
.htaccessに記述する
下記コードを記述していきます。このままコピペして下さい。
スポンサーリンク
# 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>
CSSの圧縮
CSSを圧縮することで読み込みを速くする方法で「Online JavaScript/CSS/HTML Compressor」を使えば簡単に圧縮が可能です。
このように圧縮したいCSSを貼ってCSSという所をクリックすると圧縮されます。
すると余計な段落もなくなり圧縮されたのがわかります。画面の右下には圧縮率も表示されます。
キャッシュプラグイン
当サイトはワードプレスで運営していますので、おすすめのキャッシュ系プラグインを紹介していきます。キャッシュ系プラグインは、とても利便性がいいですが逆にプラグインを入れた為に表示が崩れる、真っ白になるなどの不具合があるので、表示が崩れるといった症状が出ればプラグインは停止して下さい。
※インストールの方法は省略します。
WP Fastest Cache
インストール後にWP Fastest Cacheを開き設定します。デフォルトでは英語に設定されているので日本語に設定します。
設定画面の下にスクロールして下記画像のように「日本語」を選択して「Submit」をクリック。
日本語に変わったら下記画像のように全てチェックを入れます。基本的にはこれで設定は完了となります。
MO CacheとWP File Cache
ワードプレスは「日本語仕様」にするために翻訳ファイル「moファイル」に毎回アクセスします。この「moファイル」をキャッシュするプラグイン「MO Cache」です。「MO Cache」の機能を有効にするには「WP File Cache」も必要になりますので「WP File Cache」もインストールして下さい。
特に設定の必要は無く有効化するだけで効果を発揮してくれます。
Autoptimize
このプラグインは有効化するだけで設定は必要ありません。
画像の圧縮とプラグイン
サイトを運営していると多数の画像を使用して、知らず知らずのうちに容量が大きくなってサイトのスピードを落とす原因になります。
画像をアップするには直接アップするのではなく圧縮してからアップする方法を推薦します。
画像圧縮サイト
Optimizillaは圧縮したい画像をドラッグ&ドロップするだけで画像を圧縮してくれるので、とても重宝しているサイトです。
EWWW Image Optimizer
こえも有名なプラグインですが高機能でスピードアップに繋がり不具合とうもなく安定しています。
設定は下記画像のように進めて下さい。まずは基本設定をクリックします。
高度な設定をクリック
変換設定をクリックします。
これで設定は完了です。メディアに移動すると「一括最適化」というメニューが追加されているのでクリック。
「最適化されていない画像をスキャン」をクリックして「最適化を開始」をクリックして完了です。
Lazy Load
このプラグインは画像の読み込みを後回しにすることでサイトの表示スピードを上げるというプラグインです。ややこしい設定はないので「有効化」するだけでOKです。
WP-Optimize
データベースのクリーンアップと最適化ができるプラグインです。これも設定は不要です。
下記データの最適化が可能。
- 投稿の古いリビジョンのデータ
- 投稿の下書きのデータ
- スパム判定されたコメントのデータ
- 未承認コメントのデータ
- オプションの一時的データ
- 孤立したポストメタのデータ(カスタムフィールド)
- ピンバックのデータ
- トラックバックのデータ
CDNの利用
CDNとはコンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で簡単に言えばサーバーの間にCDNサーバーを設置することでサーバーへの負荷も下がり負荷を分散化することで高速化を図れるというもの。
CDNで有名なのがCloud Flare(クラウド・フレア)ですが不具合が起こる可能性があるという話を聞くので当サイトは利用していません。
簡単に利用出来るのは「JET PACK」のPhotonです。「JET PACK」の設定画面のこちらにチェックするだけで設定は完了です。
ソーシャルボタンをWEBフォントにする
ソーシャルボタンは画像で認識されるので読み込みに時間がかかります。WEBフォント化すれば画像ではなく文字として認識されるのでサイトスピードに効果があるそうです。
まだ当サイトはWEBフォント化はしていないのですが、いずれWEBフォントにする予定です。
スポンサーリンク