31 Simple Hacks to Optimize WordPress for SEO and speed up a website for Mobile and Desktop. real case Optimization solutions.
Optimizing WordPress and accelerating the speed of your website is essential to improve SEO. The speed of loading a website has become a very important factor in search engine positioning.
The WPO (Web Performance Optimization) is a task that you must tackle now if you want to have a better chance of being in the top positions of Google. In most cases, you can optimize WordPress for SEO or Speed up a website without being an expert and for free. Otherwise, if you need an Expert for WordPress Speed Optimization don’t forget to Contact Us.
In addition, web optimization also affects usability and user experience, so it is time for you to consider the need to carry it out.
What are the factors that make a website slow or fast?
Several essential aspects affect the loading speed of a website. I am going to list them for you and then I am going to tell you how you can solve them step by step.
Hosting speed and performance
Image size and weight
Number of requests or requests
Number of CSS and JS files
Number of installed plugins
Template code optimization
How to measure the speed and performance of a web page?
For the analysis of your website, I recommend the excellent GTMetrix tool. This application carries out a detailed study of your site and alerts you to what are the factors that are slowing down the load so that you can solve them.
In GTMetrix you can see what the PageSpeed Score of your site is, that is, the grade that Google gives your website under factors. A good PageSpeed helps a lot to the position. In this guide, I am going to give you tricks to improve it to the maximum.
In this post, I am going to tell you everything in detail so that you can apply it in your web project.
Why is it important to optimize WordPress for SEO?
For two main reasons:
Optimize WordPress for SEO
First, SEO positioning. Google takes into account the loading speed of the webs when it comes to positioning them.
In addition, more and more users browse from mobile devices, and we must offer them content that loads smoothly and is adapted to AMP technology.
Optimize WordPress for SEO & user experience
Second, and no less important, is the user experience. A website that loads smoothly can help you get more conversions and sales compared to a website that has loading problems.
How to optimize a WordPress website and accelerate its speed to improve SEO positioning?
Enter GTMetrix and register. Registering is free, it takes a minute and allows you to better configure the tool.
Once registered, click on Analysis Options and select a location as close as possible to the country where your website is hosted.
Next, enter the full URL of your website in the Analyze Performance of box and click on Analyze.
GTMetrix performs a thorough check of your website and in a few seconds it shows you a general conclusion of the optimization status of your site:
How to interpret the analysis result in GTMetrix
As you can see, the result of the analysis gives us these main metrics:
The grade that Google gives to the performance of the web. Very important.
The note was given by Yahoo. Less important if your positioning objective is Google.
Fully Loaded Time
Website loading time. Keep in mind that this is fluctuating since to optimize WordPress performance of the hosting is variable. Therefore, it is recommended that you take several measurements and take the average to obtain more precise data.
Total Page Size
Size of the analyzed page, directly related to the size of the images and the elements that you load on your website.
Several reqSeveralrious services that your website performs to function, it is important to lower it to the maximum to improve the PageSpeed Score.
In this section, you can see the loading times of each of the processes that intervene on your website.
Here is another important piece of information: the Time to First Byte, which is the time it takes for the hosting to offer the first byte of the web page.
How to improve these metrics? GTMetrix recommendations and solution + tricks to fully optimize WordPress for SEO.
Apart from these essential metrics, GTMetrix offers us a super useful list of the elements that are worsening to optimize WordPress performance.
Taking as a reference the optimization work carried out with the A***-** website, I am going to explain them to you one by one and I am going to tell you how we did to optimize each one of them.
If you look at the previous image, you can see that we started with a PageSpeed Score of 70, a YSlow of 60, a loading time of approximately 5 seconds, page size 1.51 MB and 131 Requests.
Apart from this, we had room for improvement related to various code elements of the template, plugins, etc. Why was this happening?
When you install a WordPress template and design your website, install plugins, etc., it is normal that you find similar metrics if you have not yet performed the optimization. Now I am going to tell you in detail how we optimize all these points:
1. Optimize WordPress images 63%. The solution
This problem was due to the lack of optimization of some images. When you work on your website, sometimes the stress of day to day makes you forget about this essential aspect and you upload your images too heavy.
How to optimize the weight of the images? Solution for Optimize WordPress Images
You have several ways to tackle this problem quickly, easily and for free.
We did it in a super simple way thanks to the optipng tool that Hostinger offers for free. With a single click and in a few minutes, our images were perfectly optimized. That easy.
You can see the difference between premium hosting such as Hostinger and other lower-quality hostings and services. They are not gambling with this.
In this image, you can see the before and after of the optimization. As you can see, by improving the optimization of images from 63% to 99%, they improved the essential metrics of the web, especially the PageSpeed Score.
Other ways to optimize WordPress images are:
- Plugins. WP Smush It. EWWW Optimizer. Free plugins that allow you to optimize the images of a website. It is a little slower than the previous one and the result is not so good, but it is a good solution if you do not have premium hosting.
- Tools like Tiny PNG or JPG Mini. Free online applications that allow you to greatly optimize the weight of the images. The downside is that you have to download the images, run them through the tool and then upload them again.
2. Combine images using CSS Sprites 0%. The solution
This GTMetrix recommendation refers to the use of sprite images to reduce the number of requests and improve the loading speed.
What is a sprite?
It is an image file that contains many images from the site in a single file, so instead of uploading several files, just upload one. Then, with CSS, you move the coordinates of the image so that in each case a different one is displayed.
Why did we have this problem?
On our website, we have a mega menu type main menu, with a multitude of sections with icons. To load each icon, the web requests the server’s images folder, slowing down the load a lot and worsening the performance metrics.
Solution. How to fix the Combine images using CSS Sprites?
1. Generating a single image that contains all the icons in a single file
2. Putting the image as a background to all the icons and moving it 40 pixels to the left for each one using CSS
For the second icon, in background-position we put -40px 0px; For the third, we put -80px 0px; And so on.
The first value refers to the horizontal x-axis of coordinates, and the second to the vertical y-axis. Each icon shifts its background image 40 pixels to the left and in each case, a different image appears even if it is the same file.
Here you can see the before and after optimization using sprites. The improvement was brutal, from 75% to 83% in PageSpeed Score and a second less loading time. See how requests went down from 136 to 105.
3. Leverage Browser Caching 75%. How to solve it
This notice indicates the need to increase the caching of web elements to improve their loading to speed up a website.
How to improve the cache of a WordPress website? There are two possible cases
3.1. If GTMetrix tells you that the URLs to cache are internal to your website
- Installing cache plugins. The best ones, in my opinion, are WP Rocket (paid) and W3 Total Cache. WP Rocket is a spectacular plugin whose price is nothing compared to what you get. I use it in all my projects and the difference is remarkable
- Hiring a good hosting. A host like Hostinger or Bluehost implements an advanced cache system like Magic Cache (based on Varnish Cache) that improves load times considerably.
3.2. If GTMetrix asks you to cache URLs of external services
To cache external URLs like Analytics, Fonts, Maps, Facebook Event, etc., the process is a bit more advanced and requires the help of an expert in web code. The step-by-step procedure is as follows:
- Display in GTMetrix the box that warns you about the cache and sees which external files it asks you to cache. Save the codes that these external files contain in internal files on your hosting.
- It creates a script that runs with a cron task (scheduled task) every x hours, which saves the updated versions of the scripts of these external services in a directory.
- Edit the header.php file and change the URLs of the codes so that the calls to these files are made to those that you have uploaded to your own hosting and are loaded locally.
The before and after optimization shows an improvement in PageSpeed from 83% to 87% and improvements also in YSlow Score, loading speed and page size.
4. Serve Scaled Images 79%. The solution
Another problem that GTMetrix warned us about was loading images at sizes larger than necessary, something quite common on web pages.
This warning can have two different causes :
- You have manually uploaded the images to a larger size than necessary. For example, for a 300-pixel wide box, you have uploaded an image at 600px.
- Your template is displaying the images unnecessarily larger in size automatically. For example, you have on the home page of your website a strip divided into three columns with the last three blog articles.
The header images of each post, despite being displayed at a smaller size than the original, are still the same as the one you uploaded at a width of 900px since the template is not showing the previously rescaled images.
How to fix Serve Scaled Images?
- If you have uploaded the images to a larger size than you should, optimize them. You can do this by downloading the images, resizing them with a program like Photoshop or free online applications like Photor. Or much easier, with a free plugin like Photo Editor.
- If the problem is with your template, with a free plugin like Regenerate Thumbnails you can define the exact sizes that the images should have in the various places on your web page. Next, by tapping your template code a bit, you command it to display these exact sizes on each site.
- Using SVG vector type images. This type of image, being vector, always offer maximum quality and, if you optimize them well when you generate them vectorially, they can weigh less. A priori WordPress does not allow uploading vector images, but with a free plugin like SVG Support, you can do it easily.
Once this improvement was made, we raised PageSpeed Score to 88% and we continue to improve in the other parameters to optimize WordPress for SEO and Speed up a website.
1. Merging files
You can do this by merging files with a plugin like WP Rocket, which, as we have already mentioned, is paid.
A free alternative is the JS & CSS Script Optimizer plugin.
Note: as long as you do file merging, see below that your website continues to function correctly. Depending on the template and plugins installed, the result may vary.
This must be done manually, editing the code of your template, which requires a little knowledge of web programming.
The files of your website can be edited via FTP, file manager of the hosting panel or directly from your WordPress administration panel, in Appearanc> Editor.
To do this, go to the header.php file of your template, which dynamically generates the HTML header of your website (it is the portion of code that goes between the <head> </head> tags).
Another solution can be to take some requests to the footer of the page. This prevents charging from occurring in the first place.
In both cases, always do it with knowledge and great care to avoid problems on your website.
3. Asynchronous loading
Asynchronous or lazy loading allows you to call files in parallel, as long as they are files that are not immediately necessary to load your website.
Asynchronous loading can be done with WP Rocket. As you can see, we have already listed several improvements that can be solved with WP Rocket, which justifies your purchase.
If you optimize many things with a single plugin, you avoid installing too many plugins, with the problems that this can lead to weight, maintenance and possible conflicts.
6. Remove Query Strings from Static Resources 61%. Easy fix
Another typical problem of many WordPress templates, related to the generation of unnecessary strings in certain requests. It is not very serious and it is also easy to solve. By cleaning these text strings you can improve caching and speed.
How to fix Remove Query Strings from Static Resources?
Very simple mode
With a plugin like WP Rocket. Once again, this plugin allows us to fix a problem without having to install a different plugin for each enhancement.
If you want to do it for free, you have this plugin.
Editing the functions.php file of your template and inserting this code
The optimization of the Query Strings allowed us to raise the PageSpeed Score a bit to 93% and slightly improve other metrics to completely optimize WordPress for SEO & speed up a website.
7. Lazy Loading. How to optimize WordPress images loading to Speed up a Website
Lazy image loading is about serving images progressively across the page, not all at once. On a page loaded with many images, it can be very useful to lower page size and requests.
This is not a specific problem that GTMetrix warns us about, but it is essential to improve a key aspect to optimize WordPress performance: the number of requests or requests.
How to Lazy Loading Images
With a plugin like WP Rocket (another one!).
As you can see in the graph, by implementing this improvement we lowered the number of requests from 72 to 37. Thanks to this, all other metrics improved, achieving a PageSpeed of 94%.
8. Server cache. How to optimize caching
As I mentioned at the beginning, correct caching by your hosting can be a crucial element to optimize WordPress for SEO and speed up a website.
Apart from the cache improvements that plugins like WP Rocket or W3 Total Cache can implement, there is a part that your server must do. Having premium hosting like Hostinger can be decisive to improve your metrics and have a good SEO in Google.
Our Hostinger hosting performs a cache using a tool called Magic Caché (based on Varnish Caché). Varnish Cache is an advanced RAM caching system, which reduces load times and improves First Byte.
What is in my opinion the best hosting for WordPress?
I always say it, but in this case with even more reason: having good hosting can be crucial for your business on the internet. Don’t play it with this.
One of the best WordPress hostings I’ve tried
A quality hosting like Hostinger allows you to achieve higher loading times than other lower quality hostings, not to mention its enormous security, excellent support and stability.
Almost all our projects are hosted on this hosting and we could not be more satisfied. If you want your website to have a high speed and work in a professional, it is worth the difference in optimizing WordPress performance and speed once the Magic Caché tool from Webempresa has been passed to our website.
despite all the improvements implemented and being aware of the difficulty of further improving the metrics, from 94% we went up to 96% of PageSpeed Score. From 1.7 seconds of loading speed, we dropped to 1.2 seconds.
Note: Another high-quality hosting that I use on this website that you are reading is BlueHost, specifically the optimized VPS service that offers brutal speed and optimize WordPress performance and that helps me to position myself in the top positions of Google.
The final result of the optimization of our WordPress website
In the following graph, you can see the global comparison once all the optimization actions have been carried out on our website.
As you can see, the optimizations implemented have helped us to improve all the metrics, increasing from 70% to 96% in PageSpeed Score and reducing the loading time from 4.9 seconds to 1.2 seconds.
Next, I show you a brief summary as a checklist of things that you should always keep in mind if you want your WordPress website to offer good performance and speed.
10 basic and essential points to optimize WordPress. Decalogue of optimization of a web page
- Optimize the weight of your images and always put them in the correct size
- Cache everything you can from your website and external services
- Minify and combine files
- Reduce requests or Requests to the beast
- Make asynchronous loading
- Send some scripts and requests to the footer of your website
- Analyze and optimize comprehensively and constantly
- Use well-optimized quick templates
- Don’t go overboard installing plugins
- Always use good hosting
Do you want to leave your opinion? Do you know any other tips to optimize WordPress? Do you have any doubt?
Leave me a comment and I will be happy to answer you and help you optimize your WordPress 😉