7 CSS Optimization Tips to Reduce Page Load Time

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: on the internet today, page load time is one of the most important metrics of a website. Even milliseconds can have a huge impact on the bottom line, and slow page loading can easily ruin your conversion rates. There are many tools and techniques you can use to speed up your website. In this article, we’ll take a look at the best CSS optimization tips that you can use to improve the performance of your interface.

1. Find performance bottlenecks

The most important thing in all types of optimization is a thorough audit. Fortunately, there are many CSS diagnostic tools that can help you find bottlenecks. First of all, you can use your web browser’s DevTools to check how fast assets are loading. In most browsers, you can open DevTools by pressing the F12 key.

For example, in Firefox DevTools, you can check the size and load times of all CSS files loaded by a page using the Network tab. You can also check how fast CSS loads with and without caching. Since DevTools also exposes external CSS such as Google Font files and CSS assets pulled from third-party CDNs, you can find many sources that you didn’t even know about before.

7 CSS Optimization Tips to Reduce Page Load Time

Google’s Pingdom Tools and Lighthouse are two other free tools that developers often use to analyze website speed and interface performance. For example, Pingdom Tools will provide you with some helpful CSS optimization tips if you are running a simple site speed test.

JavaScript. Fast start

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

Learn more

7 CSS Optimization Tips to Reduce Page Load Time

2. Minify and compress CSS files

Most websites use multiple CSS files. While modular CSS is considered best practice in most cases, it can take a while for all files to load. But this is exactly the reason why CSS minification and compression tools exist. If you use them wisely, you can significantly improve your page load times.

There are online tools like CSS Minify that allow you to minify a CSS file by copying it into a simple form. This type of tool can be suitable for small projects. However, their use can become cumbersome and time-consuming in the case of large projects that come with multiple CSS files. In such cases, it is better to opt for an automated solution.

Most build tools these days allow you to automatically compress your code. For example, Webpack returns all files as a minified package by default. PostCSS also has smart plugins like CSS Nano that not only minify files but also run them through many targeted optimizations.

7 CSS Optimization Tips to Reduce Page Load Time

3. Use Flexbox and CSS Grid

If you are still relying only on the traditional box model when writing CSS and aligning elements on the screen using margins, padding, and floats, you should consider using more modern layout modules, namely flexbox and CSS Grid. These new models allow you to implement complex layouts with much less code.

With the old methods, you have to apply a lot of tweaks and tweaks, even for things as simple as centering elements vertically. However, with flexbox and CSS Grid, things are easier. While it may take a while to get to grips with the new layout modules, it is well worth it as your CSS files will be much smaller. This is especially true of flexbox, which currently has pretty good browser support (currently 98.3% globally).

7 CSS Optimization Tips to Reduce Page Load Time

Although browser support for CSS Grid is lower (currently 92.03% globally), you can still use it if you don’t need support for older browsers or want to provide a fallback.

7 CSS Optimization Tips to Reduce Page Load Time

4. Use link tag instead of @import rules

There are two main methods you can use to load CSS files into a web page:

adding them to the section

HTML pages using the link tag,

import them from other stylesheets using the @import CSS rule.

You need to add an @import rule to the top of your main CSS file. In most cases, it is used to download small resources such as fonts and other design elements. This may seem like a good solution at first, but it takes a lot longer for the browser to load additional stylesheets than when the HTML page loads them directly using link tags.

When adding multiple HTML files to an HTML page, always pay attention to the specificity of the CSS. Add the most general style sheet first, then move on to more specific ones. You need to do it this way because the stylesheets you add later override the rules of the previous CSS files. Here’s an example of how the CSS files are added in the correct order:

5. Use gradients and SVGs instead of images

It can take a long time to load all images on a web page. Developers use many techniques to optimize images, such as loading images from an external CDN, or using image compression tools like TinyJPG. These solutions can help a lot, however you can often replace resource-intensive JPG and PNG images with native CSS effects.

For example, you can use gradients instead of huge background images, which can slow down your user’s browser. You can use the CSS gradient features to create linear, radial, and repeating gradients. With these built-in CSS functions, you can define not only colors, but also slope.

JavaScript. Fast start

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

Learn more

For example, the following rule creates a nice gradient background that loads much faster than any images:

For more complex gradients and textures, you can also use generators such as CSSmatic (pictured below) and ColorZilla.

7 CSS Optimization Tips to Reduce Page Load Time

Besides gradients, you can also replace traditional JPG and PNG images with scalable vector graphics (SVG). SVGs not only load faster, but you also only need to include one version of the image. Because SVG can be scaled to any size without loss of quality due to its vector nature. Alternatively, you can also style the SVG with CSS as if it were a regular HTML file.

6. Avoid the! Important rule

While the! Important rule may be an appropriate solution in some cases, you should only use it as a last resort. This rule creates an exception from the cascade. Hence, when you add! Important to a CSS declaration, it overrides any other declarations, even those with higher specificity. This is what its syntax looks like:

If there are too many! Important rules in the CSS, the user’s browser will have to perform additional code checks, which can significantly slow down the page. As a rule of thumb, never use! Important for your site’s CSS or when creating a theme or plugin. If possible, only use it if you want to override CSS from a third party library.

7. Consider CSS Refactoring

While refactoring CSS is rarely an easy task, there are many cases where it can significantly improve site performance. For example, when your CSS files are too large, or you have inherited your codebase, or you have slow page load times that seriously hurt your conversion rates. The goal of CSS refactoring is to make your code cleaner, easier to maintain, and faster to load.

Refactoring CSS is a multi-step process in which you need to analyze every aspect of your CSS code base. There are several things you need to check, such as:

do you have any unused or duplicate CSS rules or resources,

can you use more modern techniques like flexbox and CSS grid,

are you using too much specificity (you can calculate this with the visual specificity calculator),

is the structure of your CSS files reasonable (e.g. it is easier to maintain smaller files than large ones),

is it worth using an automated build tool,

and many others.

Before you start refactoring, also set measurable goals and criteria you will use, such as page load time or time to first display, so that you can compare before and after.

Also remember to use a version control tool like Git. That way, if something goes wrong, you can revert to a previous version of your code.

Completion

There are many CSS optimization tips you can use to improve the performance of your site. Most are easy to implement, but can have a significant impact on page load times. Faster page loading not only improves the user experience, but also helps you get higher rankings on Google and other search engines.

Besides CSS optimization guidelines, there are many other techniques you can use to improve loading speed, such as caching, Google AMP, and HTTPS.

Source: //onextrapixel.com

Editorial staff: Webformyself team.

JavaScript. Fast start

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

Learn more

PSD to HTML

Practice of site layout on CSS Grid from scratch

Watch

Leave a Reply

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