この記事では，Webサイトの表示速度を改善するために自分が行ったことをまとめてみました．
サイトのスピードでお悩みの方は，ぜひ試してみて下さい！
本題に入る前に…
これから紹介する方法の中には，「.htaccess」など，重要なファイルに変更を加えるものもあります．
そのため，必ずバックアップを取り，あくまでも自己責任でお願いいたします．
また，参考までに，対策を行った時点でのwordpressテーマとそのバージョンを記しておきます．
テーマ | バージョン |
20200206 |
みっちーブログと同じく「Affinger5」を使っている場合，おそらくすべてうまくいくと思いますよ！
Webサイトのスピードを改善する方法
表示速度を改善するために行ったことは，以下の7つです．
- 次世代フォーマットでの画像の配信
- レンダリングを妨げるリソースの除外
- キーリクエストのプリロード
- Font Awesomeアイコンの遅延読み込み
- スライドショーのCSSとJavaScriptを読み込まないようにする
- gzip圧縮
- プラグイン「Contact Form7」の消去
では，それぞれ詳しく解説していきます．
その①：次世代フォーマットでの画像の配信
PageSpeed Insightsでおそらく出てくる項目だと思います．
これについては，WebPを使うことで改善しました．
詳しくは，以下の記事にまとめたので，そちらをご覧ください！
-
「次世代フォーマットでの画像の配信」の改善方法【WebPを使う】
続きを見る
その②：レンダリングを妨げるリソースの除外
これについては，外部サイトにはなりますが，はやさんの運営する「HAYAMIZ BLOG」にて分かりやすく解説されていたので，そちらを紹介させていただきます．
プラグインの導入と設定の変更だけなので，特に詰まることなくできると思います．
その③：キーリクエストのプリロード
PageSpeedInsightの改善項目に，「キーリクエストのプリロード」があったら，以下のようにURLが提示されると思います．
まず，このURLをコピーして，メモ帳でも何でもよいので，どこかに貼り付けておきます．
次に，以下のコードの〇〇〇の部分に，今コピーしたURLを貼り付けます．
<link rel="preload" as="font" type="font/woff" href="〇〇〇" crossorigin>
なので，最終的には，
<link rel=“preload” as=“font” type=“font/woff” href=“https://mitchieblog.com/～～～～” crossorigin>
こんな感じになります．
複数のURLが表示されていた場合には，すべてに同じことを行ってください．
次に，今作ったコードを<head>～</head>の中に貼り付けます．
特にAffinger5を使っている方は，以下に示す場所から，簡単に貼り付けが可能です．
まず，「Affinger5 管理」の「その他」をクリックします．
そして，「上級者向け」の「コードの出力」に，「headに出力するコード」という欄があるので，ここにコピペするだけです．
貼り付けたらこんな感じに…
Affinger5以外の方でも，テーマによっては．ヘッド用のコードを簡単に貼り付けれる場所が用意されているので，一度調べてみて下さい．
これで，キーリクエストのプリロードについては終了です．
変更後，改善されたかをすぐに確認したいところですが...僕の場合，変更直後はスコアが不安定になっていました．
数回計測してみて，不安定であれば，時間をおいてから再度，計測することをおすすめします．
その④：Font Awesomeアイコンの遅延読み込み
Affinger5にて使われている，「Font Awesomeアイコン」の読み込みを遅らせます．
もちろん，読み込まれなくなるわけではないので安心してください．
子テーマの「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');※WING（Affinger5）でFont Awesomeアイコンを遅延読み込みさせて高速化より引用
Affinger5を利用している方は，テーマエディタにて，「Affinger5 Child」の「functions.php」を選べばOKです．
終了後，アイコンを使っているサイトで確認してみると，微妙に遅れて読み込まれていることが確認できます．
その⑤：スライドショーのCSSとJavaScriptを読み込まないようにする
Affinger5を使っている方で，スライドショーを使っていない方は，ぜひこれを試してみて下さい．
まず，念のため，スライドショーの設定を確認しておきます．
「Affinger5管理」→「ヘッダー」にいくと，以下のようにスライドショーの設定があります．
上の画像のように，「画像スライドショー」と「記事スライドショー」にチェックが入っていないことを確認してください．
スライドショーを使っていないことが確認出来たら，さっそく本題に入ります．
まず，子テーマ(Affinger5 Child)の「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' );※WING（Affinger5）でスライドショーのCSSとJavaScriptを削除する方法より引用
以上で終わりです．
再びスライドショーを使いたくなったら，今回追加した部分を削除すれば，再度表示されるようになります．
その⑥：gzip圧縮
gzip 圧縮とは、ファイルサイズを小さくする圧縮方法の1つです。gzip 圧縮を取り入れることで、ユーザと Web サーバ間でやりとりされている HTML ドキュメントのファイルサイズが小さくなり、転送速度が向上します。
[gzip 圧縮によるパフォーマンス改善 より]
だそうです．
それはさておき…
この方法は，「.htaccess」ファイルに変更を加えるので，事前にバックアップを取っておくことをおすすめします．
バックアップが取れたら，以下のコードを「.htaccess」の一番下に記入します．
# Gzip圧縮の設定 SetOutputFilter DEFLATE # 画像は再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary Header append Vary Accept-Encoding env=!dont-vary # 各MIME Typeを圧縮対象にする AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css 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-woff AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
※【AFFINGER5（アフィンガー5）】高速化のまとめのまとめ決定版より引用
ちなみに，GIDNetworkというサイトでURLを入力すると，圧縮できているか確認ができるそうです．
圧縮ができていると，以下のように「Yes」と表示されます．
その⑦：プラグイン「Contact Form7」の消去
これに関しては，僕が勝手に
と思いついただけなので，実際に上がる保証はありません．
なので，やってもやらなくてもどちらでも，といった感じです．
Contact Form7の代わりにGoogleフォームを使う，という方法を用います．
やってみたい方は，以下の記事にまとめてあるので，そちらをご覧ください．
-
Googleフォームでお問い合わせフォームを作成する方法【プラグイン不要】
続きを見る
Webサイトのスピードを改善する方法 まとめ
今回は，Webサイトのスピードを改善する方法を紹介しました．
ページの表示速度は，今後ますます重要視されていくようなので，今のうちに対策をしておきましょう！
では，最後まで読んでいただきありがとうございました！