Published: October 8, 2021 If you've used connection throttling in the network panel in a browser's developer tools (or Lighthouse in Chrome) to assess loading performance, you know how convenient those tools are for performance tuning. You can quickly measure the impact of performance optimizations with a consistent and stable baseline connection speed. The only problem is that this is synthetic
Guess.js provides libraries & tools to simplify predictive data-analytics driven approaches to improving user-experiences on the web. This data can be driven from any number of sources, including analytics or machine learning models. Guess.js aims to lower the friction of consuming and applying this thinking to all modern sites and apps, including building libraries & tools for popular workflows.
Lighthouse 3.0 is out! 3.0 features faster audits, less variance, a new report UI, new audits, and more. How to update to 3.0 CLI. Run npm install -g lighthouse@next. Node. Run npm install lighthouse@next. Chrome Extension. Your extension should auto-update to 3.0. Chrome DevTools. Lighthouse 3.0 will be available in Chrome 69. Faster audits and less variance Lighthouse 3.0 completes your audits f
Lighthouse is an automated tool for improving the quality of your site. You give it a URL, and it provides a list of recommendations on how to improve page performance, make pages more accessible, adhere to best practices and more. You can run it from within Chrome DevTools, as a Chrome Extension, or even as a Node module, which is useful for continuous integration. For a while now, Lighthouse has
Code Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js The beauty of the web is that there is no “install” step. Someone, somewhere taps a link to your site, and moments later it appears instantly in front of them. At least, that’s the idea—but not all devices and networks are created equally. Sites that feel fast on a desktop computer with broadband can feel dow
If you've optimized your code, but your site still loads too slowly, it's probably the fault of third-party scripts. Third-party scripts provide a variety of useful features that make the web more dynamic, interactive, and interconnected. Some of them might even be crucial to your website's function or revenue stream. But using them is risky: They can slow down your site's performance. They can ca
Few weeks ago I noticed a blog post “Oxidizing Source Maps with Rust and WebAssembly” making rounds on Twitter - talking about performance benefits of replacing plain JavaScript in the core of source-map library with a Rust version compiled to WebAssembly. This post piqued my interest, not because I am a huge on either Rust or WASM, but rather because I am always curious about language features an
High, Low, AverageWedgetail gives you accurate timings for the best, worst and average timings. Measure thousands of executionsGet accurate statistics out of the box, by setting `numberOfExecutions` to at least 5000. import test from "ava"; import { timeExecution } from "wedgetail"; test("Can time a function", async t => { // This object contains a definition of the threshold // at which your func
Jeremy Wagner（ジェレミー・ワグナー） フロントエンドのWeb開発者として10年以上の経験を持っています。Webパフォーマンスに関する執筆活動の他、Web開発関連のカンファレンスでさまざまなトピックに関する講演を行っています。 著者Webサイト：https://jeremywagner.me Twitter：@malchata 武舎 広幸（むしゃ ひろゆき） 国際基督教大学、山梨大学大学院、カーネギーメロン大学機械翻訳センター客員研究員等を経て、東京工業大学大学院博士後期課程修了。マーリンアームズ株式会社（www.marlin-arms.co.jp）代表取締役。主に自然言語処理関連ソフトウェアの開発、コンピュータや自然科学関連の翻訳、辞書サイトDictJuggler の運営などを手がける。訳書に『マッキントッシュ物語』『暴走する帝国』（以上翔泳社）『ハイパフォーマンスWebサイ
We are talking a lot about performance, how it can be improved, which tools to use for performance improvements but less about how to keep reached performance on a proper level. So, let’s take a look at tools which can help you to do so. Size Limit ai/size-limit Size Limit is a tool to prevent JavaScript libraries bloat. With it, you know exactly for how many kilobytes your JS library increases th
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Idiomatic Redux series. An overview of why and how to use Reselect with React and Redux Intro 🔗︎ In a good Redux architecture, you are encouraged to keep your store state minimal, and derive data from the state as needed. As part of that process, we recommend that you use "selector function
Airbnb has some incredible listings in Cuba…and also a corner of the office inspired by Habana Vieja We have been hard at work migrating the airbnb.com core booking flow into a single-page server-rendered app using React Router and Hypernova. At the beginning of the year, we rolled this out for the landing page and search results with good success. Our next step is to expand the single-page app to
Product { this.openCategory = category; const productMenu = document.querySelector('.product-menu'); window.DD_RUM.onReady(function() { if (productMenu.classList.contains('show')) { window.DD_RUM.addAction(`Product Category ${category} Hover`) } }) }, 160); }, clearCategory() { clearTimeout(this.timeoutID); } }" x-init=" const menu = document.querySelector('.product-menu'); var observer = new Muta
In this post, there’s lots of stuff to cover across a wide and wildly changing landscape. It’s also a topic that covers everyone’s favorite: The JS Framework of the Month™. We’ll try to stick to the “Tools, not rules” mantra and keep the JS buzzwords to a minimum. Since we won’t be able to cover everything related to JS performance in a 2000 word article, make sure you read the references and do y
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
