レンダリングを妨げるリソースの除外解決法 2【初心者の速度対策】

レンダリングを除外するリソースの除外後編アイキャッチ SEO検索対策
スポンサーリンク

レンダリングを妨げるとか言われたけど、一体どうしたら良いにゃ?

PageSpeed Insightsでレンダリングに関する警告が出たら、次の2つを実施しましょう。

  1. Javascript の読み込みを遅くする
  2. Javascript と CSS を縮小する

最初の Javascript 読み込み対策は、こちらの記事をご覧ください。

今回は2つ目の対策、Javascript と CSS の量を減らす方法を紹介します。

スポンサーリンク

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

重くなるイメージ

まずはこの警告の意味を解説します。

これは「レンダリングを妨げるリソースどけてよ」「重すぎだよー」という意味。

実はWebサイトって、コードを読み込んで作られています。

javascriptとcssの役割

たとえばポップアップメニューなどは「Javasctipt」で動きを決めています。

またこのブログは見出しを赤線で装飾していますが、こういったデザインは「CSS」で設定しています。

Javascript や CSSは記事とは別のファイルに書かれていて、記事を開くたびに別ファイルから読み込まれます。

この時、読み込む量が多いとページを開くのに時間がかかってしまう。

レンダリング警告は、ここを改善してねと言っているのです。

じゅんこ
じゅんこ

こだわって作っていくうちに、どんどん重くなっちゃうってことも。

開くのに時間がかかるとページの離脱率も上がっちゃう。

せつないにゃ。

Javascript と css を縮小するプラグイン

Javascript や css をの量を手軽に縮小するならプラグインを使いましょう。

Autoptimize が有名です。

autoptimizeインストール

インストールして有効化します。

Autoptimize の設定

有効化した後、次のようにチェックをいれます。

autoptimize javascript option

autoptimize css option

autoptimize html option

autoptimize その他のオプション

一番下のボタンをクリックして、設定を有効化します。

これで再び PageSpeed Insights で速度を計測してみてください。

私はモバイル版を計測した結果、67点→77点へ改善されていました。

autoptimize プラグイン導入効果

点数で効果があると嬉しいにゃ

テーマに付属した高速化機能を使う(Cocoon)

Autoptimizeは良いプラグインですが、相性があります。

効果がイマイチなら外しておきましょう。

なお私はWordPressでCocoonというテーマを使っています。

Cocoonには「高速化」オプションがあり、これを使ってもプラグインと同効果が得られます。

Cocoon 高速化オプション

私はCocoonで再度 PageSpeed Insights を計測したところ 67点→79点に改善しました。

Autoptimizationよりも良い結果です。

Cocoon高速化効果

プラグインとあまり変わりませんが、やはりテーマに備わった機能を使うほうが軽い。

さらに別記事で解説しますが、Cocoonの高速化にはLazy Load機能も付いている!

そこで Autoptimize プラグインを外し、現在はCocoon の高速化設定を使っています。

じゅんこ
じゅんこ

進化し続けるCocoon好きです♪

作成者のわいひらさんに感謝。

CSS Compressor でさらに圧縮

ここからは、プラグインまたはテーマの設定で縮小後、もう一押ししたい人だけ見てください。

CSS Compressor というツールを使うと、CSSファイルのムダな箇所をお掃除できます。

「色々追加してCSSファイルがぐちゃぐちゃかも」

と思ったら、ぜひ試してみてくださいね。

じゅんこ
じゅんこ

お掃除苦手な人用ツールってことで。

私もお世話になりました。

CSS Compressor の使い方

1.Wordpress上からCSSコードが書かれた場所を開いてください。

ワードプレスCSSの場所

2. コードをコピペし、CSS Compressorに貼り付けます。

この時コード上部の 「/*!」から「 */」で囲まれた部分は別ファイルにコピーしておきましょう。

私が使っている Cocoon でいうと、下記の黄土色の箇所です。

ここにはテーマに関する情報が書かれています。

cssを圧縮する時はテーマ情報を後で貼り付ける

3. 圧縮レベルは「高い(中程度の読みやすさ、小さいサイズ)」にすることをおすすめします。

「最高(読みやすさ、最小サイズ)」にすると改行も全部なくなって、イミフファイルになっちゃいます。

css compressor設定

4.  「コンプレス」ボタンを押して処理スタート。

処理後、どれぐらい圧縮されたかが画面右側に数値で出てきます。

css compressor処理後画面

お掃除具合が分かって嬉しいにゃ

5. 処理後のコードを再びCSSファイルに貼り付けて保存します。

この時、手順2. で別途保存しておいた「テーマに関する情報」を貼り付けます。

「@charset “UTF-8”;」のあとに貼り付けてくださいね。

cssを圧縮する時はテーマ情報を後で貼り付ける

この部分がないと、スタイルシート上に次のようなメッセージが出ることがあります。

このテーマは壊れています

テンプレートが不足しています。

独立したテーマには index.php テンプレートファイルが必要です。

6. もしCSSファイルにエラーが出ていたら修正しておきましょう。

エラーがあるままでも保存できますが、ムダに負荷がかかるかもしれません。

【CSSエラー例(重複エラー)】

css重複例

上記の画面は同じコードが2回入っていたために起こっています。

こういったエラーでは不要なコードを消してあげるとエラーは解決できますよ。

じゅんこ
じゅんこ

まめなお掃除が大事ってことで。

まとめ

  • レンダリング警告を解決するにはJavascriptやCSSを小さくすると良い
  • Autoptimizeプラグインを使うと縮小できる
  • Cocoonなどのテーマでは高速化機能で縮小できる
  • CSS Compressor を使うとファイル内のコードを圧縮できる

レンダリングブロック対策は前編記事も参考にしてください。

じゅんこ
じゅんこ

PageSpeed Insights の点数を上げる7つの方法はこちら。

点数が悪ければ全て行ってみてくださいね

コメント

タイトルとURLをコピーしました