DEV Community

Hugo Gonzalez
Hugo Gonzalez

Posted on

How to adpot a WordPress site under the best metrics for Core Web Vitals load speed?

Hi everyone, my name is, Hugo Gonzalez, I'm a browser game developer and I recently created my blog about games in Spanish.

I chose Word Press as my platform, but I ran into a problem with the download speed for the mobile version.

Below I will tell you what steps I took.

Site loading speed - what is it and why is it so important?

Site load speed is the period of time from the time a user clicks on a link until the page is displayed in the browser.

This period includes the browser's response to a request to load the page, the time it takes for HTML content to be transferred to the browser from the provider's hosting, and the process of direct loading.

Reducing load times is important because it has a direct impact on visitor behavior, increases brand loyalty and affects search ranking position. Google's search engine does not like slow sites, so it persistently demotes them in the search ranking.

And if the load will be too long, then the driver simply will not be able to use the services and will go to competitors. That is, the profitability of the business is also related to the speed of loading the site.

To better understand the relevance of fast loading site, remember personal experience. It is much more comfortable to navigate the site, to study the catalog of goods when loading takes 1-2 seconds. If on each page to linger on each page for 5-10 seconds - from such a site just want to leave. The speed of loading the site affects the following indicators:

Conversion. If the first experience of contact with the site was unsuccessful from 45 to 87% of all users will not return to you. The road from the product to the cart should be fast and comfortable.
Page indexing. The faster the site's servers give content to the search engine robot, the more sites it can process. If the loading of a web page is slow, it will take more time to fully index the site.

Ways to speed up website loading

  • Replacing or optimizing your hosting. Hosting performance is one of the main reasons why there is slow site loading speed on first contact, content loading index, loading time to start interaction, etc.

That is, if there are not enough system resources on the hosting (disks, CPU or processor power), it will not be possible to load fast. There are two options here: move the Internet resource to a new hosting, or purchase an expensive package of services with increased capacity.

  • Reducing the number of HTTP requests. HTTP requests are sent to absolutely all scripts, photos, CSS files, Flash, etc. At the same time, browsers can load up to 2 components of a page from a single hosting. If you reduce the number of downloaded elements, it is possible to make improvements in the performance of the site, reducing the loading speed. Reducing HTTP requests can be done in the following ways: creating a combination of several images into a single CSS sprite; combining js and css files into a single file; minimizing the use of plugins and scripts; using embedded images in the stylesheet using a URL scheme. This can noticeably increase the loading speed of website pages.

Proper order of CSS and JavaScript. To ensure fast loading times, CSS files are placed at the top of the page code and JavaScript files are placed below. This will encourage static content to load faster and dynamic content to load afterward.

  • Along with their proper placement, it is strongly recommended to reduce the size of the files themselves, thanks to which you will speed up the loading of the page. You can clean up unnecessary characters, transposed lines, comments, etc. For this purpose special services can be used, for example, JSCompress or Refresh-SF, thanks to which you can reduce the code.

  • Gzip compression. Gzip compression is used to minimize the number of requests to the server from the browser, increasing the speed of loading the site. The HTTP/1.1 protocol specifies the method of information compression using the Accept-Encoding header: gzip, deflate.

In situations where the server will see such a header in the request will be compressed data in the established way and will issue it to the user. To activate the compression function, you need to enter the appropriate code, or simply install the Gzip-plugin. The W3 Total Cache plugin is an excellent option.

Top comments (0)