Technology Performance Pulse

In Defence of DOMContentLoaded

CSS Wizardry

JUNE 30, 2023

domContentLoadedEventStart And of course, we should be very used to seeing DOMContentLoaded at the bottom of DevTools’ Network panel: They’re some satisfying numbers. Basically, the browser is now at the tag. log ( window. performance. domContentLoadedEventStart - window. performance. performance. domContentLoadedEventEnd - window.

Metrics

Metrics Google Monitoring Analytics

Debugging Interaction to Next Paint (INP)

Speed Curve

FEBRUARY 25, 2024

Profiling Interactions Once we know which pages have high INP times, and what are the popular interactions on those pages, I switch to Chrome DevTools, profile the interactions, and identify ways to improve them. Switching to the DevTools Performance panel 3. Opening a guest profile in Chrome 2.

Analytics

Analytics Processing Google Mobile

The Fight For The Main Thread

Smashing Magazine

OCTOBER 24, 2023

All of that is dumped on any given page in one fell swoop courtesy of Google Tag Manager (GTM), which allows us to deploy and run scripts without having to go through the pain of re-deploying the entire site. Adding the async attribute to a <script> tag will load the script asynchronously, executing it as soon as it’s downloaded.

Google

Google Analytics Traffic Metrics

Chrome DevTools - 20+ Tips and Tricks

KeyCDN

OCTOBER 31, 2019

The Chrome DevTools can greatly improve your workflow by helping you develop, test, and debug your websites right within your browser. Many of you probably use Chrome DevTools on a regular basis, but check out these additional tips and tricks to enhance your productivity. What Are the Google Chrome DevTools?

Google

Google Website Network Media

Google Lighthouse Audits – How to use Chrome’s built-in speed testing tool

MachMetrics

FEBRUARY 27, 2020

If you’re not a developer/designer, you may not be familiar with the Chrome DevTools and the extremely powerful Google Lighthouse Audits that can be found inside. To use Lighthouse through the Chome Dev tools, simply open the DevTools and navigate to the Audits tab. Intimidated by the DevTools area? Accessibility.

Google

Google Speed Testing Tools Testing

Fixing a slow site iteratively

CSS - Tricks

APRIL 1, 2021

The Lighthouse reports can be accessed directly in Chrome’s DevTools. Using a network request inspector, I’m going to see if there’s anything we can remove via the Network panel in DevTools. We could also use a tool, like Postman if we need to, but we’ll limit our work to DevTools as much as possible for the sake of simplicity.

Cache

Cache Social Media Media Website

The Humble ` ` Element And Core Web Vitals

Smashing Magazine

APRIL 29, 2021

You can find it in the Chrome DevTools suite of debugging tools and run it against any web page, public or requiring authentication. This is an empty element — it has no closing tag — requiring a minimum of one attribute to be helpful: src , the source. It also shows up on hover in the DevTools Performance panel.

Media

Media Network Metrics Mobile

Site-Speed Topography

CSS Wizardry

NOVEMBER 3, 2020

Given that render blocking resources reside in the head of the document, this implies differing head tags on that page. Or, perhaps a more extreme scenario is that it has entirely different head tags? I didn’t need to pick through a single bit of DevTools! Note that the PDP’s FP is almost a second slower than other pages?

Speed

Speed Ecommerce Metrics Analytics

Optimizing Video For Size And Quality

Smashing Magazine

FEBRUARY 15, 2021

You might start by opening DevTools in your browser. Once the page is loaded, we can move to the Network tab, and filter by “media” to see all the video files: Filtering resources by 'Media' in DevTools. Using DevTools, we can emulate devices to see how much data is used for video playback of streaming video on different sized screens.

Network

Network Speed Website Mobile

Modern Methods For Improving Drupal’s Largest Contentful Paint Core Web Vital

Smashing Magazine

AUGUST 15, 2023

Jump to table of contents ↬ Step 1: Use An <img> Tag Instead Of A Background Image To avoid the five-step dependency chain I outlined above, we want to prevent loading the image with CSS. Instead, we’re going to load the image as a standard HTML <img> tag in the markup. Let’s use that instead of a standard JPG.

Media

Media Metrics Mobile Best Practices

The Three Types of Performance Testing

CSS Wizardry

OCTOBER 27, 2018

How: DevTools, browsers, local tooling. Once in production, our site will likely look very different to how it did in our development environment: tag managers have kicked in, your ads are on the site, your analytics package is capturing data, and all third parties are implemented and running. Who: Engineers. When: During development.

Performance Testing

Performance Testing Testing Performance Strategy

Front-End Testing is For Everyone

CSS - Tricks

JUNE 1, 2021

We first check that <p> tag is empty. And lastly, we check that the <p> tag contains “Hello human!” For example, Chrome already has one tool built right into its DevTools. We open Lighthouse in Chrome DevTools, click the “Accessibility” test option, and “Generate” the report. You may know it as Lighthouse.

Testing

Testing Performance Testing Website Code

How Target.com Could Make Their Site 3.1s Faster

MachMetrics

SEPTEMBER 22, 2020

Chrome DevTools has an awesome Coverage tool that allows you to see what percentage of various files are being called. Target seems to load an <img> tag as well as a <div> with the product image set as the background. Fix #2 Break Up Javascript Files to Better Use HTTP/2.

Retail

Retail Speed Website Google

Make Jamstack Slow? Challenge Accepted.

CSS - Tricks

JULY 15, 2020

We’ve gotta use Chrome to access directly from DevTools and run a performance audit. Next, we are going to look at marketing tags and how these third-party scripts can affect performance. We’ll place these scripts inside html.js , again in the <head> section, before the closing </head> tag.

Cache

Cache Google Analytics Servers

The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

Smashing Magazine

JULY 16, 2019

We use CSS to find the tag which carries the title text, and then we extract it. In this example, I am using Chrome DevTools. Just right-click on any movie title and select ‘inspect’: Chrome DevTools window. Again, all these selectors were found using Chrome DevTools as demonstrated before and then tested with the Scrapy shell.

Scalability

Scalability Website C++ Servers

Front-End Performance Checklist 2021

Smashing Magazine

JANUARY 11, 2021

Quick tip : to discover what is considered LCP on a page, in DevTools you can hover over the LCP badge under "Timings" in the Performance Panel ( thanks, Tim Kadlec !). web-vitals library can collect and send Core Web Vitals to Google Analytics, Google Tag Manager or any other analytics endpoint. To deliver an LCP in <2.5s

Performance

Performance Cache Media Metrics

I Used The Web For A Day On A 50 MB Budget

Smashing Magazine

JULY 29, 2019

Chrome devtools screenshot of the DOM, where I’ve expanded one inline style tag. Asynchronous loading of CSS can be achieved in one remarkably clever line of HTML : <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> The devtools show a prettified version of the DOM. Large preview ).

