マーケティング ブログ

モバイルサイトは大丈夫?Googleツール「Page Speed Insights」でサイト速度を測定・改善しよう

執筆者:Hara Yuka

 

訪問者の半数がページの読み込み中に離脱も?! 

mobile_web_site_spead_test_insights_02

 

営業先や電車からなど、企業のサイトもスマホから見られることが多くなってきました。

今回紹介する「Page Speed Insights 」はGoogleのページ速度チェックツールです。

弊社の事例を使って、どう改善したのか少し覗いてみましょう! 

   ◆目次◆

  1. 「Page Speed Insights」とは?
  2. 「Page Speed Insights」の結果
  3. 改善タスクに対応する:画像読み込みを改善
  4. 「compressor.io」での画像改善後の結果は?

  

「Page Speed Insights」とは?

スマホから何でも出来るようになってきましたね。
企業のサイトも、まだまだパソコンが主流ではありますが、営業先や電車からなど、スマホから見られることが多くなってきました。

弊社も、スマホ画面でもきれいに見れるように、サイトをレスポンジブ対応にしていますが、実際に電車内で自分のブログを確認しようとした際、「あれ?読み込みが少し遅いような」と感じてしまいました。

そこで、今回は、弊社サイトの事例を元にモバイルサイトの速度測定をしていきたいと思います!

今回紹介するのはGoogleのページ速度チェックツール、「Page Speed Insights 」です。

Page Speed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
サイトのURLを入れるだけで、モバイルサイトの表示速度を計測し、改善方法を提示してくれるので便利ですね!

早速、弊社マーケティングデザインのサイトを計測してみましょう。

【参考】
※Page Speed Insightsのページはこちら⇒https://developers.google.com/speed/pagespeed/insights/

mobile_web_site_spead_test_insights_01

 

 

「Page Speed Insights」の結果

サイトのURLを入れた後、診断結果のページに移りました。こちらが結果の一部になります。

mobile_web_site_spead_test_insights_05

【結果】
「オフスクリーン画像の遅延読み込み」
”オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください”

「オフスクリーン画像の遅延読み込み」とは?

「オフスクリーン画像の遅延読み込み」を簡単に説明すると、携帯の画面表示されていない部分への画像の読み込みを遅らせましょう、という事を提案しています。「そんなところに読み込みパワーを使う必要はないよ、その画像、見えてないので!」という感じですね。

画像遅延読み込みの方法として、JavaScriptを利用して非同期読み込みをするのが良ですが、今回は時間の都合上、暫定的な対応で対処したいと思っています。

(JavaScriptで別途サイトの速度改善を実施しましたら、またブログにてお知らせします。)

改善候補に上がった大きすぎる画像の約10件分のサイズを小さくする対応をしました。5.55s (s:秒)時間がかかっているようです。

 

 
改善タスクに対応する:画像読み込みを改善

画像のサイズを落としすぎて、画像が荒くなるのは避けたいですね。
画像の質を落とさず、どこがベストの最小サイズなのかを教えてくれるのがこちらのサイトツールです。


【参考】
※画像を適正サイズにしてくれるコンプレッサのサイトはこちら⇒https://compressor.io/

 

簡易手順

「compressor.io」の使い方の手順は簡単です。

  1. 「TRY IT」のボタンを押す
  2. ドラッグ・アンド・ドロップか、「SELECT FILE」で該当の画像を入れる
  3. サイズが小さくなっていることを確認
  4. 中心のバーを動かして、画像に粗さがでていないか確認
  5. 問題なければダウンロード・保存へ

 

mobile_web_site_spead_test_insights_02「TRY IT」のボタンを押して、該当のファイルを入れるだけで画像を小さくしてくれます。

mobile_web_site_spead_test_insights_06

 中心のバーを動かして、画質が荒れていないかどうかまで確認することが出来るので大変オススメのツールです。
こういったツール等を活用しながら、サイズが大きいと候補にあがった10枚程の画像に改善を加えました。 

 

 

「compressor.io」での画像改善後の結果は?

 

画像のすり替えが終わったので、再度、「Page Speed Insights」で結果を再診断しましょう。
5.55s から1.2sに改善したのがわかったと思います。ほんの一部の写真を変えただけで、4s(4秒)程の改善が出来ました。

