一番のSEO対策!ページ表示速度を高速化してみた

ページを表示するのにたった3秒かかっただけで、ユーザーは40%離脱すると言われています。今回は、一番のSEO対策であるページ速度を改善してみたので具体的な方法を載せたいと思います。

G様曰く、理想的な表示速度は1秒以内だと言われていますが、Adsenseが遅すぎてそれは叶いませんので、できるだけ早く表示できるようにしたいと思います。

てめぇ、自前のサービスのせいで重いんじゃこりゃあ。

っていうのは、控えめに言っておかないと後で制裁を食らいそうです。

前回も改善できるように努力してみましたが、やる前より良かったじゃないくらいのレベルで効果ありませんでした。そう、無能。俺氏、完全敗北しました。

何が1点上がっただよ。当時の俺はふざけてやがる。こんなので記事にしやがって。

あれから、暇な時さえあれば一日中対策を練っているようなアホでしたが、試行錯誤を重ねた結果、遂に大幅な改善がみられました。

結果

まずは、Google様ご提供によるPagespeed Insightsによる計測。

モバイル:83点

パソコン:93点

見事に前回の1点増加よりはマシに。今回は高速化できたと自信を持って言えそうです。前回の点数は、モバイルで57点なので、26点アップ。

GTMetrixの測定も行います。Test Server RegionはHongKong、そう中国。そして、Firefoxを選択。僕がFirefoxを使わないので少し試してみたくなりました。

結果:ALL100%

文句なしの結果に。リクエスト数がおかしいことなって気になりますが、CDNの影響か何かでしょうか。何日も計測してますが、これ以上変化ないのでこれで大丈夫かなと思います。

にしても、ページのLoad Timeが1.5秒と、1秒に近くなっています。多分Adsenseのせいだと思いますが、もう少し改善が必要です。めっちゃ大変だわ・・・

原因は多分ですが、PageSpeedでも言われていて、表示可能コンテンツの優先順位を決定する、という項目が修正が必要になっています。

これを改善する必要がありますね。

SPONSORED LINK

なにはともあれ、これくらい高速化できる方法を紹介します。

一番の効果は、Autoptimize

JavascriptやCSSをインライン化して、圧縮等を行ってくれるWordpressのプラグインです。詳しくはぐぐれば出てきますよね。一番効果がありました。

設定を晒します。

この設定のまま運用すると、jqueryが動かないという物凄く悲しい現象になりますので、Autoptimizeからスクリプトを除外のところに、jquery.jsを追加します。

そしてこのままの設定だと、ヘッダー部分にjqueryが読み込まれてレンダリングをブロックするらしいです。これは、Wordpressが標準で出力するjqueryで、wp_head()部分に自動的に読み込まれてしまいます。

これを回避するため、function.phpに以下のような記述を行います。

function my_scripts() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_footer', 'my_scripts' );

これで、jqueryはフッターに自動的に吐き出されるようになります。もちろん、wp_footer()は適切な位置に書くようにしてください。

また、jqueryのコードは、wp_footer()より下に記述するようにします。読み込まれる前に記述されていてもエラーになるだけですね、うん、○。

これだけで随分とポイントが上がります。72点くらいになった記憶があります。じゃ、どうやって80点にしたかというと、サイト表示が重くなっている原因はサイズの大きいファイルなのでそれを削るか対策するようにしました。

ネットワークのタイムラインを使ってサイズが大きいファイルを特定する

多分大抵のブラウザならついている機能の1つを使います。ネットワークのタイムラインを見る機能です。こんな感じに。

僕の場合は、Googleフォントを使っていたためそれが物凄くサイズが大きかった(フォントだけで10Mb近く)のと、トップページのバナーが1MB近くあったのが原因でした。

Googleフォントを軽くする方法はこちらにあります。サブセット化して必要のない漢字などを削減して必要最低限版の自作フォントを作成します。

Note Sans Japaneseをサブセット化して、軽くしてみた | MONOCHROME DESIGN : フリーランスWEB/UIデザイナー
GoogleとAdobeが共同開発したフォント「Noto Sans Japanese」をサブセット化して、webフォントとして使いやすいサイズにしてみました。

またネットワークのタイムラインは、GTMetrixのWaterfallでも確認できますので、面倒ですがそっちを使ったほうが分かりやすいかも。ただ、ブラウザで見たほうが確実です。

これまでに行ったのは、画像とテキスト圧縮が主です。つまり、ページスピードは読み込みするファイルサイズをできる限り小さくすることで早くできます。

一番重いサイズのファイルを特定してそれを対策するのが根本的な解決になります。さっさとボトルネック見つけましょうw

おしまいっ

SPONSORED LINK

カテゴリー: Blog

コメントを残す