How to improve the page speed index of your website? — Part 1

Introduction 

Web developers often face performance issues with websites. To measure a webpage’s performance, there is a standard called core web vitals.

If you are here, you might know the advantages of a page-speed score for a website. However, I would like to mention a few.

1. Better search engine rankings: A website with a high page speed score may be more likely to appear at the top of search engine results.
2. Improved user experience: A fast-loading website can improve the overall experience of users, as they are less likely to become frustrated and abandon the site.
3. Increased conversions: A faster website can lead to higher conversion rates, as users are more likely to complete a desired action, such as making a purchase or filling out a form, if the site loads quickly.
4. Improve Accessibility: A higher speed score means that the site is easily accessible to a wider range of users.

Here is part2 of improving the page speed of the website includes optimizing fonts, videos, and components.

What will you learn today?

Steps to improve your website’s page speed score

For that, we will focus on:

• Images
• Javascript and CSS

Note: These will not improve your web page’s score by 100%. But if you set these steps as standard in your development, it will reduce your efforts of improving page speed score.

Sponsored

Want to build good habits but procrastinate? You can try justly.

Images

Images are an important aspect of many websites and can help to make a website more effective in achieving its goals.

Well-chosen images can make a website more visually appealing and also can be used to reinforce a website’s brand identity, helping to build trust and establish credibility with users.

Oversized images rendered with the wrong aspect ratio lead to bad page speed scores.

Let’s see how we can improve images.

1. Images with height and width property

specifying the height and width of images can help to improve the performance and user experience of a website. It is generally a good practice to include the height and width attributes for images whenever possible.

Example,

<img src="" alt="image" height="50" width="50">

Add this point to your list, so that next time you won't miss the same.

2. Avoid lazy loading for above-the-fold content(first visible content)

Lazy loading delays the loading of certain elements on a webpage until they are needed.

We can add lazy loading to the images as below,

<img src="" alt="image" loading="lazy">

This can improve the performance of a webpage by reducing the amount of data that needs to be loaded initially, but it can also have some drawbacks.

One potential issue with lazy loading is that it can affect the rendering of above-the-fold content(content that is visible to the user when the page first loads). If this content is not loaded immediately, it can cause a delay in the time it takes for the page to become interactive, which can impact the user experience.

It is generally a good idea to avoid lazy loading for above-the-fold content to avoid this issue. This will improve the initial load time and user experience of the webpage.

3. Preload images

Preloading images is a technique that allows you to load images into the browser’s cache before they are needed so that they can be displayed more quickly when they are needed.

it can improve the overall performance of the website by reducing the time it takes for the images to be displayed.

There are several ways to preload images on a website, including:

1. Using the link tag with the rel attribute set to preload:

<link rel="preload" href="/path/to/image.jpg" as="image">

    2. Using the link tag with the rel attribute set to prefetch:

<link rel="prefetch" href="/path/to/image.jpg">

    3. Using JavaScript to preload images:

<link rel="prefetch" href="/path/to/image.jpg">

Javascript and CSS

We need to use external JavaScript and CSS links in our webpage. Files that contain large content will affect the performance of the website. Because the browser will take more time to download large files.

Here are some tips to use links effectively.

1. Use CDN (Content Delivery Network) links

A CDN stores copies of your website’s static files (such as images and CSS files) on servers around the world, so that they can be served to users from the location that is closest to them. This can reduce the time it takes for your website’s files to be transferred to the user’s device.

2. Caching

Caching allows a browser to store a copy of your website’s files locally so that they don’t have to be downloaded again on subsequent visits. This can improve performance, especially for repeat visitors.

There are several ways to implement client-side caching in a website,

Using the cache attribute of the a tag,

<a href=”/path/to/resource” cache=”only-if-cached”>Link to resource</a>

or a Cache-Control header,

Cache-Control: max-age=3600

or using JavaScript to cache resources.

if ('caches' in window) {
  caches.open('my-cache').then(function(cache) {
    cache.addAll([
      '/path/to/resource1',
      '/path/to/resource2'
    ]);
  });
}

For implementing server-side caching, you can use PHP and APC, node-cache in nodeJS, and mem-cache in python .

3. Use async/defer

Using the async and defer attributes can improve the performance of a webpage by allowing the browser to continue rendering the page while the JavaScript files are being downloaded, rather than having to wait for them to finish loading before rendering can continue.

The async attribute tells the browser to download the JavaScript file asynchronously, meaning that it will not block the rendering of the page while it is being downloaded.

The defer attribute tells the browser to download the JavaScript file, but to wait until the page has finished parsing before executing it.

Here is an example of how to use the async and defer attributes in a script tag:

<script src="/path/to/script.js" async defer></script>

4. Minify files

In the production environment, minification is the most important thing to consider when deploying.

Minification can be useful because it reduces the amount of data that needs to be transferred over the network, which can improve the loading time of a webpage.

There are several build tools for javascript and CSS, you can use to minify your code.

1. UglifyJS: It minifies JavaScript files and also supports source maps, which can make it easier to debug the minified code.
2. CSSNano: It minifies CSS files and also supports advanced optimization techniques such as merging rules and eliminating unused styles.

You can use these build tools with webpack, vite, or any other bundlers.

Conclusion

Many websites are built every day. To stay in the race, it is important to improve page speed and performance.

We also applied these steps to our website and achieved great results. Try these out on your website and see the results.

We’re Grateful to have you with us on this journey!

Suggestions and feedback are more than welcome! 

Please reach us at Canopas Twitter handle @canopas_eng with your content or feedback. Your input enriches our content and fuels our motivation to create more valuable and informative articles for you.

That’s it for today. Keep improving for the best✌️!

Similar Articles