こういった疑問に答えます。
本記事を書いている僕は、「AFFINGER6を購入して特典付きレビュー」をしています。
実際に使用したからこそ、過去にはAFFINGER6の高速化について悩んだことがあります。
しかし、今ではAFFINGER6の高速化に成功し、記事の執筆に専念できています。
本記事をPageSpeed Insightsで測定すると、モバイルの表示速度は「92点」・パソコンの表示速度は「99点」です。
モバイルの表示速度は92点
パソコンの表示速度は99点
まずは、サイトの表示速度を高速化するメリットからご紹介します。
目次
- そもそもサイトの表示速度を高速化するメリットは？
- まずは実際に表示速度を確認してみよう！
- AFFINGER6で作ったサイトを高速化する9つの方法
- ①HTML＆CSS、JSのコードを最適化【Autoptimize】
- ②画像の遅延読み込み【Autoptimize】
- ⓷画像のファイルサイズを圧縮【EWWW Image Optimizer】
- ④キャッシュプラグインを使用する【W3 Total Cache】
- ⑤defer属性によるスクリプトの非同期読み込み【Async JavaScript】
- ⑥Font Awesomeアイコンの遅延読み込み【functions.phpへの追記】
- ⑦スライドショーのCSSとJSを削除【functions.phpへの追記】
- ⑧TwitterとInstagramの埋め込みを遅延読み込み【functions.phpへの追記】
- ⑨Contact Form7のファイルを必要な場合だけ読み込む【functions.phpへの追記】
- AFFINGER6の設定にある「表示速度優先（β）」ってどうなの？
- まとめ
そもそもサイトの表示速度を高速化するメリットは？
そもそもサイトの表示速度を高速化するメリットは主に次のとおりです。
- ユーザー体験の向上するから
- SEO対策として重要だから
1つずつ解説していきますね。
ユーザー体験の向上につながる
まず、ユーザー体験の向上につながります。速ければ速いほど高いユーザー体験を提供できます。
Googleの調査（Find out how you stack up to new industry benchmarks for mobile page speed）によると、モバイルページの表示速度が1秒から5秒になるだけで直帰率は90％増加します。
つまり、記事が表示されるまえにブラウザバッグされたり、あなたの書いた別の記事を読みたいとは思わなかったりするのです。
あなたも表示の遅いサイトをブラウザバックして、別のサイトを閲覧した経験があることでしょう。
どれだけSEO対策しても、どれだけ良いコンテンツを作っても、悪いユーザー体験を提供していればきちんと閲覧されません。
良質なコンテンツを生み出すのはもちろん、ユーザー体験の向上に向けて取り組むことも重要なのです。
SEO対策として重要
2つ目に、SEO対策として重要です。モバイルページの表示速度は、検索順位に直接影響しています。
これは、Googleウェブマスター向け公式ブログの「ページの読み込み速度をモバイル検索のランキング要素に使用します」で正式に伝えられていることです。下記は一部抜粋です。
検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。研究（英語）では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。 読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
つまり、パソコンページの表示速度が速いからといって満足してはいけません。重要なのはモバイルページの表示速度です。
すでにサイトを運営している人はお分かりだと思いますが、最近はパソコンで検索するユーザーよりもモバイルで検索するユーザーのほうが多いですよね。
だからこそ、パソコンではなくモバイルの表示速度が重要視されているのです。
ここまでの内容で、サイトの表示速度を高速化すると、SEO対策として効果があるとお伝えしました。しかし、高速化するだけで検索順位1～2位を取れるわけではありません。
最も重要なのはコンテンツの質であることを忘れないでください。コンテンツの質が同等のページが存在したときに、高速なページのほうが有利というくらいです。
まずは実際に表示速度を確認してみよう！
高速化施策を実施するまえに、現状のページ速度を確認しましょう。
高速化施策を実施したことによって、どれだけ高速化されたかを確認するべきです。
- 事前にPageSpeed Insightsでトップページや記事の表示速度を測定
- 本記事で紹介する高速化施策を実施
- 再度、PageSpeed Insightsでトップページや記事の表示速度を測定
- 効果の有無を確かめる
9つの高速化施策を実施してから効果を確かめてもいいですが、1つずつ効果を確かめるほうが間違いなく作業を進められるのでおすすめです。
AFFINGER6で作ったサイトを高速化する9つの方法
ここからは、AFFINGER6で作ったサイトを高速化する9つの方法を解説していきます。
箇条書きにすると、次のとおりです。
- HTML＆CSS、JSのコードを最適化【Autoptimize】
- 画像の遅延読み込み【Autoptimize】
- 画像のファイルサイズを圧縮【EWWW Image Optimizer】
- キャッシュプラグインを使用する【W3 Total Cache】
- defer属性によるスクリプトの非同期読み込み【Async JavaScript】
- Font Awesomeアイコンの遅延読み込み【functions.phpへの追記】
- スライドショーのCSSとJSを削除【functions.phpへの追記】
- TwitterとInstagramの埋め込みを遅延読み込み【functions.phpへの追記】
- Contact Form7のファイルを必要な場合だけ読み込む【functions.phpへの追記】
AFFINGER6を使用している当ブログでは、上記のような方法で高速化しています。
お問い合わせフォームを簡単に作れるプラグイン「Contact Form7」を使用していない場合、9番目の高速化は不要です。
それでは解説していきますね。
①HTML＆CSS、JSのコードを最適化【Autoptimize】
まず、HTML＆CSS、JSのコードを最適化します。
使用するプラグインは「Autoptimize」です。
- WordPressの管理画面を開く
- 左メニューから「プラグイン」を選択
- 上部にある「新規追加」を選択
- 検索欄にプラグイン名（Autoptimize）を入力
- 「今すぐインストール」を選択して有効化する
上記の方法でAutoptimizeを有効化できたら、Autoptimizeの設定を開いてください。
JavaScpriptの最適化からしていきます。
- JavaScpriptコードの最適化
- JSファイルを連結する
Autoptimizeの設定画面（JS編）
「JavaScpriptコードの最適化」「JSファイルを連結する」にチェックを入れてください。
- CSSコードの最適化
- CSSファイルを連結する
- インラインのCSSも連結
Autoptimizeの設定画面（CSS編）
「CSSコードを最適化」「CSSファイルを連結する」「インラインのCSSも連結」にチェックを入れてください。
- HTMLを最適化
Autoptimizeの設定画面（HTML編）
②画像の遅延読み込み【Autoptimize】
次に、画像の遅延読み込みをAutoptimizeで行います。
遅延読み込みとは、Webサイト上の画像をすぐに読み込まず、画面領域内に現れるタイミングで読み込みを開始する技術です。
- 画像の遅延読み込み（Lasy-Load）を利用
Autoptimizeの設定画面（LasyLoad編）
「画像の遅延読み込み（Lasy-Load）を利用」にチェックを入れてください。
⓷画像のファイルサイズを圧縮【EWWW Image Optimizer】
続いて、画像のファイルサイズを圧縮しましょう。
使用するプラグインは「EWWW Image Optimizer」です。
JPG・PNG画像をGoogleが開発した画像フォーマット”WebP”に変換できます。拡張子を「.webp」です。
WebPは、JPG画像よりも約25～34％、PNG画像よりも約26％ほど軽くできるといわれています。（https://developers.google.com/speed/webp）
EWWW Image Optimizerは、「WebP変換」という設定項目にチェックを入れればOKです。
Autoptimizeではなく、EWWW Image Optimizerでも画像の遅延読み込みができるので、ご自身のサイトに合うほうを選びましょう。（両方のプラグインで、画像の遅延読み込み機能を有効化にするのはNGです。）
④キャッシュプラグインを使用する【W3 Total Cache】
4つ目は、AFFINGER6を利用するなら重要なキャッシュについてです。
当ブログは、3つのキャッシュプラグインを試しましたが、最も安定して有効だったのは「W3 Total Cache」でした。
- W3 Total Cache
- WP Fastest Cache
- WP-Optimize
WP Fastest Cacheは、AFFINGER6との相性がよくありません。PCページとモバイルページをキャッシュしようとすると、サイトのデザインが崩れてしまいます。
有料版（約5,000円）を購入すれば、サイトのデザインを崩さずに表示できますが、それならW3 Total Cacheを選びましょう。
また、WP-Optimizeは設定できる項目が少なく、細かな設定ができず融通が利かなかったので使用をやめました。
さらに、AFFINGER6には、W3 Total Cache専用の設定項目があります。
AFFINGER6設定画面（W3TC専用の設定項目）
この設定項目があることによって、PCページとモバイルページをキャッシュしても、サイトのデザインを崩さずに表示できます。
W3 Total Cacheを使用する際には、必ずこの設定項目にチェックするのがおすすめです。
それでは、W3 Total Cacheの設定を解説します。設定項目が多いので、箇条書きしたチェック項目と画像を照らし合わせてチェックしましょう。
- ページキャッシュ：有効化
- データベースキャッシュ：有効化
- Object Cache：有効化
- ブラウザーキャッシュ：有効化
- その他>書き換えルールを確認
「Google Page Speedダッシュボードウィジェットを有効化」にチェックが入っていた場合には外すことをおすすめします。
- フロントページをキャッシュ
- Cache SSL（HTTPS）requests
- ログイン済みユーザーに対してページをキャッシュしない
- Page Cache：フロントページ・投稿ページ・ブログフィード・rss2 (default)
- ログインユーザーのクエリをキャッシュしないでください
- Last-Modifiedヘッダーを設定
- Expiresヘッダーを設定
- キャッシュ制御ヘッダーを設定
- エンティティタグ（ETag）を設定
- HTTP（gzip）圧縮を有効化
- グループ名：tablets>有効化
- グループ名：phones>有効化
上記のW3 Total Cache設定によって、表示速度が大きく改善されるのでぜひお試しください。
⑤defer属性によるスクリプトの非同期読み込み【Async JavaScript】
5番目の高速化施策は、「Async JavaScript」を使用したスクリプトの非同期読み込みです。
- Enable Async JavaScpript?
- Also enable Async JavaScript for logged in users?
- Also enable Async JavaScript on cart/ checkout pages?
上記の3点にチェックを入れたら、下記画像のとおり「Async JavaScript Method」「jQuery」のMethodを”Defer”にしてください。
Async JavaScriptの設定画面
このままでは、AFFINGER6の一部機能が正常に動作しなくなる（スライドボックスが開かなくなる等）ので、下記画像のとおり「Script Exclusion」に「jquery.min.js」と記述してください。
Async JavaScriptの設定画面（Script Exclusionに「jquery.min.js」を記述）
⑥Font Awesomeアイコンの遅延読み込み【functions.phpへの追記】
ここまでの内容で、大きな効果のある高速化施策は終わりました。ここから先は、”少しでも速いWebサイトを作りたい”という人向けです。
6番目の高速化施策は、AFFINGER6で使用している「Font Awesomeアイコン」を遅延読み込みする方法です。
「WING（Affinger5）でFont Awesomeアイコンを遅延読み込みさせて高速化」という記事を参考に実施した施策になります。
if ( !defined( 'ABSPATH' ) ) {
exit;
}
の下に追加コードを記述します。
functions-phpの編集画面
functions.phpに記述するコードは下記のとおり。
functions.php
// font awesome アイコンを読み込まない（JavaScriptで遅延読み込みさせるため）
function deregister_styles_font_awesome() {
wp_deregister_style( 'font-awesome' );
wp_register_style( 'font-awesome', '' );
wp_deregister_style( 'font-awesome-animation' );
wp_register_style( 'font-awesome-animation', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_font_awesome' );
// 遅延読み込みのJavaScriptをインラインで挿入
function lazy_load_css() {
echo '<script>
function lazyLoadCSS() {
var fontawesome = "' . get_template_directory_uri() . '/css/fontawesome/css/font-awesome.min.css";
var fontawesomeAnimation = "' . get_template_directory_uri() . '/css/fontawesome/css/font-awesome-animation.min.css";
function addStyleHead(href) {
var link = document.createElement("link"); link.rel = "stylesheet";
link.href = href;
document.head.appendChild(link);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) {
raf(function (){
addStyleHead(fontawesome);
addStyleHead(fontawesomeAnimation);
});
} else {
window.addEventListener("load", function(){
addStyleHead(fontawesome);
addStyleHead(fontawesomeAnimation);
});
}
}
lazyLoadCSS();
</script>';
}
add_action('wp_footer', 'lazy_load_css');
コピペした貼り付けるだけでOKですが、念のためにバックアップを取ってから作業しましょう。
⑦スライドショーのCSSとJSを削除【functions.phpへの追記】
7番目の高速化施策は、AFFINGER6のスライドショーに関するCSSとJSを削除する方法です。
「WING（Affinger5）でスライドショーのCSSとJavaScriptを削除する方法」という記事を参考に実施した施策になります。
こちらの高速化施策を行うと、当然ながらスライドショー機能は使えなくなります。スライドショー機能を使用していないAFFINGER6利用者のみ実施しましょう。
functions.php
// スライダーのCSSを読み込まない設定
function deregister_styles_slick() {
wp_deregister_style( 'slick' );
wp_register_style( 'slick', '' );
wp_deregister_style( 'slick-theme' );
wp_register_style( 'slick-theme', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_slick' );
// スライダーのJavaScriptを読み込まない設定
function deregister_script_slick() {
wp_deregister_script( 'slick' );
wp_register_script( 'slick', '' );
}
add_action( 'wp_print_scripts', 'deregister_script_slick' );
コピペした貼り付けるだけでOKですが、念のためにバックアップを取ってから作業しましょう。
⑧TwitterとInstagramの埋め込みを遅延読み込み【functions.phpへの追記】
8番目の施策は、TwitterとInstagramの埋め込み機能を遅延読み込みする内容です。埋め込み機能を使用しないAFFINGER6利用者は実施する必要ありません。
また、functions.phpへのコピペだけでなく、レンタルサーバーからファイルマネージャーを開き、JSファイルを子テーマフォルダ直下に作成する必要があります。
少しだけ難易度が上がりますが、埋め込み機能を使用しているAFFINGER6利用者は可能であれば実施したい施策です。
「WordPressでTwitterとInstagramの埋め込みを遅延読み込みさせる方法」という記事を参考に実施した施策になります。
この高速化施策によって、埋め込みコードの末尾にある<script~></script>のタグは不要になるので削除しましょう。
まずは、functions.phpに下記コードを記述してください。
functions.php
// Twitter・instagramの遅延読み込み
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'lazy-load-twitter', get_stylesheet_directory_uri() . '/lazy-load-twitter.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function lazyload_twitter_instagram( $content ) {
$content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
$content = str_replace('<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
$content = str_replace('<script async src="//www.instagram.com/embed.js"></script>','', $content);
$content = str_replace('<script async="" src="//www.instagram.com/embed.js"></script>','', $content);
return $content;
}
add_filter( 'the_content', 'lazyload_twitter_instagram', 11 );
// Twitter・instagramの遅延読み込みここまで
次に、JSファイル（lazy-load-twitter.js）を子テーマフォルダ直下に配置します。参考までに僕の環境では、子テーマフォルダパスは「public_html>takiblog.tokyo>wp-content>themes>affinger-child」でした。
レンタルサーバーの管理画面から、ファイルマネージャーを開き、子テーマフォルダパスに「lazy-load-twitter.js」を作成して配置しましょう。
lazy-load-twitter.js
function twitterLazyLoad(src) {
const scriptTag = document.createElement('script');
scriptTag.src = src;
scriptTag.async = true;
document.body.appendChild(scriptTag);
}
function doTwitterLazyLoad() {
const twitterEmbed = document.getElementsByClassName('twitter-tweet');
const instaEmbed = document.getElementsByClassName('instagram-media');
try {
if (twitterEmbed.length !== 0) twitterLazyLoad('https://platform.twitter.com/widgets.js');
if (instaEmbed.length !== 0) twitterLazyLoad('//www.instagram.com/embed.js');
} catch (error) {
console.log(error);
}
}
window.addEventListener('scroll', doTwitterLazyLoad, { once: true });
lazy-load-twitter.jsを子テーマフォルダ直下に配置できたら、埋め込みコードが正常に機能していることを確認してください。
⑨Contact Form7のファイルを必要な場合だけ読み込む【functions.phpへの追記】
9番目の高速化施策は、Contact Form7のファイルを必要な場合だけ読み込む方法です。Contact Form7でお問い合わせフォームを作成していない人は実施する必要ありません。
実はContact Form7のJavaScpriptとCSSは、全てのページで読み込まれています。
そのため、お問い合わせフォームに関係していないページの表示速度まで低下させます。
これは、Contact Formの公式サイト（必要な場合だけJavaScpripとスタイルシートをロードさせるには）で伝えられていることです。下記は一部抜粋です。
デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートをすべてのページにロードします。きっと、こんな無駄の多いやり方をやめて、コンタクトフォームを含むページにだけロードすればいいのに、と考えていることでしょう。その気持ちはよくわかりますが、技術的な困難があって、ページをロードする時点でそのページがコンタクトフォームを含んでいるかどうかを判断することがプラグインにとって難しいのです。ともあれ、多少状況を良くするような方法を提示することならできなくもありません。
以上のことから、Contact Form7を使用しているWebサイトは下記のコードをfunctions.phpに記載しましょう
functions.php // contact form 7 のファイルを必要な場合（contact-form）だけ読み込む function wpcf7_file_load() { add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' ); if( is_page( 'contact-form' ) ){ if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); } if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); } } } add_action( 'template_redirect', 'wpcf7_file_load' ); // contact form 7 のファイルを必要な場合（contact-form）だけ読み込むここまで
注意点として、赤文字で記述している「contact-form」は、ご自身のお問い合わせフォームURLに書き直してください。
当ブログのお問い合わせフォームURLは、「https://takiblog.tokyo/contact-form/」のため、上記のようなコードになっています。
たとえば、お問い合わせフォームURLが「https://xxx.com/contact/」の場合は、赤文字を全て「contact」に書き直してください。
AFFINGER6の設定にある「表示速度優先（β）」ってどうなの？
さらに、一度有効化してしまうと、無効化にしても各設定は元に戻りません。元に戻すには、手動で設定を直す必要があります。
どうしてもWebサイトを高速化したい場合は、本記事の高速化施策にくわえて、プラグインの数を減らしたり、高速なレンタルサーバーに変更したりしましょう。
まとめ
本記事では、当ブログが実際に行っているAFFINGER6の高速化施策についてご紹介しました。
functions.phpに直接記述する高速化施策は実施していなかった人も多いのではないでしょうか。
冒頭で解説しているとおり、Webサイトの表示速度は非常に重要ですので、面倒くさがらずにぜひ実施していただければと思います。
高速化施策が面倒だと感じる人は、「おすすめのWordPressテーマ11選（有料7選 ＋無料4選）【最新版】」でご紹介している「SWELL（スウェル）」というWordPressテーマを選ぶことをおすすめします。
-
おすすめのWordPressテーマ11選（有料7選 ＋無料4選）【最新版】
続きを見る
SWELLは、AFFINGER6のようにプラグインをインストールしたりfunctions.phpに記述したりせずとも、十分に高速なWebサイトを作ることが可能です。
以上、「【無料】AFFINGER6の高速化！9つの簡単な方法で重さを改善」でした。