タグ

performanceとwebに関するShisamaのブックマーク (4)

  • フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説! | Tech Blog

    この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ?スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか? まずは、この状態を定量的に説明するためFPS(フレームレート)から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6

    フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説! | Tech Blog
    Shisama
    Shisama 2019/03/19
    ブラウザのレンダリングの仕組みを図で解説。また、パフォーマンスを落とさないために注意が必要なことも紹介されている。
  • Chrome Dev Summitに参加しました! - from scratch

    Chrome Dev Summit に初参加しました!色々トピックとして気になったものを紹介してます。後直接 Addy Osmani とか Paul Irish とかに聞く機会があったので、色々ついでに聞いてきました。 Chrome DevRel teams create a Chrome cake #ChromeDevSummit [pic.twitter.com/5u6VPZ0oHb](http://pic.twitter.com/5u6VPZ0oHb)— Yosuke FURUKAWA (@yosuke_furukawa) November 12, 2018 Chrome も 10 周年なんですよねー。感慨深い。 1日目は「現在のChromeでできること、やってること」という感じで、ケーススタディやツールチェインの話が多めでした。 2日目は「未来のChromeでできること、今後やるべ

    Chrome Dev Summitに参加しました! - from scratch
    Shisama
    Shisama 2018/11/17
    ProjectVisBugとSquoosh、非エンジニアとやりとりするのにめっちゃ使えそう!LighthouseでSquoosh測ってみたらPerformanceとSEOが100点だった。すごい。https://gyazo.com/c344c978f0c4b1df407eed0a6d853c33
  • Web Application 2018 From Performance Perspective

    Webパフォーマンスについての話を manabiya.tech で発表しました。

    Web Application 2018 From Performance Perspective
    Shisama
    Shisama 2018/03/25
    パフォーマンスは文化。パフォーマンス警察を育てよう。
  • 「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは

    「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN(Content Delivery Network)を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も(ネットワーク的に)近いサーバにキャッ

    「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
    Shisama
    Shisama 2017/11/16
    日経電子版(https://r.nikkei.com)と似ている。CDNはfastlyを使って、画像はwebp、アイコンはsvg、service workerでキャッシュ。ちなみにLighthouseの結果は PWA: 91、Performance: 94、Accessibility: 80、Best Practices: 81
  • 1