HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

Googleさんから警告!!真剣にWordPressの高速化に取り組みます

2013-10-01_0722_001
GoogleのPageSpeed Insightsで、「Your page has 14 blocking script resources」とレッドカードを出された@web_shufuです。アドセンスの管理画面でも「サイトの状況」は5段階の1という低評価で超ヤバイです。まずはblocking resources対策から、Wordpressの高速化について真剣に取り組むことにしました。

Googleさんからのアドバイス

私の英語力では、Googleさんは次のように言っているように見えました。

Your page has 14 blocking script resources and 6 blocking CSS resources. This causes a delay in rendering your page.

14のjavascriptと6のCSSがページ表示が遅れる原因になっています、とのこと。

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

above-the-foldのコンテンツは全て、次に挙げるリソース(14のjavascriptと6のCSS)がロードされるまで表示されません。これらのリソースを非同期ロードするか遅延ロードするかどちらかをやってみなさい。重要な部分はHTMLに直接書き込んでもいいかもね。」と言っています。

Googleさんは、「<body>以下のページ表示に関わるHTMLが読み込まれる前にjavascriptとCSSが読み込まれるために、ページの表示が遅れることになる」と言っています。

だから採るべき対応策は

  • 読み込まれるjavascriptとCSSのファイル数を減らす
  • javascriptの読み込みを遅らせる(CSSは<head>~</head>から動かせないでしょ?)

の2つになります。

javascriptとCSSの読み込みファイル数を減らす

私の現状の知識では、いくつかのファイルで散らばっている記述を可能な限り、まとめていくことでファイル数を減らすことくらいしか思いつきません。

Googleさんの言うようにHTMLに直接書き込むのもいいのだと思いますが、なにぶん分量が多すぎます。

javascriptの読み込みを遅らせる

Googleさんオススメの遅延ロードや非同期読み込みはもちろん効果的なのでしょうが、現状私が良くわかりません。

とりあえず今できることは、<head>~</head>に記述されているjavascriptファイルへのリンクを</body>の直前に移すことです。

プラグインを使うなり、function.phpにコードを書き込むなどして対応したいと思います。

出来ることからこつこつと

サイトの高速化についてはわからないことがとても多いのですがコツコツ頑張りたいです。

Googleさんの英語アドバイスを真面目に読むことなども必要ですね。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: