PageSpeed Insightsでブログサイトの表示速度を改善したいけど、どの様にCSSとJavaScriptなどのコードを最適化すれば良いのかわからず悩んでいないでしょうか？
この記事では、僕の様なCSSとJavaScriptといったプログラミングの知識が無くても2つのプラグインでブログサイトのコードを最適化する方法についてご紹介します。
ブログのページ速度が遅くなる原因はPageSpeed Insightsで確認する事ができます。PageSpeed Insightsの使い方は以前の記事で紹介していますのでまずはこちらを確認してみてください。
-
サイトの表示速度が遅いと感じた時にやるべき3つの事【Page Speed Insights対策】
続きを見る
今回ご紹介する内容を試したところ、直接コードに触らずPageSpeed Insightsの点数が37点から63点まで上げる事ができています。
ブログサイトのページ速度を改善するにはCSSとJavaScriptを最適化する必要がある
ブログサイトは文字や画像が表示されていますが、その殆どはCSSやJavaScriptなどのコードによって構成されています。
その為、ブログサイトにアクセスした端末はコードを読み取って、画面を表示する仕組みとなっています。
その反面、不要なコードがある事によって情報を読み取るのに時間がかかり、表示速度が下がる原因となります。
具体的に問題となっているコードはPageSpeed Insightsの以下の内容によって確認する事が出来ます。
- 使用していない CSS の削減
- レンダリングを妨げるリソースの除外
- JavaScript の実行にかかる時間の低減
この様な問題点が出てきたらCSSとJavaScriptのコードを改善する必要があります。
プログラミングの知識がない人がコードを書き換えるのは危険
サイト内にある不要のCSSとJavaScriptを削除すればブログサイトの表示速度は上がるのですが、僕の様なプログラミングの知識が無い人が「どのコードが不要なのか」を理解せずにコードを触るのは正常にサイトが表示されなくなる危険があります。
CSSやJavaScriptはブログサイトに表示されるデザインや文字などを構築しているので、必要なコードを1文字でも削除する事によってブログサイトが大きく崩れてしまう原因につながるからです。
現在では、ネットに上がっている情報を元にコードを削除する事も可能ではありますが、理解をして不要なコードを削除するまでに相当な時間を費やす事になる事から自分で不要なコードを削除しようとするのは時間効率が悪いとも言えるでしょう。
プログラミングの知識が無くてもCSSとJava Scriptのコードを簡単に最適化できる2つのプラグイン
プログラミングの知識が無くてもプラグインを利用する事によってコードを常に最適化する事ができます。
CSSとJavaScriptのコードを最適化出来る事から僕が利用しているプラグインは以下の2つです。
- Async JavaScript
- Autoptimize
この2つのプラグインは設定画面のチェックボックスを操作するだけで、ある程度CSSとJavaScriptを最適化する事ができますのでプラグインをインストールして有効化してみてください。
Autoptimizeの設定方法
まず、Autoptimizeは設定画面の「JS,CSS &HTML」の画面に移動します。
「JavaScript コードの最適化」と「CSS コードを最適化」にチェックを入れて「変更の保存とキャッシュの削除」を設定すれば完了です。
同時にHTMLも最適化する事ができますので、一緒にチェックしておくと良いでしょう。
Async JavaScriptの設定方法
Async JavaScriptの設定画面を開き「Settings」の項目に移動をして「Enable Async JavaScript?」のチェックを入れれば設定は完了です。
CSSとJavaScriptの改善はすぐに出来る
今回は、直接CSSとJavaScriptのを触らずにコードを最適化する方法についてご紹介しました。
この記事のまとめ
- 素人が直接コードを書き換えるのは危険
- AutoptimizeとAsync JavaScriptのプラグインを使う
- 設定はチェックを入れるだけ
CSSやJavaScriptのコードを知らない人からすれば、ページの表示速度を改善するためにコードに触るのが怖くて中々手をつけれない項目かと思います。
しかし、この記事でご紹介した事を実践すれば数分でページ速度を改善する事ができますので、是非実践してみてください！
