The ugly truth about optimizing beautiful images

From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files.  Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this.  How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020.  webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode.  The real hash of the content - previously only the hash of the internal structure was used in webpack.  Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file.  Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together.  See here for the complete changelog.  While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections.  Please note that these updates are subject to change based on the ever-changing world of web developers.  Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications.  To improve ESM support, the webpack team is planning to make some important updates.  Self-executing snippets One of the most interesting features of webpack is code splitting.  This feature allows you to split your code into multiple packages that you can download on demand or in parallel.  At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly.  For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module.  This can result in less code generated.  ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing.  This is very useful when using external services that offer their APIs as EcmaScript modules.  Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies.  ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports.  This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created.  Instead, each module in the modules graph will be released as a separate file.  Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created.  While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them.  SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file.  In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version.  This utility helps you debug applications even after resources have been compressed / optimized.  Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021.  They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json.  This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.).  In a later release, private imports were also supported in Node.js (similar to the export field in package.json).  For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development.  Import fields for private imports are another feature to look out for in 2021.  HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot.  This can significantly speed up development by preserving application state that would have been lost on a hard reboot.  Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools.  Webpack 5 ships with a new feature called “Module Federation”.  This feature allows you to integrate multiple assemblies together at runtime.  HMR currently only supports one assembly at a time and updates cannot move between assemblies.  The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps.  Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint.  Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him.  However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems.  An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?";  or "Easy to encode the space with the space function."  WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine."  This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance.  In the current version of webpack, WebAssembly is experimental and not enabled by default.  The default support is what the webpack team will hopefully add this year.  Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient.  Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack.  The Basics Watch the Webpack Video!  Look

From the author: read any performance blog or visit any performance talk and everyone will advise you that image optimization is the best place to start. Using automated services, you can get smaller images in a relatively short period of time. And we all know that smaller images will give us better performance – or not?

Having spent the last couple of years looking at situations where clients are looking to optimize images but then see no performance change, I decided to share a few examples of how best to deal with an issue should this happen to you.

Optimizing your photos is like buying a fast car: if you don’t have good clean roads to drive, you won’t get anywhere faster. Oftentimes, the rest of the website looks like an abandoned motorway and the extra power gain is wasted. Below are some tips on how to clean up your traffic.

Case 1

Company logos and menus have been blurred to protect the privacy of these entities

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

On the aforementioned website, the image byte count was reduced from 1MB to 500KB (50%), but there was no performance change.

Upon closer inspection of this site, it turned out that the main problem was that almost all of the images on the site were loaded using JavaScript.

The removal of lazy loading for the main product image is a major improvement. While I can’t remember exactly what was done with the leftover images, I would always suggest checking if they are present on the screen during bootstrap, and if not, consider lazy loading, be it using JS or inline lazy loading.

We’ve also deferred one or two scripts and pre-loaded some fonts for this site, the improved results are shown below.

Case 2

The results from the above image optimization project weren’t that bad:

Images reduced from 2.4 MB to 1 MB (55% smaller)

Visual performance improved by 2 seconds

However, upon first contact, the customer told us that the performance and user experience had not improved enough. From the above diagram, you can see that the main render pattern was similar before and after. A blank dark area is displayed after 2 seconds (as shown below) and then slides down when the 2 main images start loading after 3 seconds.

After looking at this site in more detail, we found that the popup menu contained hidden images on each menu tab, all loading at the top of the page with the highest priority.

Lazy loading of these hidden images, as well as some CSS and JavaScript reorganization in the page header, allowed for the main images to load earlier and improve the user experience. Key images now start loading a full second faster and the dark gray space is no longer displayed in the viewport.

Despite all of the above optimizations and some font preloading, the initial render time apparently froze somewhere around the 1.5 second mark. This client was using Optimizely which delayed rendering. Removing Optimizely reduced the time to start rendering to less than 1 second. I am not going to speculate about whether it is right or wrong to use client side A / B testing tools, this is a completely different question. I will say that if you are carefully measuring the effect of optimizing something as large as images, make sure you know all the technologies that affect the result, and then decide if you want to turn them on or off during testing.

Case 3

On the surface, this site looks amazing, as the following statistics confirm:

~ 5 MB of images reduced to ~ 400 KB (92% reduction)

Full display from 7 to 4 seconds

Time to start rendering reduced by 2 seconds

Despite these improvements, the first display of the hero image remains relatively unchanged. Digging deeper, we found that the hero image was loaded as a background image, which was delaying its loading. Replacing this with the element improved the render times and made it more consistent with the below metrics.

We also found a couple of scripts that were loaded at the bottom of the markup historically meant for the last load. The browser pre-parser processed them and loaded them before the images, so we added defer.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Further analysis

After working through the above and other similar cases, I wondered if there were any high-level patterns that we could use to predict this issue before image optimization.

I looked at over 20 customer sites where we recently optimized images, ran them through webpagetest.org and rated them on the percentage improvement in SpeedIndex. They were divided into 16 sets of criteria grouped by page statistics, image statistics, JavaScript statistics, and loading methods. The criteria included things like:

Percentage of image bytes per page

Percentage of images compared to JavaScript

Actual image bytes

Whether the images were hosted on the same domain

Was A / B Testing Used

After evaluating sites on 16 criteria, it appears that the SpeedIndex score is likely to improve significantly if your site adheres to the following budgets:

43% or more of the page’s total objects are images

Less than 30 TCP connections (for example, not too many third-party resources)

Less than 400KB JavaScript

JavaScript is less than 45% bytes of the size of images

Image optimization saves at least 50% bytes OR at least 1 MB *

* This criterion will need to be measured after image optimization, however WebPageTest shows some potential savings when analyzing all images.

If your site does not meet two or more of these criteria, I would encourage you to tackle other performance bottlenecks that need to be fixed before you start working with images.

Conclusion

I love to optimize images, I think this is one of the easiest aspects to optimize. However, before optimizing images, you must have realistic expectations of what you want to achieve. Optimizing performance is about more than reducing the number of bytes. There are many aspects to web page loading speed, and often removing one bottleneck will simply reveal another.

When developing an image optimization project, I recommend the following:

Be clear about how you measure impact

Select a visual metric (Speedindex, Main Content Display, etc.)

Use the right tool, WPT is good for spot checks and debugging, RUM is needed to see the impact in a real environment.

Check if you meet the criteria above, if your site does not meet these requirements, set expectations correctly

Make sure the images in the viewport load as fast as possible

Manage lazy loading properly

Use tags (including responsive images), not CSS background images

Defer any scripts to load after critical images

Think about the role of A / B testing tools during your assessment

Author: Michael gooding

A source: //calendar.perfplanet.com

Editorial staff: Webformyself team.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Bootstrap 5 framework. Quick start

Learn the basics of Bootstrap 5 with a hands-on example of coding an online store from scratch!

Look

Leave a Reply

Your email address will not be published. Required fields are marked *