ウェブサイトを高速化して-表示速度を改善する魔法のようなテクニック| テクワク

1 サイトスピードの高速化は必須
2 サイトスピードを確認しよう
3 集客に強いサーバー選び
4 ブラウザキャッシュする
5 キャッシュプラグイン
6 画像の圧縮とプラグイン
7 CDNの利用
8 ソーシャルボタンをWEBフォントにする

サイトスピードの高速化は必須

新しいデザインにしたから、イクミヤ君見てくれない？

どんなデザインか楽しみだな！

ちゃんと反映されている？

すごいカスタマイズしたね！でも、表示スピードが遅すぎるよ！これじゃ、誰も見に来ないよ

ホントだ！どうしたらいいんだい？

それじゃ、今から説明してくね！

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

ユーザーがインターネットで検索する時はスピードが命！遅いサイトは読んでももらえないし回遊率も低くなるよ。

良い記事を書いてもサイトスピードが遅いとせっかく訪れたユーザーを逃す原因になるので改善は必須科目と言えるでしょう。

下記画像は、サイトスピードを改善する前の、当サイトの画像になります。ページスピードが７３％YSlow Scoreが５７％、かなり劣悪な状態です。改善後はページスピードが９４％YSlow Scoreが８７％と改善することが出来たので、その方法を説明していきます。

サイトスピードを確認しよう

まずは自サイトのサイトスピードを確認しましょう。

当サイトで利用しているスピードサイトを紹介していきます。当サイトではサイトスピードを複数利用してサイトスピードを確認しています。サイトによって偏りがあるので精査するためです。

GTmetrix

GTmetrixはGoogleのPage Speed InsightsとYahoo のYSlowのスコアを同時に計測することができるツールです。

タブを開くと遅くしている原因を表示してくれます。

Page Speed Insights

Page Speed Insightsはグーグルが開発したスピードサイトで当サイトが１番使用していたサイトです。

Page Speed Insightsはアルファベット順のシンプルな評価表示になりますが下にスクロールすると改善が必要な個所を表示されると共に改善方法を教えてくれます。

Pingdom

Pingdomは参考程度に使用していたサイトですが読み込み速度、リクエストにかかる時間をグラフにて表示してくれます。

Pingdomは元々ウェブモニタリングを行う企業だけあって、各解析は非常に信頼出来るものです。

集客に強いサーバー選び

自サイトを快適なスピードにするには、レンタルサーバー選びは必要不可欠で自サイトのデータを保管する家のようなものです。安いからといってスペックの低いサーバーを選ぶと、アクセスが集中した時にサーバーがダウンするなど安定したスペックの選定は非常に重要です。

最初に選んだサーバーの機能が低くて変更しようにも「サーバーの引っ越し作業」が発生して非常に手間なので最適なサーバー選びをお勧めします。

アクセスが増えてもサーバーダウンしないレンタルサーバを慎重に選びましょう。

それでは、おすすめを３つほど紹介していきます。

エックスサーバー

１番のおすすめは当サイトも利用しているエックスサーバーです。利用している運営者も多くサーバーが安定していてトラブルの場合は夜間、土日祝でも２４時間のメールで対応してくれます。

１番安いプランの「X10プラン」でも容量は２００G、転送量/日は５０G、マルチドメインは無制限、MYSQLは５０個まで可能です。料金は初期費用３０００円、月額１０００円

もし容量が不足すればプランのアップグレードが可能です。個人サイトでは「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ではコンテンツの読み込みを速くする方法を教えてくれますが、その中に「ブラウザキャッシュを活用する」という項目があります。

これを設定するかしないかでは断然した方が処理速度が上がるので、速くするなら設定しましょう。当サイトでは１０点近く点数がアップしたのでおすすめです。

「.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」もインストールして下さい。

特に設定の必要は無く有効化するだけで効果を発揮してくれます。