PROFESSIONALLY OPTIMIZED WEBSITES STARTING AT $995
Our team of SEO Web Design gurus are standing by to assist you achieve your online marketing goals.

+1-971-599-3330

REQUEST QUOTE
SEO Web Design, LLC aims to improve business by delivering effective solutions based on innovative technologies and professional designs. Discover the variety of services we offer and convince yourself on the basis of the latest works that we've done. We love building fresh, unique and usable websites optimized specifically for your niche.

Responsive Web Design

SEO / SEM / Social Media

Conversion Rate Optimization

Email Marketing

Online Presence Analysis

Web Hosting
Top
SEO Web Design, LLC / Web Design  / Some Performance Links

Some Performance Links

Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger.

Web Performance Recipes With Puppeteer[1]

Puppeteer[2] is an Node library for spinning up a copy of Chrome “headlessly” (i.e. no UI) and controlling it. People use it for stuff like taking a screenshot of a website or running integration tests. You can even run it in a Lambda[3].

Another use case is running synthetic (i.e. not based on real-users) performance tests, like some of these new Web Core Vitals[4]

Addy Osmani[5] lists out a bunch of these “recipes”[6] for measuring certain performance things in Puppeteer. These would be super useful as part of a build process alongside other tests. Did the unit tests pass? Did the integration tests pass? Did the accessibility tests pass? Did the performance metrics tests pass?


BrowserStack SpeedLab[7]

BrowserStack released a thing to measure your site and give you a performance score.

You get the tests back super quick which is cool. I can see how tools like this are good for starting conversations with teams about improving performance.

But… that number seems a little weird. They don’t exactly document how it’s calculated, but it seems to be based on stuff like Time to First Byte (TTFB) and the page load event, which aren’t particularly useful performance metrics.

It’s not bad that this tool exists or anything, but I don’t think it’s for practitioners doing performance work.


5 Common Mistakes Teams Make When Tracking Performance[8]

Karolina Szczur[9] from Calibre[10] documents some common team struggles like, for example, having a team be able to identify real issues from variability noise.

Many people from different backgrounds can view performance dashboards. Not knowing what constitutes a meaningful change that needs investigation can result in false positives, lack of trust in monitoring and cycles spent looking for reasons for performance regressions or upgrades that aren’t there.


Are your JavaScript long tasks frustrating users?[11]

50ms. That’s how long until any particular JavaScript task starts affecting user experience. Might as well track and (ideally) fix them.

When the browser’s main thread hits max CPU for more than 50ms, a user starts to notice that their clicks are delayed and that scrolling the page has become janky[12] and unresponsive. Batteries drain faster. People rage click or go elsewhere.

References

  1. ^ Web Performance Recipes With Puppeteer (addyosmani.com)
  2. ^ Puppeteer (developers.google.com)
  3. ^ run it in a Lambda (www.npmjs.com)
  4. ^ Web Core Vitals (css-tricks.com)
  5. ^ Addy Osmani (twitter.com)
  6. ^ “recipes” (addyosmani.com)
  7. ^ BrowserStack SpeedLab (www.browserstack.com)
  8. ^ 5 Common Mistakes Teams Make When Tracking Performance (calibreapp.com)
  9. ^ Karolina Szczur (thefox.is)
  10. ^ Calibre (calibreapp.com)
  11. ^ Are your JavaScript long tasks frustrating users? (speedcurve.com)
  12. ^ janky (speedcurve.com)

Powered by WPeMatico

[email protected]

CSS-Tricks.com offers daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

No Comments

Sorry, the comment form is closed at this time.