Webサイトのスピードを改善する方法【表示速度の高速化】

2020年7月5日

Webサイトのスピードを改善する方法【表示速度の高速化】

 

この記事では,Webサイトの表示速度を改善するために自分が行ったことをまとめてみました.

 

サイトのスピードでお悩みの方は,ぜひ試してみて下さい!

 

みっちー
PageSpeedInsightのスコアも上がりますよ!

 

 

本題に入る前に…

 

これから紹介する方法の中には,「.htaccess」など,重要なファイルに変更を加えるものもあります.

 

そのため,必ずバックアップを取り,あくまでも自己責任でお願いいたします.

 

また,参考までに,対策を行った時点でのwordpressテーマとそのバージョンを記しておきます.

 

テーマ
バージョン
20200206

 

みっちーブログと同じく「Affinger5」を使っている場合,おそらくすべてうまくいくと思いますよ!

 

Webサイトのスピードを改善する方法

Webサイトのスピードを改善する方法

 

表示速度を改善するために行ったことは,以下の7つです.

  1. 次世代フォーマットでの画像の配信
  2. レンダリングを妨げるリソースの除外
  3. キーリクエストのプリロード
  4. Font Awesomeアイコンの遅延読み込み
  5. スライドショーのCSSとJavaScriptを読み込まないようにする
  6. gzip圧縮
  7. プラグイン「Contact Form7」の消去

 

では,それぞれ詳しく解説していきます.

 

 

その①:次世代フォーマットでの画像の配信

 

PageSpeed Insightsでおそらく出てくる項目だと思います.

 

これについては,WebPを使うことで改善しました.

 

詳しくは,以下の記事にまとめたので,そちらをご覧ください!

「次世代フォーマットでの画像の配信」の改善方法【WebPを使って解決】
「次世代フォーマットでの画像の配信」の改善方法【WebPを使う】

続きを見る

 

 

その②:レンダリングを妨げるリソースの除外

 

これについては,外部サイトにはなりますが,はやさんの運営する「HAYAMIZ BLOG」にて分かりやすく解説されていたので,そちらを紹介させていただきます.

 

 

プラグインの導入と設定の変更だけなので,特に詰まることなくできると思います.

 

 

その③:キーリクエストのプリロード

 

PageSpeedInsightの改善項目に,「キーリクエストのプリロード」があったら,以下のようにURLが提示されると思います.

URLのコピー

 

まず,このURLをコピーして,メモ帳でも何でもよいので,どこかに貼り付けておきます.

 

 

次に,以下のコードの〇〇〇の部分に,今コピーしたURLを貼り付けます.

<link rel="preload" as="font" type="font/woff" href="〇〇〇" crossorigin>

 

みっちー
つまり,こういうこと!
URLの編集

 

なので,最終的には,

<link rel=“preload” as=“font” type=“font/woff” href=“https://mitchieblog.com/~~~~” crossorigin>

こんな感じになります.

 

複数のURLが表示されていた場合には,すべてに同じことを行ってください.

 

 

次に,今作ったコードを<head>~</head>の中に貼り付けます.

 

特にAffinger5を使っている方は,以下に示す場所から,簡単に貼り付けが可能です.

 

まず,「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です.

FontAwesomeの遅延読み込み

 

終了後,アイコンを使っているサイトで確認してみると,微妙に遅れて読み込まれていることが確認できます.

 

 

その⑤:スライドショーの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圧縮…?

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」と表示されます.

gzip圧縮

 

みっちー
一度,確認してみて下さい.

 

 

その⑦:プラグイン「Contact Form7」の消去

 

これに関しては,僕が勝手に

みっちー
このプラグインを減らせば,スコアが上がるのでは?

と思いついただけなので,実際に上がる保証はありません.

 

なので,やってもやらなくてもどちらでも,といった感じです.

 

Contact Form7の代わりにGoogleフォームを使う,という方法を用います.

 

やってみたい方は,以下の記事にまとめてあるので,そちらをご覧ください.

Googleフォームでお問い合わせフォームを作成する方法
Googleフォームでお問い合わせフォームを作成する方法【プラグイン不要】

続きを見る

 

みっちー
お問い合わせフォームを作ってない方にも参考になりますよ

 

 

Webサイトのスピードを改善する方法 まとめ

Webサイトのスピードを改善する方法 まとめ

 

今回は,Webサイトのスピードを改善する方法を紹介しました.

 

ページの表示速度は,今後ますます重要視されていくようなので,今のうちに対策をしておきましょう!

 

では,最後まで読んでいただきありがとうございました!

 

-ブログ

Copyright© みっちーブログ , 2021 All Rights Reserved.