[B! パフォーマンス] hosicameのブックマーク

hosicame id:hosicame

パフォーマンスに関するhosicameのブックマーク (8)

WebパフォーマンスとプロダクトKPIの相関を可視化する話 | CyberAgent Developers Blog
技術本部 Web Initiative Center で Web プロダクトの品質改善や組織の技術推進に取り組んでいます、 @1000ch です。その活動のひとつに、直帰率や PV/Session といったプロダクトの KPI を上げることを目的とした Web パフォーマンスの向上があるので、今日はその取り組みについて書きます。旧来の Web パフォーマンスの評価指標これまでは DOMContentLoaded イベントや load イベントの値が Web ページのパフォーマンスの良し悪しとして扱われることが多かったと思います。しかしアーキテクチャの複雑化の一途をたどる Web ページのパフォーマンスを測る上では、もはや適切な指標とは言えません。 DOM 構築完了を指す DOMContentLoaded イベント DOMContentLoaded は DOM ツリーの構築完了を表します
hosicame 2017/09/13
パフォーマンス

performance
リンク
sitespeed.ioを使用した継続的なパフォーマンス測定 | フロントエンドBlog | ミツエーリンクス
Webサイトのパフォーマンスを測定する場合、数ページ単位でのパフォーマンス測定は手動でも可能ですが、継続的に行っていくのは根気が必要です。ましてや、ページ数が多くなるほど大変な作業に発展してしまいます。今回紹介するsitespeed.ioは、豊富なオプションとともに、以下の特徴を持っています。テスト結果をページとして保存クロールによる複数ページのパフォーマンス測定 Yslowによるスコア判定 Navigation Timingによる速度計測 PageSpeed Insightsとの連携 WebPagetestとの連携 Grafanaとの連携 Jenkinsとの連携インストール方法は公式ページに記載されているとおり、npmを使用してインストールします。 $ npm install -g sitespeed.io sitespeed.ioの活用例サイト全体だと長期的な作業になりますの
hosicame 2017/01/05
パフォーマンス
リンク
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社）こんにちは、ふろしきです！私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
hosicame 2016/10/17
javascript

パフォーマンス
リンク
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。この API の使い方と、本サイトへの適用について記す。要素交差(intersection)の検出ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。代表例は画像の遅延読み込みであり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。つまり、要素出現の取得
hosicame 2016/10/17
JavaScript

パフォーマンス
リンク
Intersection Observerが導入されvisibility計算やウェブの高速化が進む？
今年に入ってからポツポツと「Intersection Observer」の話が出てくるようになりました。まだDraftの仕様ですが、GoogleですとChromeのバージョン51から導入されております。広告やコンテンツにおけるVisibility評価コンテンツ読み込みをコンテンツ領域が実際に"表示された"タイミングで開始することでページ読み込みを待つ必要がない実際のdemoとしてはまだchrome betaかchrome devでしか見れませんが、画像のロードとしてdiv領域が50%に到達した時点で読み込む事を見せている、こちらのページでしょうか。広告のvisibility評価が正確になるだけでなく、コンテンツ運営側にとっても実際読まれているの？という部分が明確化されるのと同時に、スマートフォンにおけるコンテンツ表示の評価にも役立つものになると思います。 Intersection
hosicame 2016/10/17
JavaScript

パフォーマンス
リンク
IntersectionObserverを使ってlazyload-imageを書き直した - 1000ch.net
IntersectionObserverを使ってlazyload-imageを書き直した画像をスクロール同期でロードする<lazyload-image>というWeb Componentsの内部処理を、IntersectionObserverで書き直した。可視領域に要素が入っているかどうかの判定リライトする前までは、要素それぞれにscrollイベントのリスナを発行して、その中で画面内に要素が表れているかを判定していた。throttleしているとはいえ、それぞれのリスナで以下の処理を行っていたのでややパフォーマンスが気になっていた。 getBoundingClientRect()で要素の矩形を取得する document.documentElement.scrollTopとdocument.documentElement.clientHeightで画面の上下端を取得する要素が可視領域と交
hosicame 2016/10/17
javascript

パフォーマンス
リンク
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！そもそも、ブラウザのなにが問題なのか？ Windo
hosicame 2016/10/17
JavaScript

パフォーマンス
リンク
そろそろクリティカルCSS（Above the fold）について説明しておこうか
先日HTML5minutesという勉強会でクリティカルCSSについてLTをしてきたのだが、あまり日本では馴染みの無い単語なのでここで説明しておこう。クリティカルCSSとは某RPGの大打撃を与える印象のクリティカルヒットとかそうゆうのではなくて、 CSSにおけるブラウザ表示パフォーマンスのTipsである。クリティカルというのはクリティカルパスのことで、クリティカルパスCSSなどとも呼ばれる。クリティカルパスとは、プロジェクトの各工程を、プロジェクト開始から終了まで「前の工程が終わらないと次の工程が始まらない」という依存関係に従って結んでいったときに、所要時間が最長となるような経路のこと。クリティカルパスに含まれる工程に遅延が発生すると、その分だけプロジェクト全体のスケジュールも遅延するため、クリティカルパスに含まれる工程は特に遅れてはならない重要な工程として重視されることになるク
hosicame 2015/07/19
パフォーマンス

CSS
リンク
1