navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。BrightonSEOより4月に開催されたBrightonSEOのレポート第二弾です。前回はECサイトのCVRを向上させる方法についてご紹介しました。SEOより今回はLighthouseのスコアで100(満点)を獲得する方法についてご紹介します。※冒頭の写真は会場のあるブライトンのビーチを早朝に散歩したときに撮った一枚です。最後にLighthouseとはLighthouseはGoogleが提供しているウェブサイトのパフォーマンスを計測して品質を改善するためのツールです。Googleのブログには、下記のように説明があります。ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。ウェブアプリ(PWA)対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse(灯台)」と名付けられました。・パフォーマンス・アクセシビリティ・プログレッシブWebアプリ・ベストプラクティス(改善案)・SEOスコアを計測し自身のウェブサイトの改善に役立てられます。Insight(PSI)の機能として提供されています今回のセッションでは下記の方法が紹介されていました。HTTP2で通信する画像の品質(WebPとその他)最新のJSを使い、重いライブラリは使わないリソースを小さな塊に分け、必要なものだけを読み込むJS、CSSへの重要なアプローチHTTP2で通信する様々な通信の仕方を決めているプロトコルの中でも、WEBでは代表的なHTTP。HTTPにはHTTP/1とHTTP/2のバージョンが存在します。これまで標準的に使われてきたHTTP/1では、ウェブサーバーに対して原則1つずつしかリクエストを送ることができませんでした。ページ内に画像が2枚ある場合、HTTP/1で通信しているとまず最初の画像を読み込んでから、もう1枚の画像を読み込み始める仕様です。大きなファイルや画像の場合、リクエストを一つ一つ処理するので非常に時間がかかっていました。それに対してHTTP/2では、複数のリクエストを同時に処理でき、HTTP/1で1枚1枚読み込んでいた画像を同時に読み込むことができるので、通信の効率化を実現し、読み込み速度の改善に繋がります。画像の品質(WebPとその他)ウェブサイトの容量の多くを占める画像も改善のポイントは多く、かつ効果の高いポイントです。fold(ビロウ・ザ・フォールド)と呼ばれます(あんまり使わないけど)。foldにしか出現しない画像のことを、offscreenと言います。offscreenは基本的に遅延読み込みをしたほうが余計なリソースを必要としないので、スコアは高まります。ユーザーが速くファーストビューを閲覧できるので、ユーザー目線で見てもおすすめです。formats次世代フォーマットの画像を提供するWebPなどの新しい画像形式は、PNGやJPEGよりも優れた圧縮を提供可能です。ダウンロードの高速化とデータの消費量の削減に繋がり、サイトの高速化へ繋がります。WebP形式の詳細についてはこのブログでも以前紹介させていただきました。実際に計測をして画像容量の削減を実現しています。images適切なサイズの画像を使用する「アダプティブイメージサイズ」と呼ばれるアプローチを採用します。sets’を使って切り分ける手法です。現時点ではDOM構造が大幅に拡張され、実装工数も比較的必要になりますが、適切なサイズの画像のみを読み込むことができるためスコア改善に繋がります。loadレイジーロード(遅延読み込み)を使うご存知、画像の遅延読み込みライブラリ「レイジーロード」。最近多くのサイトで実装されているレイジーロードは、画像がユーザーのビューポートに入ったときにだけロードし、それ以前にはロードしないようにします。ECサイトの商品詳細ページでは画像を大量に配置がしたりする場合は読み込み速度の改善に効果的な方法です。最新のJSを使い、重いライブラリは使わないパフォーマンス改善で重要なのは、最新のJSライブラリを利用することです。最新のJSファイルサイズは20%軽量で、最新のブラウザがサポートしています。古いブラウザとの互換性のために必要なレガシーコードが含まれていないためです。古いライブラリを利用しているWebサイトでは、JSファイルのロードに133ミリ秒かかるのに対し、最新のJSファイルのロードは41ミリ秒で大きく差があります。リソースを小さな塊に分け、必要なものだけを読み込む1つの大きなCSSまたはJSファイルを用意する代わりに、Webサイト上の各論理ブロックごとに、すべてのCSSとJSを小さな塊(または小さなファイル)に分割し読み込みさせます。(講演では、フォーム、ヘッダー、フッターなどの役割ごとに分割した例が紹介されてました。)このアプローチはHTTP/2を使うことで、各ファイルを同時にロードできるため、素早く待ち時間なしでロード可能です。JS、CSSへの重要なアプローチ通常、ウェブブラウザは全てのリソースを読み込んで解析が完了するまで、ページのレンダリングを開始しません。正確には、HTMLをロードし、それを解析後に、外部リソース(JS、CSS)を見つけ、それらをダウンロードし、さらに解析し評価してからページをレンダリングします。問題は単体のJSおよびCSSファイルがWEBサイトのパフォーマンスが依存していることです。基本的に解析と評価のプロセスには長い時間がかかります。コンテンツのロードが開始される前に、JS,CSSの解析が終了するまでユーザーは待機する必要があります。JS,CSSにはこれらのファイルにはユーザーにとって意味のあるコンテンツは含まれていません。それらの解決法としては、ページに必要なリソース(JS,CSS)をheadタグ内のhtmlにマークアップをしてインライン化してしまいます。すればブラウザはhtmlを受け取った後、必要なすべてのリソースを取得し、解析します。これにより、ブラウザはほとんど瞬時にページコンテンツをユーザに表示できます。最後に話の最後に、「今日スコアが100であっても、明日が同じだとは限らない」と言われていたのが印象的でした。スコアの改善によってランキングの改善も見られたようです。サイトによって事情があるので全ての方法を100%実施するのは難しいかもしれませんが、ぜひ試してみて下さい。(おまけ)会場にはGoogleのウェブトレンドアナリスト、ジョンミューラーの姿も。「ジョンミューラーと座って話そう」って日本じゃまず見れない光景でした。”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。関連する記事GoogleChromeが69へアップデートでWEBは常時SSLへの対応が前提に。2018.09.07以前からGoogleよりアナウンスされていたWEBブラウザ「GoogleChrome」の最新バージョンである69が先日リリースされました。Consoleと連携、SEO検証や改善がより簡単に。2018.12.27年末いかがお過ごしでしょうか?今年最大の寒波が押し寄せているようですが、移動など充分お気をつけ下さい。サポート部の市川です。ECサイトでは動画を活用することで、ユーザーの購買意欲[...]サイト内検索SEOカテゴリの最新記事2019.05.29【Google】2019年7月から新規サイトではモバイルファーストインデックスがデフォルトに。SEOより2019.04.10ヨーロッパ最大のSEOカンファレンス、BrightonSEOに参加してきます。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。