キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

えっ、たったこれだけ?!5秒でサイトの表示速度をアップさせる方法

   

えっ、たったこれだけ?!5秒でサイトの表示速度をアップさせる方法

Google Developers のアドバイスは正確だった、キャリコ( @calicocatxyz )です。

PageSpeed Insights で新ブログの表示速度をチェックしたんだけど、修正が必要だと言われたところが直せそうだったので実行してみたら、本当に表示速度がアップしたので驚きました。

リンクPageSpeed Insights

ここで修正方法を表示してみると次の CSS 配信を最適化してくださいと言われ、小さな CSS ファイルのインライン化を勧められたのです。っというわけで、今回は5秒でサイトの表示速度をアップさせる方法です。

Ads by Google

Web サイトの高速化

小さな CSS ファイルのインライン化

スクロールせずに見えるコンテンツのレンダリングをブロックしている CSS を排除することで、Web サイトの高速化が出来ます。その方法のひとつがリソースの重要部分を HTML 内に直接インライン化することなのですが、やり方は次の通り。

↓ このように変更します。

こうすることによりページが読み込まれた後で元の style.css が読み込まれるようになります。html の外に記述しちゃっていいの?!なんて思いましたが大丈夫なようです。

どの程度の表示速度アップが見込めるのか?

キャリコの場合、新ブログでは Stinger5 for Ladys をほぼデフォルトで利用しています。URL を PageSpeed Insights で計測してみると驚きの結果となりました。

インライン化する前

インライン化する前モバイル

インライン化する前パソコン

インライン化した後

インライン化した後モバイル

インライン化した後パソコン

モバイル 7175
パソコン 8587

この結果を見てどのように思ったでしょうか?キャリコは保有しているブログの全てをインライン化しました。STINGER5 をお使いのみなさんは、この CSS をインライン化することでサイトの表示速度を改善させることが出来ます。

レンダリングに遅延を及ぼす Font Awesome

アイコン型ウェブフォントでお馴染みの Font Awesome ですが、この CSS がページのレンダリングに遅延を発生させる原因になっていました。

ソース

今では STINGER5 に限らず多くのサイトでアイコン型ウェブフォントが利用されているから、これをインライン化させるだけでも表示速度に改善が見られるのではないでしょうか?

関連リンク

遅いサイトは検索結果で Slow と表示される?!

Google は表示速度が遅いページが検索結果に出てきたときに「 Slow 」と書かれたラベルを付けるテストを行っているようです。赤いラベルで目立つし、遅いサイトはユーザーの評価も Google の評価も下がるということになりそうです。タイミングよくこのような記事を目にしました。

Google、遅いサイトに付ける「Slow」ラベルをモバイル検索でテスト中か?

Googleは、表示速度が遅いページが検索結果に出てきたときに、「Slow」と書かれたラベルを付けるテストを行っているようだ。

www.suzukikenichi.com

まとめ

記述する場所を変えるだけでサイトの表示速度がアップするなら、これはやらない手はないと思います。モバイルでは 4pt もアップしたという印象だけど、たかが 4pt されど 4pt ですからね。是非、試してみて下さい♪

関連リンク

ライター紹介

キャリコ 統括、ライターの猫たちを束ねるボス

キャリコの創設者であり、助手には書けないようなネタをお届けします。

 - データ解析

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

  おすすめ記事

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

Google Analytics 壊れた?それとも STINGER5 がスゴイの?ブログ開設3週間で驚きの数値!

どうも、Google Analytics に翻弄されてるキャリコ( @calic …

あなたのソーシャル影響力スコアはいくつ?SNS で測定する分析ツール
あなたのソーシャル影響力スコアはいくつ?SNS で測定する分析ツール

上位3%の情報拡声器、キャリコ( @calicocatxyz )です。 ネットサ …

アドセンスの最適なレイアウトはサイトのジャンル別でヘルプページに全部書いてあった

どうも、キャリコ( @calicocatxyz )です。 アドセンスで結果が出て …

Google Analytics と Google AdSense の公開は継続します
Google Analytics と Google AdSense の公開は継続します

PV とブログ収入の公開は継続、キャリコ( @calicocatxyz )です。 …

Clafu で告知を作成したら本当にアクセスはアップするのか?
Clafu で告知を作成したら本当にアクセスはアップするのか?

これでもアクセスが増えなかったらもう諦めよう、キャリコ( @calicocatx …

続続・Feedly 購読者数の謎【 解決! 】

一応は解決、キャリコ( @calicocatxyz )です。 ここ最近 Feed …

Web サイトのページ表示速度が簡単に上がった方法はこの2つ
Web サイトのページ表示速度が簡単に上がった方法はこの2つ

歩きすぎて筋肉痛、キャリコ( @calicocatxyz )です。 予定を組むの …

収益力向上に役立つアドセンスの最適化は公式ブログに全部書いてあった

ロシア経由で帰国するのを諦めたキャリコ( @calicocatxyz )です。 …

Facebook ファンページのいいね!を1か月で43.75%アップさせた方法
Facebook ファンページのいいね!を1か月で43.75%アップさせた方法

Facebook ファンページの活用法がいまいちわかっていない、キャリコ( @c …

Feedly 購読者数の謎

どれを信じたらいいかわからない、キャリコ( @calicocatxyz )です。 …