東北・仙台市拠点のwordpressエバンジェリストが送る、 動画・webサイト制作・bgmやテーマ曲アレンジまで考えるコラム!

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

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

      2017/08/17

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

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

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

先日、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ヶ月でどのくらい売り上げ/メインで見せたいページへ誘導が増えるか』みたいなのを狙っていきましょう!


 - webメディア制作・運用

  関連記事

【ワードプレスサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る

今回は、ワードプレスを利用して、新しいサイトを作ってみたときの話題です。 テーマ …

ワードプレスwebサイトの、記事カテゴリー調整方法~設定しかた、親・子カテゴリ使い分け

今回は、このサイトにも使われているweb制作ツール・ワードプレスでの、カテゴリー …

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワードプレス …

Googleウェブサイトビルダーで簡単サイト制作~ローカルSEO、マップ表示効果!

今回は、検索屋のグーグルが新しくつくったサイト制作サービス『Googleウェブサ …

ワードプレスのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?

今回は、このサイトとかでも使っているwebサイト作成ツール『wordpress( …

ワードプレスSTINGERでアドセンスコードが入らない~『テキストドロップ』勘違いと、対処方法

今回は、このサイトにもつかわれているツール『ワードプレス』での、アドセンスコード …

このサイトでPVを15倍(月間1480pv→22500pv・1年半の間)にした、seo・スマホ・記事話題の対策

今回は、いろいろエディットやチューニングをしていたら、アクセスが増えてPVが上が …

googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法

今回は自社でwebサイトメディア・ブログなどを行い、『広告で収益化』する場合に注 …

ワードプレスホームページ制作『ブログ記事投稿ページ・固定ページ』使い分け

今回は、管理人がこのサイト・音楽スクールや一般企業のお取引先さまなどのサイトに使 …

youtubeで動画を宣伝する方法~1日あたり予算や、ターゲットを指定しながら

今回は、コンテンツ発信関連・youtubeで動画を宣伝する方法についてお話したい …