mobile_web_site_spead_test_insights_04

他にも改善項目が複数あがりましたが、このように1個づつ、対応していくことで、
全体的にモバイルの読み込み速度をよりスピーディーにしていくことが出来ると思います。

以上、「モバイルサイトは大丈夫?Google公式ツールPage Speed Insightsでサイト速度を測定・改善しよう」でした。


モバイルでの閲覧がどんどん増えてくるであろう時代に、速度が遅くてサイトを離れてしまうのは悲しいですね…
ぜひ、Webサイト改善に活用してみては如何でしょうか。

それでは次回ブログも引き続きお楽しみに!

 

<https://www.japanma.or.jp/download/33/>  間違ったマーケティング・セールスでは会社はつぶれる(1)  あなたの会社のマーケティング・セールスは進化していますか? マーケティング・セールスの方法は人口減少や、マーケットの縮小などにより変化が必要です。マーケティング・セールスの根本的な仕組みが分かる小冊子『間違ったマーケティング・セールスでは会社はつぶれる(1)』では、マーケティング・セールスの基本知識の習得ができます。   資料をダウンロードする <https://www.japanma.or.jp/download/33/>

 

 

 

気軽にお問い合わせ下さい <https://www.mk-design.co.jp/contact>

 

どんな小さな質問・ご相談でも構いません。まずは、気軽にご相談ください。

オススメのブログ記事

廣見 剛利
代表取締役社長

20代の頃から、営業会社の組織を率いるかたわら、営業の重要性を認識しながらも、営業の限界について自問自答をし続ける。30代でCRMとSFAに出会いその限界を打破する光が見えつつも、変革しなければならないプロセスの多さに愕然とする。40代に入りマーケティングオートメーションと出会い、見込み客獲得から、見込み客教育、商談化のプロセスの自動化について体現する。商談化前が自動化されることにより、商談後の生涯顧客価値を最大化させるプロセスの見える化、見える化による再現性のある営業組織づくりを実現。同じ悩みをもつ日本企業の解決策を提供すべく、マーケティングデザインを設立。詳しくはこちら

三宅 毅
CMO(最高マーケティング責任者)
2000年半導体部品メーカーに入社。企画部門にて3次元CADの導入などによる業務効率化を成功させる。その後、CAE専門企業に移り、マーケティング活動全般、2008年Salesforce導入プロジェクトに関わる。マーケティングの可能性を追求すべく、2015年にBtoBマーケティング専門エージェンシーにて、Pardotなどの最新のマーケテイングオートメーションツールの導入や各種業界を支援。2017年5月より現職マックスヒルズのCMOとしてマーケティング活動から、会社の生産性向上などHR部門も統括。また、マーケティングデザインの設立にも携わり、中小企業における人材の育成にもつとめている。 Salesforceの導入事例として関連会社のマックスヒルズで掲載されました。詳しくはこちら
Hara Yuka
カスタマーサクセス・マーケティング担当
Webマーケティング業務に携わっております。前職のITコンサルティング会社では、SAP等の業務基幹システムのユーザーシステムサポート業務に従事し、お客様は国内のみならず、海外ユーザーにも対応しておりました。マーケティングデザインでは、ブログ記事を執筆する機会が多く、システムなどのIT・Web関連が苦手な方でも、分かりやすく伝わるように心がけております。日進月歩する分野ですので、最新の情報を出来る限りキャッチしつつ、役立つ情報を発信できるように、頑張っていきます!★Salesforce/EinsteinChampion(2020)認定 ★Twitterはこちら
柴沼 潤
インサイドセールス・マーケティング担当

2019年のはじめに入社し、Salesforce のEinsteinAnalyticsを活用した分析業務に取り組ませていただいております。ダブルワークしており、フリークライマーとしての活動の傍ら業務に取り組んでおります。マーケティングデザインでは私が取り組んできた分析業務の活用事例を紹介させていただくことで、営業支援ツールの導入・活用に役立つ情報を提供していきたいと考えております。機会があれば私自身の勤務の様子をご紹介させていただくかもしれません。ダブルワーク・テレワークといった勤務スタイルがどのように確立されているかなど、興味がある方々にとって有益な情報を発信できるように頑張ります。