Cache

Cache Google Mobile Network

Smart CSS Solutions For Common UI Challenges

Smashing Magazine

OCTOBER 14, 2021

Useful DevTools Tips and Shortcuts. You can think of it as a CSS background equivalent to the HTML srcset attribute for img tags. In this post, we’ll look at just that: exciting and fun things we can do with CSS , exploring common problems and use cases we all have to face in our work. Related Articles On CSS: CSS Generators.

Games

Games Design Strategy Code

How We Improved SmashingMag Performance

Smashing Magazine

JANUARY 21, 2021

To study the impact on the main thread, we took a deep-dive into the Performance panel in DevTools. Studying the Performance panel in DevTools. Moving the <head> tags around was a simple part of the story though. When we studied the main thread in the DevTools’ Performance panel, we knew exactly what we needed to do.

Performance

Performance Cache Mobile Network

Improving The Performance Of An Online Store (Case Study)

Smashing Magazine

JUNE 2, 2021

These were stored as one big svg tag in the HTML head of the page, with a symbol for each of the icons that was then used as a linked svg in the HTML’s body. DevTools Debugging Tips And Shortcuts (Chrome, Firefox, Edge) ,” Vitaly Friedman, Smashing Magazine. Icon Loading. As on so many websites, we use several icons in our design.

Performance

Performance Cache Website Mobile

Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]

Smashing Magazine

JANUARY 6, 2020

Note : It’s always a safer bet to choose network-level throttlers , external to the browser, as, for example, DevTools has issues interacting with HTTP/2 push, due to the way it’s implemented (thanks, Yoav, Patrick!). Lighthouse , a performance auditing tool integrated into DevTools. Large preview ). Not good enough? Not an option?

Performance

Performance Cache Network Metrics

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]

Smashing Magazine

JANUARY 7, 2019

Note : It’s always a safer bet to choose network-level throttlers , external to the browser, as, for example, DevTools has issues interacting with HTTP/2 push, due to the way it’s implemented (thanks, Yoav, Patrick!). Lighthouse , a performance auditing tool integrated into DevTools. Large preview ). Under consideration in Firefox.

Performance

Performance Cache Metrics Network

Frankenstein Migration: Framework-Agnostic Approach (Part 2)

Smashing Magazine

SEPTEMBER 27, 2019

A few examples of global styles are <style> and <link rel="stylesheet"> tags found into your index.html. Let’s take a look at the current Host using DevTools. Second, we should convert styles into <style> tag before injecting those into Shadow DOM. Large preview ). Large preview ).

Storage

Storage Testing Processing Code

Error Tracking - Top Suggestions and Tools

KeyCDN

SEPTEMBER 20, 2018

The Google DevTools console can give you real-time feedback to help you trace the source of errors, and you can set handlers to automate exception data collection. You can also embed code in your application’s meta tags for built-in error tracking, and you may provide visitors an avenue to give feedback.

Strategy

Strategy Monitoring Website Google

Recipes for Performance Testing Single Page Applications in WebPageTest

CSS - Tricks

OCTOBER 10, 2019

