こんにちは、みったにです。
僕はフリーランスとしてWeb制作を行っています。このブログサイトも自作しました。
サイトの表示速度が遅いと、実はWebページ閲覧者の離脱率が高くなってしまう傾向があります。
しかし、僕はそこも改善できたので、今回はその経験も活かして、WordPressサイトの表示速度を高速化するテクニックを紹介します。
WordPressが重いときに高速化する3つ手順
3つほどテクニックを紹介します。このブログでも実施している方法です。
WordPressサイトを高速化させる3つのテクニック
- その①：JavaScriptの非同期読み込みで高速化
- その②：画像の最適化と非同期読み込みで高速化
- その③：コードを圧縮してWordPressの重さを改善
この3つは簡単なので、今すぐできます。順番に説明しますね。
JavaScriptの非同期読み込みで高速化
JavaScriptは、わりと読み込みに時間がかかったりするので、非同期で読み込むことで高速化できます。
非同期とは
非同期とは、ようするに、順序を気にせずに読み込むことです。
Webページを読み込んだときの動作として、まずHTMLを読み、CSSを読み、その後にJavaScriptを読んだりするのですが、そういった場合だと、CSSが終わるまでJavaScriptが読み込まれないことになります。
なので、順序を気にせずに、CSSとほぼ同時に読み込むようにすることで高速化できます。
やることはasync属性を追加するだけ
コードはasync属性を追加するだけなので、簡単です。
変更前
<script src=“./js/style.js”></script>変更後
<script async src=“./js/style.js”></script>これだけです。簡単ですね。
画像の最適化と非同期読み込みで高速化
読み込み速度が遅いのは、実は、画像が原因になっていることが多かったりします。
なので、画像はプラグインで最適化しましょう
画像の最適化はEWWW Image Optimizerが便利
画像を圧縮する場合は、このプラグインがオススメです。
使い方は簡単で、インストールして、圧縮するだけです。そして、既に使用中の画像まで圧縮することができます。
詳しい使い方は、こちらが分かりやすそうです。
>>EWWW Image Optimizer の設定方法と使い方
画像を非同期で読み込む
画像に対しても、非同期で読み込むと高速化できます。
ここもコードは簡単です。
Imgタグに以下のコードを追加するだけです。
変更前
<img src=“./images/image.png">変更後
<img src=“./images/image.png" decoding="async">decoding=“async” を追加するだけです。これも簡単ですね。
補足：プラグインを使用しない方法
プラグインを使用せずに、画像を圧縮する方法もあります。
オススメのツールはJPEGminiでして、以下からダウンロードできます。
>>JPEGmini
無料版あり
このツールは有料の圧縮ツールですが、200回までは、無料で使うことができます。
基本的に、WordPressのプラグインは少ない方が良かったりするので、圧縮ツールを使うのもありですね。
コードを圧縮してWordPressの重さを改善
CSSやJavaScriptもファイルサイズ大きいと読み込みが遅くなる原因になりますので、圧縮しましょう
VSCodeの拡張機能が便利
いきなり、VSCodeの話を出してすみません。しかし、この拡張機能が便利です。
JS & CSS Minifier (Minify)が便利
この拡張機能を使用することで、簡単に圧縮することができます。
JSとCSSをVSCodeで圧縮する簡単な方法【無料の便利ツール】
CSSやJSは圧縮(Minify)すると、Webサイトのパフォーマンスが向上します。そして、パフォーマンスが向上すると、サイトが高速化し、SEOにも良い影響を与えます。とはいえ、少し面倒なイメージもありますよね。今回はVSCodeを使って、簡単に圧縮する方法を紹介します。
VSCode以外の圧縮はこちら
コード圧縮のプラグインはAutoptimizeがおすすめです。
WordPressのプラグインですが、これを使って圧縮することもできます。
以上がWordPressサイトを高速化するテクニックです。
これで、サイトパフォーマンスも改善しますね！
