Web performance: meaning and importance

web performance

Web performance can be summed up, with the permission of purists on the subject,

to the loading speed of a site.

 

This speed and other performance metrics can be measured quantitatively, most popular browsers have tools for this, such as Google’s Lighthouse and PageSpeed Insights or Firefox’s Profiler.

 

If load times exceeding three seconds are found in these results, SEO will be negatively affected.

 

And as a result of indexing by  Google, our site will not show up in the most relevant results.

 

Web performance is entirely objective,
but UX is subjective.

 

Although it has established design patterns, the UX or user experience depends on the perception and preferences of the end user, whose metrics are purely qualitative.

 

These metrics will determine if the user is going to continue browsing and interacting on the site to generate the desired engagement, if this does not happen it is likely that the user will not return.

 

web performance

Basic steps to achieve good web performance and make sure it works as expected.

 

Optimize perceived performance

This is the point of web performance related to user experience (UX).

 

This is where efforts should be made on the frontend to make the site interesting and accessible. Making the other content and secondary resources are acquired in the background.

 

Multimedia

A great opportunity to improve performance, since according to the http archive, 51% of the bandwidth consumed in an average site corresponds to images, and 25% to video.

 

The main actions to improve this aspect are:

  • LazyLoading: Ensure that all non-critical images in the main render are loaded lazy with the “loading” attribute on the img tags

  • Have the appropriate format: If it is about icons or images with few colors, the appropriate format is SVG. Otherwise, the ideal is the PNG format, combined with compression tools that do not reduce quality or directly use the WebP format.

  • Proper sizing: Using a single image and resizing it according to the size of the device is not a good practice. For this case, it is ideal to have a set of images and render the appropriate one, using the picture tags and media queries.

 

Content Delivery Network

If the server is frequently saturated and/or it is far from the user, the latency will be high, directly affecting the loading time.

 

Replicating the site in a group of servers that balance the traffic, that is, in a CDN, is the common solution in these cases.

 

Reduce CSS styles and Javascript code

It is not about making the site less aesthetic or interactive, but as in multimedia, removing everything that is not useful.

 

Optimize the backend

It is not the most talked about alternative in blogs and documentation to optimize performance.

 

But if the target site is a web application that constantly performs read/write operations on a database, or that according to the business logic must do a considerable number of validations and redirections according to each request and also consumes services from third-party websites, among others. It makes each mentioned factor a possible point of performance degradation, and requires particular revisions depending on the case since they have a “silver bullet”

 

Iterate!

After applying adjustments to improve site performance, assess if more work is required by reviewing the target metrics of the changes with the available tools.

 

Obtaining a good web performance is linked to improving technically,

for this we need a technological ally to guide us in the process.

 

Contact us to improve your web performance.

 

Related posts:

What is digital transformation and how to implement it

This is the main reason why your website/app is crashing