Sometimes, the particular element you want to interact with does not present an interesting unicity property in either its ID, class or tag. click(); If you run these commands sequentially in a DevTools console on the login page, you will see that all fields are reset and the login request fails upon submitting by clicking the button.

Performance Testing

Performance Testing Testing Performance Open Source

The Performance Inequality Gap, 2024

Alex Russell

JANUARY 30, 2024

It's straightforward to understand the number of critical path network connections for a site from DevTools and to eyeball the content composition. As inequality grows, averages and "generation" tags can become illusory and misleading. " decoding="async" loading="lazy" /> Tap to try the interactive version.

Performance

Performance Network Mobile Speed

A Guide To CSS Debugging

Smashing Magazine

OCTOBER 6, 2021

When something has gone wrong in your CSS, you can begin by using your favorite browser’s built-in DevTools to: toggle off rules one at a time. DevTools will display the rules most applicable to the element based on specificity at the top of the pane and then provide a stack trace of the cascade and inherited styles. Large preview ).

Design

Design Availability Mobile Website

How To Build An Amazon Product Scraper With Node.js

Smashing Magazine

OCTOBER 28, 2021

Cheerio allows us to select tags of an HTML document by using selectors: $("div"). — the magical Node library that provides a high-level API to control a Chrome instance over the DevTools Protocol. To create the web scraper, we need to install a couple of dependencies in our project: Cheerio. Luckily, there is ?Puppeteer?

Website

Website Code Retail Best Practices

Long Term Web Semantics

Alex Russell

NOVEMBER 6, 2013

The modern devtools revolution even more-so. But the anchor tag provided it all: relationships between text and locations, built-in UI, behavioral support, and most of all an incredibly terse package that made all of that power accessible to anyone with a text editor and an FTP client.

Engineering

Engineering Technology Technology Systems

HTTP/3: Practical Deployment Options (Part 3)

Smashing Magazine

SEPTEMBER 6, 2021

This problem is compounded by a (current) lack of browser error logs and DevTools indicators, which means that figuring out why exactly the set-up isn’t working can be difficult. This is mostly because it simulates slow networks in a relatively unrealistic way , in the browser (the same way that Chrome’s DevTools handle this).

Network

Network Servers Cache Traffic

Technology Performance Pulse

In Defence of DOMContentLoaded

Debugging Interaction to Next Paint (INP)

Trending Sources

The Fight For The Main Thread

Chrome DevTools - 20+ Tips and Tricks

Google Lighthouse Audits – How to use Chrome’s built-in speed testing tool

Fixing a slow site iteratively

The Humble ` ` Element And Core Web Vitals

Site-Speed Topography

Optimizing Video For Size And Quality

Modern Methods For Improving Drupal’s Largest Contentful Paint Core Web Vital

The Three Types of Performance Testing

Front-End Testing is For Everyone

How Target.com Could Make Their Site 3.1s Faster

Make Jamstack Slow? Challenge Accepted.

The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

Front-End Performance Checklist 2021

I Used The Web For A Day On A 50 MB Budget

Smart CSS Solutions For Common UI Challenges

How We Improved SmashingMag Performance

Improving The Performance Of An Online Store (Case Study)

Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]

Frankenstein Migration: Framework-Agnostic Approach (Part 2)

Error Tracking - Top Suggestions and Tools

Recipes for Performance Testing Single Page Applications in WebPageTest

The Performance Inequality Gap, 2024

A Guide To CSS Debugging

How To Build An Amazon Product Scraper With Node.js

Long Term Web Semantics

HTTP/3: Practical Deployment Options (Part 3)

Stay Connected

In Defence of DOM­Content­Loaded

Debugging Interaction to Next Paint (INP)

Trending Sources

The Fight For The Main Thread

Chrome DevTools - 20+ Tips and Tricks

Google Lighthouse Audits – How to use Chrome’s built-in speed testing tool

Fixing a slow site iteratively

The Humble ` ` Element And Core Web Vitals

Site-Speed Topography

Optimizing Video For Size And Quality

Modern Methods For Improving Drupal’s Largest Contentful Paint Core Web Vital

The Three Types of Performance Testing

Front-End Testing is For Everyone

How Target.com Could Make Their Site 3.1s Faster

Make Jamstack Slow? Challenge Accepted.

The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

Front-End Performance Checklist 2021

I Used The Web For A Day On A 50 MB Budget

Smart CSS Solutions For Common UI Challenges

How We Improved SmashingMag Performance

Improving The Performance Of An Online Store (Case Study)

Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]

Frankenstein Migration: Framework-Agnostic Approach (Part 2)

Error Tracking - Top Suggestions and Tools

Recipes for Performance Testing Single Page Applications in WebPageTest

The Performance Inequality Gap, 2024

A Guide To CSS Debugging

How To Build An Amazon Product Scraper With Node.js

Long Term Web Semantics

HTTP/3: Practical Deployment Options (Part 3)

Stay Connected

In Defence of DOMContentLoaded