Optimizing your site’s performance can take a lot of time, and can take even more if you want to optimize it for your own needs.
In this article, I’m going to show you 10 quick ways to optimize Web performance that you can use on your own site in under five minutes. These shortcuts have little impact on your code base or server configuration. They are simple and easy to implement, don’t require a detailed understanding of how they work, and can have a significant impact on your performance.
- Using text compression
Using text compression, you can minimize the number of bytes transmitted over the network. There are several compression algorithms. Gzip is the most popular, but Brotli is a newer and even better compression algorithm. If you want to check whether your server supports Brotli, you can use the brotli.pro tool.
If your server does not support Brotli, follow these simple instructions to install it:
Nginx on Linux
Apache
NodeJs – Express
This is the first optimization you can get for free, and most hosting platforms or CDNS provide compression by default.
- Image compression
Uncompressed images are a potentially huge performance bottleneck. If the image is not compressed, it will consume a lot of bandwidth. There are several useful tools for quickly compressing images without loss of visible quality. I usually use Imagemin. It supports a variety of image formats that you can use from the command line interface or use the NPM module.
imagemin img/* –out-dir=dist/images
You can use NPM modules in packagers such as Webpack, gulp, or Grunt.
const imagemin = require(‘imagemin’);
const imageminMozjpeg = require(‘imagemin-mozjpeg’);
(async() => {
const files = await imagemin(
['img/*.jpg'],
{
destination: 'dist/img',
plugins: [
imageminMozjpeg({quality: 60}),
]
}
Copy the code);
console.log(files);
}) ();
In general, you can reduce the size of a file from 4MB to 100kB. You can view the demo code on Github.
3. Image Formats Using modern image formats can really improve performance. WebP images are smaller than JPEG and PNG, typically 25 to 35 percent smaller. WebP is widely supported by browsers.
We use the Imagemin NPM package and add the WebP plug-in to it. The following code outputs the WebP version of the image to the dist folder.
const imagemin = require(‘imagemin’);
const imageminWebp = require(‘imagemin-webp’);
(async() => {
const files = await imagemin(
['img/*.jpg'],
{
destination: 'dist/img',
plugins: [
imageminWebp({quality: 50})
]
}
Copy the code);
console.log(files);
}) ();
Take another look at the file size:
The results show a 98 percent reduction in file size compared to the original image, and WebP compresses the image more significantly than compressed JPG files. The WebP version is 43% smaller than the compressed JPEG version.
- Image lazy loading
Image lazy loading is a technique for later loading images that are temporarily not displayed on the screen. Loading immediately when the parser encounters an image slows down the initial page load. Using lazy loading, you can speed up the page loading process and load the image later. This is easily done using Lazysizes. You can add code like this:
To:
Lazysizes library takes care of the rest and can be verified using a browser. Open your site and find the image TAB. If the class changes from LazyLoad to LazyLoaded, that means it works.
- Cache your resources: HTTP cache headers
Caching is a quick way to speed up your website. It reduces page load time for regular users. If you have access to the server cache, it is very simple to use.
You can use the following API for caching:
Cache-Control
ETag
Last-Modified
- Inline critical CSS: Defer non-critical CSS
CSS is rendered blocked. This means that the browser must download and process all CSS files before it can draw pixels. By inlining key CSS, you can greatly speed up the process.
You can do this by following these steps:
Identify the key CSS
If you don’t know what your key CSS is, you can help with Critcal, CriticalCSS or Penthouse. These libraries are used to extract CSS from HTML files visible in a given viewport.
Here is an example of using criticalCSS.
var criticalcss = require(“criticalcss”);
var request = require(‘request’);
var path = require( ‘path’ );
var criticalcss = require(“criticalcss”);
var fs = require(‘fs’);
var tmpDir = require(‘os’).tmpdir();
var cssUrl = ‘web.dev/app.css’;
var cssPath = path.join( tmpDir, ‘app.css’ );
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on(‘close’,
function() {
criticalcss.getRules(cssPath, function(err, output) {
if (err) {
throw new Error(err);
} else {
criticalcss.findCritical(“web.dev/”, { rules:
JSON.parse(output) }, function(err, output) {
if (err) {
throw new Error(err);
} else {
console.log(output);
// Save it to a file for step 2
}
});
}
});
});
Inline key CSS
Critical CSS is immediately processed by the HTML parser when it encounters the style tag.
< /head>
Delay doesn’t matter CSS
Non-critical CSS does not need immediate processing. The browser can load the onload event after it, so the user doesn’t have to wait.
onload=”this.onload=null; this.rel=’stylesheet'”>
- JavaScript asynchronous and lazy loading
JavaScript is blocked by the HTML parser. The browser must wait for JavaScript to execute before parsing the HTML. But you can tell the browser to wait for JavaScript to execute.
Loading JavaScript asynchronously
With the async property, you can tell the browser to load the script asynchronously.
Defer JavaScript
The defer attribute tells the browser to wait until the HTML parser has finished parsing the document before running the script, but before the event happens, DOMContentLoaded will be triggered.
Adjust the position of the inline script
The inline script executes immediately and is parsed by the browser. Therefore, you can place them at the end of the HTML, immediately before the body tag.
- Use resource tips to speed up delivery.
Resource prompts tell the browser what pages might load later. The specification defines four primitives:
Preconnect
DNs-prefetch
Prefetch
Prerender
Also, for resource hints, we use the preload keyword for the link attribute.
preconnect
The following code tells the browser that you want to establish a connection to another domain. The browser will prepare for this connection. Using pre-linked link tags can reduce load time by 100-500 ms. So when should you use it? To put it bluntly: When you know where to get something but don’t know how. For example, hash style files (styles.2f2k1KD.css) and things like that.
dns-prefetch
If you want to tell the browser that you are going to establish a connection to a non-critical domain, you can use dnS-prefetch to preconnect. This will save you about 20-120 milliseconds.
prefetch
With prefetch, you can tell the browser to download the entire site referred to in the link tag. You can prefetch pages or resources. Prefetching can be very useful in speeding up your website, but be aware of situations that can slow your website down.
Low-end devices or slower Internet speeds can cause problems because the browser is always busy with prefetching. You can consider using prefetch with adaptive loading, or smart prefetch with QuickLink and Guess. Js:
prerender
Href = “example.com/content/to/…
With pre-rendering, the content is loaded and then rendered in the background. When the user navigates to pre-rendered content, the content is displayed immediately.
preload
With preloading, the browser gets an indication that the referenced resource is important and should be retrieved as soon as possible. Modern browsers are good at prioritizing resources, so use preloading only for critical resources. Consider using preconnect and prefetch instead, or try using Instant. Page.
- Use Google Fonts
Google Fonts is good. They provide excellent service and are widely used. If you don’t want to host fonts yourself, Google Fonts is a great choice. But you should be careful how you implement them. Harry Roberts has written an excellent article on how to use Google Fonts for website acceleration. Reading is highly recommended.
If you just want to know how to use it, you can do Google Font integration with the following code snippet, but credit goes to Harry.
crossorigin/>
href=”fonts.googleapis.com/css2?
family=… &display=swap”/>
family=… &display=swap” media=”print”
onload=”this.media=’all'”/>
<link rel=”stylesheet”
href=”fonts.googleapis.com/css2?
family=… &display=swap”/>
- Use the service worker to cache your resources
A service worker is a script that the browser runs in the background. Caching is one of the most commonly used features, and the one you should use the most. I don’t think it’s a matter of choice. Implementing caching with service workers allows users to interact with your site more quickly and can access your site even if they are offline.