WordPressを高速化するプラグインとCSS・JavaScriptの見直し

wordpress-speed-up
  • URLをコピーしました!

前回ご紹介したPageSpeed Insightsの分析結果を受けて、WordPress高速化したいと思います!
課題に挙げた通り、WordPress高速化するために、CSSJavaScript画像サイズの見直しを行いました。

minory
PageSpeed InsightsでWebページの読み込み時間を分析する | minory ページの読み込み時間には、SEOの観点からも非常に重要視されています。特に昨今では、スマホでWEBサイトを閲覧する機会が多くなっているため、利用者が待ち時間にイライラ...

WordPress高速化するプラグインもご紹介しますので、ぜひ参考にしてみてください!

目次

WordPress高速化プラグイン

まず、始めに手を付けたのは、不要なプラグインの除去です。
その上で、WordPress高速化するために以下の2つのプラグインを導入しました!

EWWW Image Optimizerで画像を圧縮

EWWW Image Optimizer

EWWW Image Optimizer


EWWW Image Optimizerページを読み込む際に、1番重たいのは何と言っても画像です。
画像1枚あたり数十〜数百KBはあると思います。
EWWW Image Optimizerプラグインは、新規にアップロードする画像はもちろんのこと、今までに保存した既存画像も、画質を劣化させることなく圧縮してくれます!
特に、PNG形式の圧縮率は高く、画像によっては半分近くまでサイズ削減することができます!
バズ部
EWWW Image Optimizer の設定方法と使い方 WordPressで多くのコンテンツを投稿するようになると、自然と扱う画像の枚数も増えて行くことだろう。画像ファイルはサイトの表示速度を低下させるという問題がある。サイ...

余談ですが、ページを読み込んだ後に画像遅延表示する「Lazy Load」と言うプラグインも有効なようですが、著者のブログとはなぜか相性が悪く、モバイルページを表示した際に画像が消えてしまいます。
使える方は使った方が良いかと思います。

WP Fastest Cacheでページをキャッシュ

WP Fastest Cache

WP Fastest Cache


WP Fastest Cache参照したページの情報を保持して高速化してくれるキャッシュ機能を利用するプラグインです。
キャッシュを利用する場合、少し問題があるので悩みましたが、比較的設定が少なく簡単でトラブルが少なそうな「WP Fastest Cacheプラグインを選びました。
その他の有名なプラグインは、無料かつ高度な設定ができますが、初心者にはこちらをオススメします!
寝ログ
初心者にも扱いやすいWordPressキャシュプラグイン「WP Fastest Cache」の使い方 僕は、Wordpressのキャッシュプラグインは基本的にあまり好きではありません。 というのも、設定は難しいし…

自信がある方は別のプラグインを試してみても良いかもしれません。

CSSを見直す

PageSpeed Insightsの分析結果で1番重かったCSSは、フォントを読み込んでいるCSSでした。
当然と言えば当然ですね。
実は当ブログ、ロゴに使用しているフォントの他、ブログ全体にGoogle製のNoto Sansというフォントを使用していました。
ご存知の通り、フォントファイルは1つ1つのサイズが大きいので、それを複数読み込むとなると、読み込みに時間がかかってしまいます。

JavaScriptを見直す

JavaScriptは、特にheadタグ内で読み込むのはあまり良くないようです。
とりあえず、当ブログで使用していたPace.jsというページ読み込み時にプログレスバーを表示するJavaScriptを廃止しました。
あとは、できるだけJavaScriptbodyの終了タグ直後に記載するようにしました。

改善した結果

以上の対策をして、再度PageSpeed Insightsで分析してみたところ、パソコンでは確かに改善が見られましたが、モバイルに関してはあまり改善されませんでした。

対策前 対策後
モバイル 2点 9点
パソコン 9点 28点

予想では、モバイル表示用の「WPtouch Mobile Plugin」が原因ではないかと思われます。
まだまだ改善の余地はあると思いますので、有益な情報をお持ちでしたらコメントをよろしくお願い致します!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次