Wordpress

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

PageSpeed Insightsで、低成績を目の当たりにし、環境改善に向けて舵を切った私。

PageSpeed Insightsでサイトスピードチェックと改善に向けての対策

Google Site Kitが、 「あなたのサイト、モバイルではかなり遅いですよ。」 と教えてくれた。

 

まずは、「レンダリングを妨げるリソースの除外」に挑戦。

そもそも、レンダリングを妨げるソースというと、通常、CSSかJavaScriptとの事。

けれど、すべてのCSSやJavaScriptがレンダリングを妨ぐわけではない。

 

現時点で実行 or 検討中の操作 ▼

Contents

0. プラグイン「WP Rocket」

1. async属性で非同期処理

1-1. マニュアルで

1-2. プラグイン「Async JavaScript」

2. HTML. CSS. JavaScriptを圧縮

プラグイン「Autoptimize」

3. Javascriptファイルをフッター行に移動

プラグイン「Speed Up – JavaScript To Footer」

4. Font Awesomeのコードをフッター行に移動

 

 


0. プラグイン「WP Rocket」の導入

 

WP Rocketというプラグインがかなり優秀だとか。

これ一つで高速化における様々な機能が付属され処理できる上に、セットアップも簡単!

と、海外ではずっと高い評価をうけている様子。

Pricing & Purchase – WP Rocket

The Best WordPress Caching Plugin, Simple and affordable. Over 1,215,000+ websites load blazing fast with WP Rocket Display estimated prices in Euro (€) Your purchase will be made in US Dollars. Converted prices are provided as an estimation.

 

時間をかけずに効率的に高速化したいなら、導入すべきプラグインのよう。

ただ…有料なんだなぁ…。

サポート & アップデートウェブサイト
$ 49 /年1年間1つ
$ 99/年1年間3つ
$ 249 /年1年間無制限

 

機能面で考えるとかなりコスパがよさそうだけれど、

私にはまだちょっと手が出しづらい…

もう少しブログ収入があがってきたらサイド検討予定。

 

…とゆーわけで、以下からはWP Rocktを使わずに色々工夫する方法。

 

 


1.async属性で非同期処理

 

ブラウザは、HTMLファイルを上から順番に解析する。

HTMLにCSSファイルやJavaScriptファイル、写真 etc.のURLが合った場合、その都度サーバーからファイルをダウンロードすることになる。

 

async属性を付与すると、スクリプトを非同期で読み込むことができる。

非同期でjsを読み込むと、スクリプトをバックグラウンドでダウンロードできるので、ページのレンダリングを速くすることができる。

 

1-1. マニュアルでasync属性を付与

 

async属性は、HTMLに書くだけで簡単に付与することができる。

通常▼

<script
src="http://hogehost.com/hoge-hoge.js">
</script>

 

script-injectedを利用する場合▼

<script>
var script = document.createElement('script');
script.src = "http://hogehost.com/hoge-hoge.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

 

async属性▼

<script
src="http://hogehost.com/hoge-hoge.js" async>
</script>

 

……と、簡単なんだけど、毎回追記するのはちょっと面倒なので、

上記はもう少し慣れてから。

今回はプラグインを導入。

 

1-2. プラグイン「Async JavaScript」

 

今回は「Async JavaScript」というプラグインを導入した。

Async JavaScript

Async Javascript lets you add ‘async’ or ‘defer’ attribute to scripts to exclude to help increase the performance of your WordPres …

1) 上部にある「Enable Async JavaScript」チェックボックスをオンにする

2)「Quick Settings」ボックスで「Apply Async」または「Apply Defer」を選択

 

※ どちらが良いかは場合による。

defer の特徴

    • HTMLパーサを停止しない
    • HTMLのパースが終わり次第実行される
    • defer 属性をつけたスクリプトが全て実行されるまで DOMContentLoaded イベントは発火されない
    • 実行順序はHTMLの記述通り

async の特徴

    • スクリプトのダウンロード時にHTMLパーサを停止しない
    • スクリプトファイルのダウンロードが終わり次第、HTMlパーサを停止し、実行される
    • async 属性をつけたスクリプトが全て実行されるまで load イベントは発火されない
    • 実行順序は不定(ダウンロードが先に終わったものから実行される)

 

AsyncとDeferの使い分け

    • 他のスクリプトファイルに依存される場合は defer(jQueryなど)
    • 他のスクリプトファイルに依存する場合も defer(jQueryプラグインなど)
    • DOM要素をいじる場合も defer(document.querySelectorとかを使う場合など)
    • 上記以外は async(Google アナリティクス用スクリプトなど)

defer と async の大きな違いの一つとして、実行順序が決まっているかどうか。

deferの場合、HTMLで先に書いたほうが先に実行される。

async の場合は実行順序は決まっていないため、依存関係にあるスクリプト同士を読み込む場合は defer を使ったほうが安全。

