診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。その中のひとつである「レンダリングを妨げるリソースの除外」とはどういう意味か、また診断結果を改善する方法についても解説します。Insightsで自社サイトの速度を計測すると「レンダリングを妨げるリソースの除外」が指摘されることがあります。Scriptや各種スタイルシートのことで、除外した場合の改善予測時間も表示されます。キーワード検索された際の自社サイトの表示順位を少しでも向上させるため、SEO対策に取り組んでいることと思いますが、モバイルフレンドリーであることはサイトの評価を上げ、ひいては有効なSEO対策となります。モバイルフレンドリーであるためには表示速度も大切ですから、この点においても有効な対策を取らなくてはなりません。CSSを完全に削除することはあまり現実的ではありません。サイト全体のデザインも崩れてしまいますし、いくら表示速度が上がっても装飾の全くないサイトではビジュアル的にも魅力半減となってしまいます。見た目の美しさを保持しつつ、表示速度を上げるためにとる手段を確認していきます。JavaScriptの最適化まずJavaScriptのブロッキングを回避するためには、asyncかdeferをつけてJavaScriptをロードします。asyncをつけた場合はJavaScriptをロードしている最中でもレンダリングを停止させません。JavaScriptのロードが終わるとすぐにそのスクリプトの実行に移ります。deferをつけた場合もJavaScriptのロード中にレンダリングを妨げることはありません。JavaScriptのロード終了後のスクリプト実行はHTMLレンダリングのあとに順次行われるという違いがあります。判断材料としては複数のJavaScriptを実装している場合はdeferをつけ、それ以外の場合はasyncをつけるということになります。部分にasyncやdeferをつけていくだけです。省略することが可能ですので、同時に削除すると速度改善に有効です。CSSの最適化またCSSの配置を最適化することは技術的に大変難しい問題です。エンジニアのスキルと知識によっては下手にいじってしまうと元に状態に戻すこともできなくなるのでプラグインを利用するほうが安全です。いくつかのプラグインが公開されていますので自分で使用しやすいと思うものを選んでインストールし実行します。設定画面で指示にしたがって「CSSのオプション」項目を設定していきます。内容は「CSSコードの最適化」「インラインのCSSを凍結」「全てのCSSをインライン化」の3点を実行するようにします。これでレンダリングを妨げる状態を回避することができます。CSSをいじってしまうとサイトのデザインが崩れる可能性があるので、実行前にサイトの表示や動作に不具合が出ないかを確認します。)トラックバックは利用できません。この記事へのコメントはありません。返信をキャンセルする。