モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
PWA版Googleマップが正式公開、ネイティブアプリ不要になる日がGマップにも来るのか？
[レベル: 上級] PWA 版の Google マップが正式にリリースされました。 新興国で販売されている低スペックのスマートフォンでも無理なく動く軽量版として、PWA 対応したウェブサイトの Google マップを Google は試験的に公開していました。 今は、google.com/maps?force=pwa にスマホからアクセスすればだれでも利用できます。 【補足】アプリがインストールされていると、URL にアクセスしてもブラウザではなくアプリが開くかもしれません。その時はシークレットモードで試してください。 ウェブ版 Google マップで Service Worker が動いてる Chrome のデベロッパーツールで見ると Service Worker がインストールされているのがわかります。 ホーム画面アイコンやオフラインファイルといったベーシックな PWA の機能を今の
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
XMLサイトマップとRSSフィードの両方を送信することをGoogleが公式に推奨
[対象: 中級] 新しいページや更新したページを含めサイト内のすべてのページのクロールを促進するために、XMLサイトマップとRSS・Atomフィードの両方を送信することを、英語版ウェブマスター向け公式ブログでGoogleは推奨しました。 有用性の高い情報なので、早ければ今日にも、日本語版の公式ブログで翻訳記事が公開されるだろうと予測します。 したがってこの記事では、若干の補足を加えつつも要点を簡潔にまとめて解説します。 XMLサイトマップとフィードの違い まずXMLサイトマップとフィードの違いと特徴を知りましょう。 一般的には、単にサイトマップと呼ぶことが多いですね。 普段僕たちがウェブマスターツール（またはrobots.txtのAuto Discovery）で送信する検索エンジン向けのサイトマップです。 サイトマップには通常、Googleにクロール・インデックスさせたいURLをすべて記述
[Google調べ] 入力フォームの最適化のために必須な4つの設定
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
スマートフォン用ページに振り分けるときはrel=”canonical”を設定する
iPhoneやiPad、Android端末の普及でスマートフォン専用のページを用意するサイトも増えてきています。 スマートフォンからのアクセスに対して「リダイレクトによってスマートフォン専用のURLに振り分けるとき」の注意点を今日はお伝えします。 rel=”canonical”タグで、対応するデスクトップ用ページのURLを指定してください。 重複コンテンツの発生を防止するためです。 現状GoogleはデスクトップPCとスマートフォンを区別せず同等に扱います。 スマートフォン用の検索結果も用意していません。 共に、ウェブクローラのGooglebotがクローリングします。 ※従来のモバイル端末はモバイルクローラのGooglebot-Mobileがクローリングします。詳しくはこちらの記事を参照。 スマートフォン用のコンテンツはデスクトップ用のページと、完全ではないにしてもほぼ同じになるはずです。
Google Analyticsで本当の直帰率を計測する方法
昨日、鷲見さんが『Google Analyticsの直帰率は評価の指標にならない』という記事を、寄稿してくれました。 Google Analyticsの直帰率は、純粋に１ページだけを見てサイトを離れたユーザーの割合を示しています。 鷲見さんが説明しているように、「直帰率が高い ＝ 悪いこと」とは限りません。 例えば、ブログにフォーカスしてみましょう。 ブログはその特性上、最新の記事だけ読んで、あとはそのブログから離脱するケースも少なくありません。 また、RSS などで更新ごとにブログに訪れるユーザーや、リピートの多いブログであれば、尚更その割合は多くなります。 まさしく、僕のブログにあてはまります。 僕のブログは、通常１日１記事の更新です。 RSSリーダーに登録して新着記事をチェックしたり、毎日お気に入りなどから直接アクセスしたりするユーザーが大勢いてくれます。 リピータになっているので、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
