キャリコ

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 AdSense 停止から31時間で再開させた方法
Google AdSense 停止から31時間で再開させた方法

Google AdSense が復活、キャリコ( @calicocatxyz ) …

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

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

よろしい。Google AdSense を再開してやろう。
よろしい。Google AdSense を再開してやろう。

ありがたき幸せ、キャリコ( @calicocatxyz )です。 19日にポリシ …

はてなブックマークが 300 USERS 超えた時の PV 数
はてなブックマークが 300 USERS 超えた時の PV 数

4回目のバズはレベルが違かった、キャリコ( @calicocatxyz )です。 …

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

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

1
「 STINGER5 」で検索したら1ページ目に表示されるようになった要因を考察

いよいよ帰国日が決まりました、キャリコ( @calicocatxyz )です。 …

w
Feedly 購読者数の謎

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

どのようにしてキャリコにたどり着くのか?オーガニック検索を公開します
どのようにしてキャリコにたどり着くのか?オーガニック検索を公開します

最近アナリティクスを見るのが楽しくて仕方がないキャリコ( @calicocatx …

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

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

初心者がブログを開設した際に Google でやった6つのこと

こんにちは、キャリコ( @calicocatxyz )です。 今回は備忘録として …