今までWordPressの高速化を行ってきましたが、私が対策を打ってきた中で効果のある高速化対策の全体を分かりやすくまとめたいと思います。特にNewspaperのユーザーにとって＋αとなる設定についても記載しています。
WordPressを高速化するメリットとしては以下になります。デメリットはAMPとの2重管理の点以外は特にありませんので、皆さんもメリット享受のためぜひやってみてください。
メリット
- 速度向上によるユーザビリティ向上
- 上記による離脱率減少
- Googleからの評価上昇による検索ランキングの向上
これらのメリットを得るための対策を以下にまとめます。
画像関係
画像の圧縮・リサイズ
画像のサイズが大きい、また大きさがブログの幅を超えている場合、無駄にネットワークのペイロードを消費しているため、圧縮したり、リサイズすることが必要です。
WordPressの「EWWW Image Optimizer」のプラグインを使用することで、自動的にリサイズし、画像を圧縮してくれます。
Lazy-Loadの有効化
Lazy Loadは画像をページ読み込み時ではなく、遅延させてページ送りなどの表示時に読み込む技術のことで、ページ表示の時に画像をすべて読み込みせずに済みます。そのため初期表示が早くなります。
私が使用しているNewspaper 10のテーマにはLazy Load機能が付属しています。「Theme Panel」→「Template Setting」→「Image Loading」の「USE LOADING ANIMATION IMAGE」をOnにすることで使用することができます。
その他の方はこの後紹介する「Autoptimize」の設定から「画像」タブの「Lazy-load images?」を有効化します。
JavaScript・CSS・HTMLの最適化
JavaScript・CSS・HTMLの圧縮と最適化
HTML・JS・CSS等のソースコードは通常は改行や空白、タブ、コメントアウトなどが入っており、通信容量が増加したり、コード自体が分散して配置されていることによる速度遅延等、WEBサイトの速度低下の原因となります。
HTML・JS・CSS等のソースコードの改行や空白、タブ、コメントアウトなどの不要コードを削除したGZip圧縮ファイルを作成し、既存のソースコードに影響を与えずにコードの最適化を行ってくれるプラグインを紹介します。
こちらの記事の「Autoptimize」のプラグインを使用することで、HTML・JS・CSS等のソースコードの最適化と圧縮を行ってくれます。
Font Awesomeの削除
テーマでアイコンを使用するには、Font Awesomeプラグインを使用する必要があります。多様なアイコンがあり、全てを使用することがないため、使用していないアイコンをロードしても意味がありません。
テーマ全体の様々なパーツにこれらのアイコンの一部が必要です。そのためFont Awesomeのアイコン取得の関数にフィルターを追加して、必要なものだけをロードします。
方法としては次のコードをテーマのfunctions.phpファイルに挿入します。
// 必要なFonts Awesomeのみロード
add_filter( 'infophilic_fontawesome_essentials', 'infophilic_fontawesome_essentials' );
function infophilic_fontawesome_essentials()
{
return true;
}Code language: JavaScript (javascript)絵文字を削除する
WEBサイトで絵文字を使用していない場合は、絵文字をロードする必要はありません。そのためテーマのfunctions.phpに次のコードを追加することで削除できます。
// 絵文字の削除
add_action( 'init', 'infophilic_disable_wp_emojicons' );
function infophilic_disable_wp_emojicons()
{
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}Code language: JavaScript (javascript)他の関数を削除する
Newpaper 10のテーマには埋め込み関数が組み込まれているため、WordPressの埋め込み関数を使用する必要はありません。テーマのfunctions.phpファイルの最後に次のコードを追加して、登録を解除することをおすすめします。また、サーバーへのHTTP要求も削減されます。
// WP埋め込み関数の削除
function infophilic_stop_loading_wp_embed() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
}
}
add_action('init', 'infophilic_stop_loading_wp_embed');Code language: JavaScript (javascript)キャッシュ
キャッシュとはページを静的HTMLとして保存し、ユーザーがリクエストを行うと、ページはキャッシュから配信されます。
このキャッシュを表示することでコンテンツ表示の速度が向上し、ユーザーエクスペリエンスの向上を図ることが可能になります。
キャッシュの種類はブラウザキャッシュ、ページキャッシュ、データベースキャッシュ、オブジェクトキャッシュ等あります。
ブラウザキャッシュ
まずはブラウザキャッシュです。.htaccessにExpireヘッダーを追加することで、ブラウザでどの程度の期間ファイルのキャッシュを残すかを設定することができます。
FTP等でWordPressの直下にある「.htaccess」のバックアップを取り、以下の内容を追加します。
# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/svg+xml "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType image/webp "access plus 604800 seconds"
ExpiresByType font/truetype "access plus 604800 seconds"
ExpiresByType font/opentype "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-font-woff "access plus 604800 seconds"
ExpiresByType application/x-font-opentype "access 604800 seconds"
ExpiresByType application/x-font-ttf "access plus 604800 seconds"
ExpiresByType application/vnd.ms-fontobject "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
# END Expire headers
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-woff
</IfModule>
# END HAND WRITECode language: PHP (php)ページキャッシュ
ページキャッシュのプラグインには色々なプラグインがありますが、「Autoptimize」と相性のいいプラグインが「Cache Enabler」です。
「WP Super Cache」と比較しましたが、こちらのプラグインの方が、GoogleのPageSpeed Insightで高スコアを得ることができました。
以下の記事の後半で「Cache Enabler」の導入方法を説明しています。
CDN導入
Cloudflare（クラウドフレア）は無料のCDNで、ウェブサイトのすべてのリソースをキャッシュし、世界中にある分散サーバーからユーザーにコンテンツを配信します。このCDNの機能によりWEBサイトの読み込み時間を短縮することが可能です。
Cloudflareのセットアップ方法は以下の記事で説明しています。
モバイル最適化
AMP対応
Newspaper 10のテーマにはAMPのプラグインが提供されています。「tagDiv Mobile Theme」と「Official AMP for WP」を導入することで、モバイルに最適化されたテーマテンプレートでAMPの表示を行うことが可能です。
AMPの有効化は「Theme Panel」→「MOBILE THEME」→「Mobile settings」の「USE MOBILE THEME FOR:」を「AMP」、または「Mobile+AMP」とすることで設定可能です。
その後管理パネルから「AMP」を選択し、「Traditional」を選択してください。AMPと通常のテーマの２つのテーマの管理となりますが、高速化することが可能です。
モバイルアクセス時のAMPへの誘導
モバイル端末からのアクセス時はGoogle検索やTwitter等からアクセスした場合、AMPのページに誘導されます。一方でダイレクトやAMPへの誘導を行わないリンクの場合、通常のサイトにアクセスするため、モバイル最適化されておらずページ表示の速度が遅くなります。
そこで.htaccessの設定でモバイル端末でのアクセス時はAMPのページにリダイレクトすることが必要です。以下のリダイレクト設定を.htaccessに追加します。
# BEGIN HAND WRITE
<IfModule mod_rewrite.c>
RewriteBase /
# botからのアクセスの場合はURLを書き換えない
RewriteCond %{HTTP_USER_AGENT} !(bot|Mediapartners-Google|APIs-Google) [NC]
# 対象のURLがファイルの場合はURLを書き換えない
RewriteCond %{REQUEST_FILENAME} !-f
# 対象のURLがwp-で始まる場合はURLを書き換えない（WordPressの管理画面）
RewriteCond %{REQUEST_FILENAME} !^wp-.*?
# 対象のURLがmode=pcの場合はURLを書き換えない
RewriteCond %{QUERY_STRING} !mode=pc
# クエリ文字列(?の後ろの文字)がampの場合はURLを書き換えない
RewriteCond %{QUERY_STRING} !amp
# iPhone、Android、Windows Phoneからのアクセスの場合、書き換え対象とする
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
# URLの末尾に?ampを追加する
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1?amp [NE,QSA,R,L]
</IfModule>
# END HAND WRITECode language: PHP (php)以下のページでリダイレクトの設定関係を詳しく説明しています。
不要なプラグインの削除
現在のモバイルテーマは、Multi Purpose StyleとNewsletter Styleをサポートしていません。そのためこれらのプラグインによってロードされているスクリプトを削除します。
以下のパスにモバイルテーマのfunctions.phpファイルがあります。
/wp-content/plugins/td-composer/mobile/
次のコードをモバイルテーマのfunctions.phpファイルに追加します。
※モバイルテーマを無効にしていない場合にのみ使用してください。
// Remove Multi Purpose Style
add_action( 'wp_enqueue_scripts', 'infophilic_remove_multi_purpose', 20 );
function infophilic_remove_multi_purpose() {
wp_dequeue_style( 'td-plugin-multi-purpose' );
}
// Remove Newsletter Style
add_action( 'wp_enqueue_scripts', 'infophilic_remove_newsletter', 20 );
function infophilic_remove_newsletter() {
wp_dequeue_style( 'td-plugin-newsletter' );
}Code language: JavaScript (javascript)Newspaperのフォントの事前ローディング
フォントを事前にローディングすると、Webサイトでのフォントのロード時間が短縮されます。
モバイルテーマのfunctions.phpファイルに次のコードを追加して、Newspaperのフォントをプリロードをさせます。
// Newspaper フォント事前ローディング
function dns_prefetch_mobile() {
echo "<link href='https://ドメイン/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?8' rel='preload' as='font' type='font/woff' crossorigin>";
}
add_action( 'wp_head', 'dns_prefetch_mobile', 0 );Code language: PHP (php)まとめ
以上で、すべての設定は完了です。PageSpeed InsightやGTMetrix.comを使用してあなたのサイトの速度をチェックしてみてください。元々の速度より大きく改善しているかと思います。
皆さんもWEBサイトのページ表示速度を向上し、ユーザビリティや離脱率低減、検索ランキングの向上を図ってみてください。
