ウェブデザインやクリック率を改善するためにGIGAZINEでやっているA/Bテストとは？
画像や文章のパターンを複数用意し、それをウェブサイト上で入れ替えて表示させてユーザーの反応を見る「A/Bテスト」は、ユーザビリティやコンバージョンを向上させる方法として利用されます。GIGAZINEでは常時複数のA/Bテストを行っており、「どのような見せ方、やり方の効果が高いのか？」という調査を行っているので、その中でわかったことをまとめました。 ・GIGAZINEの露出枠 GIGAZINEには記事広告・バナー広告・自社広告などを表示させる「露出枠」がトップページや各記事ページに配置されていますが、この露出枠は記事をスクロールすることによってユーザーに対して表示されるので、「記事をしっかり読んでもらうこと」が露出アップにつながります。そのためにはもちろん、記事自体のクオリティが非常に重要であり、通常記事でも記事広告でも、「質の高さ」を重視しています。 そしてもう1つ、「記事をしっかり読んで
Introduction · Webフロントエンド パフォーマンス改善ハンドブック
Webフロントエンド パフォーマンス改善ハンドブック このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。 ダウンロード版 埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版 目的 このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間
某サイトに見る狂ったjQueryのソースと高速化・改善方法
自宅の光回線が遅すぎて乗り換えを検討していた矢先、Ymobileのキャンペーンページがやけにもっさりしているので、思わずソースを覗いてしまった。一流企業のソースはさぞかしモダンなのだろうと思ったら、jQueryで鬼のDOMいじり。思わず閉口してしまったので同じ轍を踏まないために改善方法を考えます。 経緯 我が家で契約しているSo-net光という回線が常時1Mbps/s以下という稀に見るクソっぷりなので、違約金を払ってでも回線を変更したいと考えていました。 まずなぜSo-net光にしたかと言うと、全ての業者と契約パターンの中で、最も運用費が安かったからです。キャッシュバックが56,000円・月額費用が2,800円・初月無料だったので21ヶ月使ってようやく料金が発生し始めるという計算です。ちなみに違約金は3万円ほどになる予定です。 そこで乗り換え違約金全額キャッシュバックのSoftBank光に
CSS 最適化によるパフォーマンス改善 | murashun.jp
［ ＋ expand ］破綻する CSS CSS ファイルサイズの削減Minify 化使われていないルールセットの削除重複しているルールセットの削除ショートハンドプロパティクリーンな CSS に変換するモジュールCSS セレクタの最適化レンダリングの最適化Calculate StyleLayoutクロスブラウザ対応まとめ関連記事破綻する CSS 以前、CSS が破綻する原因を 破綻しにくい CSS 設計手法と命名規則 の記事で書きました。 破綻しにくい CSS の設計手法はいくつか考案されていますが、いずれも完璧ではありません。多くのサイトでは、CSS が適切にメンテナンスされておらず、肥大化しています。肥大化した CSS はブラウザのレンダリングパフォーマンスに悪影響を与えます。 本ページでは、CSS を最適化しパフォーマンスを向上させる方法を説明します。ただし、CSS の最適化はデータ
条件が揺れて真逆のゴールに向かってませんか？ 失敗しないA/Bテストのための心構え
こんにちは、アナグラムの森野です。ネットショップのための運用型広告、その活用方法を紹介していく本講座。連載第7回目は、リスティング広告を筆頭とした運用型広告のフィールドで、揺れの少ないA/Bテスト（読み：えーびーてすと）を行うための心構えについてです。 A/Bテストとは A/Bテスト（英: A/B testing）とは、主にインターネットマーケティングで行われる、施策判断のための試験の総称である。 狭義ではA/Bテストは仮説検定を指す俗称であるが、広義のA/Bテストはインターネットマーケティングにおける施策の良否を判断するために、2つの施策同士を比較検討する行為全般を指す。（引用元：A/Bテスト – Wikipedia） シンプルに言うと、AとBのどちらが良いかを比べるテストですね。別名、スプリットテスト（スプリットランテスト）。 大量のパターンを一斉に試すテストは多変量テストと呼ばれ、こ
GoogleのZopfliを利用したオープンソースのMac用PNG画像圧縮ツール「Crunch」がリリース。
GoogleのZopfliを利用したオープンソースのMac用PNG画像圧縮ツール「Crunch」がリリースされています。詳細は以下から。 Crunchはソースコード用フォント「Hack」などを開発しているSource FoundryのエンジニアChris Simpkinsさんが新たに公開したMac用画像圧縮ツールで、PNG画像専用ですが圧縮にGoogleが2013年に公開した「Zopfli(zopflipng)」アルゴリズムを利用しているそうで、 Crunch is a macOS tool for PNG image file optimization. It combines selective bit depth, color type, and color palette reduction with zopfli DEFLATE compression algorithm enc
HTMLからはじめるWebパフォーマンス - Qiita
#WebパフォーマンスにおいてHTMLで出来ること Webパフォーマンス Advent Calendar 2017 9日目の記事です。 比較的取り組みやすいHTMLの変更だけで、Webパフォーマンスを改善する方法を紹介します。 ここではHTMLの圧縮等は扱いません。 ##Resource Hints(dns-prefetch, preconnect, prefetch, prerender) 指定しておくことで、ページ遷移時に名前解決・接続・リソースの取得・レンダリングを早めることができる。 Resource Hintsはあくまでページ遷移時に効果を発揮するものなので、初回読み込みするページでは関係がない。 https://developer.mozilla.org/ja/docs/Web/HTML/Link_types https://www.w3.org/TR/resource-hin
| How to Get 100/100 Google Page Speed Score with Middleman and Nginxelliotec
How to Get 100/100 Google Page Speed Score with Middleman and Nginx October 17, 2017 Everyone hates slow websites. Everyone likes fast websites. I recently worked on a Google AMP (Accelerated Mobile Pages) project, which was created to mitigate bloated websites from being at the top of Google results on their mobile web index. I personally think AMP is a bad thing for us but that’s beside the poin
WordPressを高速化する12の方法 – 表示速度を上げるテクニック
サイトの表示速度を上げるメリット 読み込み速度を上げることには、大きなメリットがあります。 メリット1：ユーザービリティの向上 Googleの公式調査によると、モバイルページにおいての「読み込み速度の遅延」と「直帰率」の関係は以下のようになるそうです。 読み込みが1秒から3秒になると、直帰率は32%上がる 読み込みが1秒から5秒になると、直帰率は90%上がる 読み込みが1秒から6秒になると、直帰率は106%上がる読み込みが1秒から10秒になると、直帰率は123%上がる これは致命的に感じられますね。もっと言うと、読み込み速度の低下により直帰する訪問者は、ただの他のページを見てくれないだけではなく、すぐに帰っていること予想されます。「3分滞在して直帰」ではなく「5秒待って遅いから直帰」という状態なわけですね。 現在のGoogleは検索順位を決めるうえで、検索ユーザーの動きまで見ている説もあり
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
サイト滞在時間伸ばす！ 記事を読むのに必要な時間を表示する方法【図解あり！】｜魂を揺さぶるヨ！
こんにちはユレオです！ いろんな方のブログを見ていると様々な工夫がされていますが、不思議に思った工夫がありました。 記事のタイトルの上に「この記事は何分で読めます」というのが書かれていることがあるのですが、これはいったい何の意味があるのだろう？ 忙しい人が「2分で読めるなら今読むか」とか、「10分かかるならブックマークして後で読もう」と判断するためのものなのかなと思っていたのですが、どうやらその通りだったみたいです。
SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita
ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ
Googleも重要視！Webサイトの表示速度アップに欠かせないJavaScript/CSSの圧縮ツール9選
Webサイトの表示速度をアップさせる上で、JavaScriptやCSSなどWebサイトの構成要素を圧縮することは重要な解決策の一つです。圧縮とはソースコード中のコメントや改行を削除し、ファイル自体をコンパクトにする作業です。圧縮することで処理を高速に行えるようになります。 Googleが"ページ表示速度を検索順位評価要素に入れている"ことを公表していることもあり、Webサイト構築・運営に関わる担当者にとって「表示速度の向上」は放置できない課題といえます。 今回は、Webサイトの高速化に欠かせないJavaScript/CSSの圧縮ツールをその活用法とともにご紹介します。 JavaScript/CSS圧縮ツールを使うメリット 一般的にWebサイトの表示処理速度が遅くなる要因として、以下の3つが挙げられます。 1. Webサーバのハードウェア的なパフォーマンスが悪い 2. ネットワークが遅い 3
感覚でA/Bテストをしてませんか？失敗しないために必ずチェックすべき16項目
A/Bテストは、ある一定の基準さえクリアしていれば、小さなトラフィックでも実施でき、トライ＆エラーで実績とノウハウを蓄積することのできるWeb改善手法の一つです。特性として成果に繋がりやすい、という確実性の高さを備えているため、最近はさらに重要性が増してきています。特に米シリコンバレーからはじまり、国内でも浸透しつつある“グロースハック”という考え方において、このA/Bテストは必要不可欠と言ってもいいでしょう。 ※グロースハックとは、簡単に言うと自社の製品やサービスを効率的に成長させるための概念。米シリコンバレーでは、グロースハックを専門とした“グロースハッカー”という職種も存在するほど。 そのような背景から、実際に取り組んでみる企業も増えていますが、「何をテストすれば良いのか分からない」といった根本的な問題や、「思った以上に社内のリソースが必要で運用できない」「テストパターンが中々オリジ
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
コンバージョン数を上げるための入力フォーム改善テクニック4記事
ネットショップなど、何かしらのコンバージョンを目的としているホームページは、コンテンツ内容はもちろん、入力フォームの最適化も非常に重要な施策です。 コンバージョンするモチベーションを持った顧客が入力フォームに行き着くわけですが、一度カートに商品を入れたにも関わらずコンバージョンしない、いわゆる「カゴ落ち」してしまうユーザーは、全体の約68％にものぼるというデータがあります。 かご落ち率（カート放棄率）の世界平均と、離脱の理由アンケート結果【統計】 カゴ落ちする理由は費用関係が多くを占めていますが、入力フォームが複雑で時間がかかってしまうというのも大きな要因となっているようです。 今回は、 購入意志のあるユーザーを入力フォームで取りこぼさないための入力フォーム改善テクニックをご紹介します。 ※紹介する記事を全て閲覧するには会員登録が必要です。 1. 入力フォームボタンの最適化 https:/
alternate属性とcanonical属性を正しく使ってスマホサイトの存在をGoogleに伝えよう｜ferret [フェレット]
ウェブサイトを運営していて、デスクトップ用サイトURLとスマホ用サイトURLを分けている場合あります。この場合、きちんと検索エンジン向けに設定を行わないとスマホ用サイトの存在を認識してくれないケースがあります。それは主に、URLをデスクトップとスマホで分けて運用しているページの場合が多いです。 このような場合は、デスクトップ用URLとスマホ用URLの双方を検索クローラーに伝える必要があります。 今回は、canonical属性とalternate属性を使ってスマホページの存在を検索エンジン向けに伝える方法を紹介します。 目次 canonicalとは alternateとは Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある URLを分けている場合の対策方法 レスポンシブデザインの実装を検討しよう よくある質問とその回答 canonicalとは canoni
![alternate属性とcanonical属性を正しく使ってスマホサイトの存在をGoogleに伝えよう｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0730dbcc8279e5a9cf9e7e90cece0fca4736d6cf/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F1426%2Feyecatch%2Fdefault-2b35b1392942385f6e4a644bf6c0ba8b.jpeg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メンバーズ｜Members Co.,Ltd.
プラグインで追加されたCSSを１つにまとめてWordPressを高速化 | アフィリエイトで稼ぐ方法を全部話そうと思う