けれども、場合によってはasyncの方がよい場合もある。

 

 


2.HTML. CSS. JavaScriptを圧縮

 

HTML, CSS, JavaScriptを圧縮することで、軽量化を図る。

今回はプラグインで。

 

プラグイン「Autoptimize」の導入

Autoptimizeは、CSSやJSなどのリソースを圧縮し、軽量・最適化してくれるプラグイン。

開業やスペースを削除してくれたり、複数のファイルを結合して圧縮してくれたりと、色々と便利な機能が備わっている。

   

Autoptimize

   

What does the plugin do to help speed up my site? It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts (optionally) to the footer. It also minifies the HTML code itself, making your page really lightweight.

  

 

1)「Optimize JavaScript Code」のボックスにチェックを入れる

2)「Optimize CSS Code」ボックスにチェックを入れる

他はデフォルトでOK。

上級者の場合は重要なCSSを手動でインライン化することも可能だが、知識がない場合はそのままで。

 

 

以上の2つを試みた時点で、

PageSpeed Insightsの結果は、

    • モバイル:17 → 37
    • PC:60 → 88

まで改善。

 

First Contentful Paintがそれぞれ

    • モバイル:2.0s
    • PC:0.6s

と大幅に改善した。

 

 


3.Javascriptファイルをフッター行に移動

 

Webページの読み込みはHTMLの上部から行われるので、HTMLの記述の最初の方にJavascriptファイルがたくさんあると、その読み込みに時間がかかり、ページの表示速度が遅くなる。

そこで、このプラグインをつかって、Javascriptファイルをヘッダー行からフッター行に移動させ、ページの読み込み速度をアップさせる。

 

使用したプラグインは、「Speed Up- JavaScript To Footer」というプラグイン。

Speed Up – JavaScript To Footer

This small plugin (2 Kb) moves JavaScript to the footer and improve page load times. Note: this only works if your other plugins and theme add the JavaScripts correctly. Configurations are not required! You just have to install it and after the plugin does it all, none further action it’s required.

 

使用方法は、

プラグイン
 ↓
新規追加
 ↓
JavaScript to Footer を検索
 ↓
インストール
 ↓
有効化

これだけ。

 

なんだけど、これだけで、PageSpeed Insightsの評価が

メインドメイン:

    • Mobile :36 → 51
    • Desktop : 76 → 82

サブドメイン:

    • Mobile :40 → 55
    • Desktop : 80 → 90

に向上。

これは入れる価値あり!

 

 


4. Font Awesomeのコードをフッター行に移動

 

私は、アイコンに「Font Awesom」を使用している。

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

 

Fontawsomeを使用するにあたって、下記コードをヘッダーの中に入れていた。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" rel="stylesheet">

 

けれども、ヘッダーにあると、CSSなのでレンダリングを妨げる事になる。

 

…ということで、上記コードをヘッタ-から削除し、

フッターの</body>タグの直前に移動させた。

 

 

 

以上、色々試してみてある程度改善したが、まだ道半ば。

 

……次の課題に挑戦。

 

 


References

サイトページの表示速度を改善した7つの方法

パソコンやスマホでのブログの表示スピードが遅いと、それだけ 離脱率、直帰率を高める原因 になってしまいます。

WP ROCKETの設定と使い方を解説!おすすめ構成教えます!

今回は、Wordpressプラグインの中で高速化に特化した最強プラグインをご紹介します。 それがこの「 WP Rocket 」です。 海外でも軒並み非常に高い評価を受けており、ずっと注目されているプラグインです。これ一つで、高速化における様々な機能が付属され処理できる有能プラグイン。 そんな「WP …

WordPressのレンダリングを妨げるリソースを除外する方法(CSSとJavaScript) – Kinsta Managed WordPress Hosting

Google PageSpeed Insightsを使用してWordPressサイトのパフォーマンスを計測したことはありますか?

defer と async を使ってサイト高速化 – ナデズダ・ゴボリン🖥

タグには defer または async 属性を指定できます。

WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ | Tekito style.me

Photo by Photo by photo by: サイトスピード(ページ表示速度)とは、ユーザーがサイトを訪問したときにサイトが表示される速さのこと。

Google PageSpeed Insights – Scoring 100/100 with WordPress – KeyCDN

Running speed tests with tools like Google PageSpeed Insights, WebPageTest, or KeyCDN’s Website Speed Test are always a good way to help gauge your website’s performance. While these metrics can be very helpful it is also important to keep this data in perspective.

Google PageSpeed Insights: The Truth About Scoring 100/100

Google PageSpeed Insights is without a doubt a useful tool for webmasters, developers, and site owners of all types. However, we’ve noticed that a lot of people spend hours obsessing over optimizing their sites, in order to try and score 100/100 on this test.

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です