{"id":6657,"date":"2022-01-18T10:43:22","date_gmt":"2022-01-18T09:43:22","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=6657"},"modified":"2024-01-25T14:13:12","modified_gmt":"2024-01-25T13:13:12","slug":"e-shop-speed-optimization-part-3-frontend","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/e-shop-speed-optimization-part-3-frontend\/","title":{"rendered":"E-shop Speed Optimization – Part 3 (Frontend)"},"content":{"rendered":"\n

We dedicated the<\/span> second part<\/span><\/a> of this series to backend and server optimizations. In this article, we’ll take a look at other optimizations that apply to the frontend.<\/span><\/p>\n\n\n\n

Pictures<\/b><\/h3>\n\n\n\n

Images, along with scripts, usually pose the biggest problems with website speed.<\/span><\/p>\n\n\n\n

srcset<\/b><\/p>\n\n\n\n

We can achieve image responsiveness by using the srcset attribute.<\/span><\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

Srcset allows us to define one source image in multiple sizes. The sizes attribute defines how much space a given image takes up at different screen sizes.<\/span><\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

WebP<\/b><\/h3>\n\n\n\n

The WebP format allows us to reduce the size of images without compromising their quality. Support for WebP images is high in browsers, but for IE and older Safari it’s necessary to use the picture element, where we define the webp image source as well as the jpg image source for unsupported browsers.<\/span><\/p>\n\n\n\n

For images that we use directly in css using background-image, we can use Modernizr https:\/\/modernizr.com\/download?setclasses&q=webp, which detects what features are available in a browser. If a browser doesn’t support webp, the no-webp class is added to the html element and subsequently it’s possible to use the image in the basic format in these cases.<\/span><\/p>\n\n\n\n

Lazy Loading<\/b><\/h3>\n\n\n\n
<img loading=\u201dlazy\u201d<\/span>><\/code><\/pre>\n\n\n\n
The loading attribute with a lazy value allows us to delay the loading of images until the images need to be loaded (the user scrolls the page and is getting closer to the image). If we apply this attribute to images that we don’t need to load as soon as possible (such as a banner image that appears at the top of the page), this technique can speed up page loading and reduce the overall amount of data transferred. The attribute is available in most browsers except Safari.<\/span><\/p>\n\n\n\n
CSS Styles<\/b><\/h2>\n\n\n\n
CSS styles are a fairly large part of websites. What usually helps us with CSS optimization are various tools or frameworks that prepare optimized CSS files for us when creating a production build.<\/span><\/p>\n\n\n\n
Removing Unnecessary CSS Code \/ Code Splitting<\/b><\/h3>\n\n\n\n
To reduce the total amount of CSS code, it’s a good idea to remove generally unused CSS. In addition to the generally unused CSS, we’ll probably also use CSS specific to one subpage. In this case, it’s advisable not to load this CSS on the home page and to load it only after going to the subpage that will use the given code. Of course, it also depends on the size of the particular code, if it’s a small amount, then there is no need to split the CSS.<\/span><\/p>\n\n\n\n
Minification<\/b><\/h3>\n\n\n\n
By minification we can reduce file size by removing redundant characters, unifying common classes without changing the functionality of that CSS. It’s possible to minimize CSS automatically, for example with Webpack, using <\/span>mini-css-extract-plugin<\/span><\/a> or <\/span>css-minimizer-webpack-plugin<\/span><\/a>.<\/span><\/p>\n\n\n\n
Scripts\/JavaScript<\/b><\/h2>\n\n\n\n
The biggest problem and the thing that slows down today’s pages is JavaScript. Therefore, this section can bring us the biggest performance improvements.<\/span><\/p>\n\n\n\n
Async\/Defer<\/b><\/h3>\n\n\n\n
We can use two attributes for <script> tags in HTML:<\/span><\/p>\n\n\n\n