wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

      2018/04/05

こんにちは、管理人@SS_mshpです。

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介します。

最近では競合もサイト持っていないということが少ないので、あまりにもページ表示速度が遅すぎると、ユーザーが離脱して他のサイトに行ってしまうことが考えられます。早速、チェックをしてみましょう。

■どこで発見?使用方法は?

先日、web担当者forumのブログ
「御社のスマホサイト、遅いから19%離脱してるよ」グーグルのわかりやすい測定サービス登場
http://web-tan.forum.impressrd.jp/e/2017/07/04/26217
でみたのですが、このツールです。


https://testmysite.withgoogle.com/intl/ja-jp

ちょっと『pagespeed insight』ぽく、使用方法も簡単。測定したいサイトのurlを入れるだけ。これで、よくあるスマートフォン回線とおなじスピードを再現して(analiticsにも携帯アクセスということで記録されるようです)、チェックしてくれます。

■管理人もスマートフォンサイトの速度をチェックしてみます。

管理人のもってるオーディオや曲アレンジのサイトで試してみました。スマホ専用に作ったものでなく、pcにも対応できるレスポンシブタイプなので、やや苦戦するかなと思いましたが、そこそこ良好のようです。pagespeed insightでは96点出た画像を、twitterに上げています

上記のweb担当forumブログでは、『30秒超えるとエラー(実際の離脱はもっと早い)』などツッコミどころがある点が述べられていますので、数字が緑になるよう(だいたい5秒以内くらい)を目安とするとよいでしょう。

■サイト表示速度アップポイント1:画像圧縮して小さいサイズに

pagespeed insightなどでもよく出てくる、表示速度高速化ポイント。jpg画像を圧縮して、(見た目は同じでも)サイズを小さくします。いろいろな画像編集ソフトでできるテクニックです。例えば500KBのpng画像を、80~90KBのjpgにした場合は、体感的にもかなり速くなります。
ただし、圧縮しすぎると画質がザラザラしてくるので、トップやランディングなどはサイズ小さく、メインのコンテンツが画像やイラストになる場合は、多少重くても解像度が高くてきれいなものを、というように使い分けます。

(すべてgoogleの言うとおりならok、ということはありません。彼らはクリエイティブコンテンツを作っていませんし、検索ユーザーのデータ無くして単独でその質を判断することもできないからです。)

■サイト表示速度アップポイント2:JavaScript/CSSを圧縮する

http://refresh-sf.com

オンラインJavaScript/CSS/HTML圧縮サービスというのを使ってみました。ウィンドウJavaScript/CSSを入れてボタンを押すと圧縮してくれます。
さらに、gzip(JavaScriptなどを圧縮したファイル)も出せるスグレモノ。gzipファイルを出したときは、htaccessファイルを書き換えて(他にも方法あります)、この形式でも読み込んでスクリプト実行できるようにします。

今回計測したサイトでは、主にこのようなテクを使用しました。

■以前出ていた『pagespeed insight』との違いは?

pagespeed insightでも似たようなチェックができます(pc/sp表示速度と、読み込み改善ポイント通知)。しかしこちらは、『具体的な秒数や、競合同ジャンルのサイトと比べてどうか?』みたいなポイントも。

改善ポイントはだいたい画像やスクリプト/CSS、キャッシュであることが多いので、これらの点を意識して、『離脱が1日5人減るを積み重ねたら、1ヶ月でどのくらい売り上げ/メインで見せたいページへ誘導が増えるか』みたいなのを狙っていきましょう!

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト高速表示 【タグ】 -

  関連記事

【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)

今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサーバーで …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?

今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグイ …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット …

スマホページ高速表示のための、CSS圧縮方法まとめ

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示する …

ページ高速表示~正規URLとリダイレクトで、速度スコアが10点近く違う件

今回は、リダイレクト処理における、ページ表示速度の変化を検証します。 題 …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策して …