さくらのレンタルサーバ スタンダードプランでのWordPress高速化

本ページはプロモーションが含まれています。

使用しているWordpressテーマ

2011年にWordpressでの運用に切り替えてからしばらくは標準テーマの「Twenty Twelve」をカスタマイズしてしばらくの間、使用させて頂きました。その後、色々と悩みながら標準テーマ「Twenty Fifteen」を2016年5月まで使っていましたが、SNSボタンのカスタマイズが面倒でSNSボタンがカスタマイズ済みのテーマを探していたら、現在使用させて頂いている「Simplicity」テーマにたどり着きました。

WordPressのテーマをSimplicity2に変更しました弊社サイトのWordpressテーマをTwenty FifteenからSimplicity2に変更致しました。モバイル端末からの閲覧数が増加しているので、よりモバイル端末での閲覧性を向上させる為にSimplicity2を導入してみました。www.kojima-life.co.jp

WordPressをレスポンスよく動作させるにはテーマもすごく大事で、しっかりとカスタマイズされたテーマに変更するだけでかなりの高速化が期待できます。

「Simplicity」はカスタマイズしやすいよくできたテーマです

「Simplicity」はシンプルでカスタマイズしやすく、作者のわいひら氏が常時新機能やバグの修正などをして、次々に新しいバージョンをリリースされております。また、機能追加の要望や不具合報告のフォーラムがしっかりと確立されていて、作者のわいひら氏もご多忙にもかかわらず投稿に目を通して回答されているのに好感が持てました。

WordPress公式には登録されておりませんが、Wordpressテーマの範疇を超えてしまっているので登録できないのだと思っておりますが、殆どカスタマイズすること無くそのままテーマを適用してすぐに使い始めることができる位、シンプルですがよくできたテーマだと思います。ご興味のある方はこちらからご覧ください。

Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。wp-simplicity.com

今までプラグインで追加していた機能がSimplicityには適用されているので、インストールして使用していたプラグインの数が数個少なくなりました。プラグインの数が多いとWordpressの動作ももっさりしてきてしまうのでWordpressの高速化に繋がりますね。

Simplicityの設定（抜粋）

Simplicityの特徴の一つ、テーマのカスタマイザーで色々な機能が実装できます。弊社Webサイトが設定しているWordpressの高速化に関係しそうな設定項目を抜粋しました。

色

色はカスタマイザーを使用せずにCSSに直接記述して設定しています。

ヘッダー

タイトルテキストをロゴ画像に変更しています。

画像

Lazy Loadを有効にして、エフェクトは無効のままにしています。

【Lazy Loadで読み込むタイミング】

200px手前に設定しています。

【画像リンク拡大効果のタイプ】

拡大効果なしで、モバイルでも拡大効果を使いたかったのでプラグイン「Responsive Lightbox」で拡大効果を実装しています。

Responsive Lightbox & Gallery – WordPress plugin | WordPress.orgThe most popular lightbox plugin and responsive gallery builder for WordPress.wordpress.org

ブログカード(内部リンク)(外部リンク)

内部リンクと外部リンクの両方とも有効化しています。

AMP（β機能）

AMP(Accelerated Mobile Pages)も有効化するとプラグイン無しでとそのままAMP対応となるので設定しています。

有効にしただけでは通常ページからAMPページへ link rel=”amphtml” が設定されないので、Simplicity子テーマ内の「header-insert.php」に

<?php if(is_amp_enable() && is_single()): ?>
<link rel="amphtml" href="<?php echo get_permalink(); ?>?amp=1"/>
<?php endif; ?>

を記述して、GooglebotにAMPページをクロールしてもらうようにしました。

AMPについてはこちらの記事を参考にさせて頂きました。

AMP対応したページだけをGoogleに公開しても問題なし、別URL構成のモバイルサイトではPC向けページにrel=amphtmlを設置AMPページを単独で公開することが可能。一般的には、通常のウェブページがありそれに対応するAMPページを作るが、このペアは必須ではない。また、別URL構成でモバイル対応している場合は、PC向けページに rel=amphtml を設置する。www.suzukikenichi.com

.htaccessの記述

ブラウザキャッシュの設定やリソースの圧縮をプラグインを使わずに.htaccessに記述して設定します。ブラウザキャッシュとリソースの圧縮を設定することでかなりの高速化ができます。

Simplicityの作者わいひら氏の記事を参考にさせて頂きました。

コピペ一発でSimplicityを結構高速化する方法Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。たったこれだけのことですが、かなりの高速化が図れます。例、Simplicityに今回wp-simplicity.com

# 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>

次のページでは弊社Webサイトで実際に使用しているWordpressプラグインをご紹介致します。