Collaboration of Designers and Developers

We use placeholder images as a way to quickly display a low-quality 300px. Version of our slideshow image on the page. And then display the high-quality version once the download is complete. Narrative Web Performance Placeholder Image.  Notice that the low quality image is swapped with the high-quality image. After the download is complete. Lazy loading of images is usually achieved through JavaScript, and a quick search will uncover many libraries. We chose an open source library called LazySizes to handle lazy loading of our images because it’s lightweight and has the added ability to handle responsive images. 3. Critical Styles and Async CSS Loading a web page is one of the most CPU-intensive tasks your device has to perform when you browse the web.

The steps a browser takes to render a page is known as the critical rendering path. Google has some amazing documents on Critical Render Path if you’re interested in learning more. One discovery we made while auditing our theme was that more than 55 percent of the CPU usage, up to the first render, was idle. We initially didn’t know Laos B2B List what this meant, but something felt off. How could the CPU be sitting idle during one of the most demanding tasks of loading a page? Narrative Web Performance – Idle CPU Usage A graph showing the CPU sitting idle while waiting for render lock assets to be unloaded. Some research led to a quick experiment of blocking requests for any external file that blocks rendering and observing the difference in CPU usage in Chrome DevTools. We found that our CPU was sitting idle because.

Make the Biggest Impact

it was waiting for our main HTML document and CSS file to finish downloading, before starting to render. Our experiment showed that by excluding the external CSS file, our device could start displaying the page as soon as the HTML finished downloading. We needed our main CSS file to style the page. There are no questions there. So how could we include it without it blocking the initial rendering of the page and flashing unstyled content? The solution was to include critical CSS and load the external CSS file asynchronously. The narrative approaches critical styles by manually copying and pasting styles from our main CSS file into a Liquid snippet.


This approach is less flexible than more sophisticated setups using libraries like Penthouse or CriticalCSS, but it was the most we could do with the time we had. I am confident that our approach to critical styles will only improve with future topics. 4. JavaScript cleanup and optimization One goal the Narrative designer made clear was that he wanted long, feature-rich home pages to be a selling point for the theme. As developers, when we hear “feature rich,” we think of JavaScript as heavy. Too much JS leads to poor startup performance and ultimately delays initial rendering and the page to be non-interactive. We knew from auditing previously released themes that there was room to grow with how we approached the theme’s JavaScript.

A Day With Shopify Speakers

Our goal for Narrative was to put an extra emphasis on clean and lightweight JS development. Narrative web performance: excessive js An example of where the JS execution can take over your page load. What does ‘light’ mean? For a while now, I’ve heard the term used loosely in the front-end world to describe a number of frameworks and plugins. For me, lightweight can be summed up in three points: Submit as little code as possible to get the job done. Run the code just before it is needed or at page idle time. Minimize forced DOM recalculations. These rules can be manifested in various ways, such as: Avoid libraries that include many functions that your project does not use. Reduce the amount of JS executed on page load. Using flexbox instead of JS to set the height of complicated layout elements.

Leave a comment

Your email address will not be published.