As I mentioned in the previous post, there are 3 fundamental lines of work to improve the loading speed of your website :
- Location of requested resources
- Optimization of the elements that run in the browser
- Performance of the server that processes the page request
So let’s get to the point …
What can I do to optimize the loading speed of my website?
For the first point (location of the resources requested), what I recommend is that you hire a server hosted in the country where your target audience is. If it is in Spain you already know, Spanish hosting (mostly to have no problems with the support language) with servers in Spain (essential for your website to be close to the user who visits it, reducing latency). You’ll have to scratch your pockets a little more (30 or 40 euros a year), but it’s worth it. If your target audience is international, I recommend that you hire a CDN service .
These are the main improvements we can make to improve the response time of a website. If you use WordPress as a content manager, you can make all these optimizations through a simple interface, thanks to the plugins that always facilitate the work. If you do not have previous knowledge in programming, I recommend that you go directly to the next subsection “Optimizing speed through plugins.”
To measure the speed of your website before and after the optimizations, I recommend launching the GTMetrix” application. for me the most complete and accurate of all>Ping Tools I know. As an example, I pass the current result for my website without making the optimizations that I will explain.
What values interest us?
- PageSpeed Score . It is a score based on the Google” page speed> . Server configuration, source code, images … etc. What interests me here, is that many parameters that have to do with the efficiency of the server are checked: if file compression is enabled, if static resources are being cached (so as not to have to load them again in each case) request), the number of redirections that are made, if the client-server connection is allowed to remain open for the exchange of resources (instead of making one request each time) … .etc. These parameters give us the first part of the optimizations that we must perform, and it usually gives us an idea of whether the accommodation we have hired is working correctly (if you hire a cheap service, at this point you will already have problems).
- It is the score based on the scales of measurement of the Yahoo search engine, in this case its Ylow” extension. broadly speaking the goal is same measure server configuration source code and content. although i have noticed that this meter more accurate in terms of optimization priority them. truth give importance to scales google.>
- It’s about database requests. Basically the times you have to make queries to find the information to show. The smaller this figure is, the better. To give you an idea, I’ll tell you that the global average is in 68 queries. With being around that figure your website will be efficient in this regard.
- Total Page Size Total page size, is the final weight of your website. In it, multimedia resources are especially important, mainly images that must always be optimized to overload it as little as possible.
Hands on, we will operate with the changes that you can practice at home …
Let’s start with the images, which are always the great dilemma. First of all say that it is essential to do a previous work of editing before uploading them to the web.
- The first thing is to scale each image with the dimensions that are going to be used on the web. This way we avoid a delay in loading time due to the resizing that the browser must execute
- The next thing is to specify the dimensions , this is width (width) and height (height) in the HTML code. This is done so that the browser knows the size of them and their situation with respect to the text and prevents us from having to reconstruct the page whenever it is requested.
- Finally, they are saved in the most compressed format possible without losing quality (PNG for icons and JPEG for photographs).
2. Use of cache
The cache of browsers what it does is store the resources of a website on the visitors’ PC. So as the user navigates through the other pages (or re-enter), the browser does not need to request again the resources already loaded to the server (eg header, footer … etc.). By not having to load the page every time the user requests it, the latency and consequently loading time is considerably reduced.
How can we configure it? Well, we must modify the global configuration file that regulates the access to the resources of your web, generally .htaccess when using Apache” server> . The objective is to tell the browser when to use the version of the resource it has stored in cache instead of requesting it from the server again.
What comes from now is only for advanced users, because if you make a wrong change what you’re going to get is a lot of headaches. In case the flies, always make a backup copy of this file. To access this file from your server you will have to use an FTP client like Filezilla” .>
To tell the browser how to cache each type of resource (how long you should use that version and not load a new one from the server) you can use the Expires module of the Apache server. The syntax to indicate the limit of validity of a resource is the following:
ExpiresByType type / encoding “base [plus num type] [num type] …”
Being base , the version reference of the resource to load. We can take as a basis the last modification of the file on the server, or we can take the version of the last access from the browser. To that base, we will specify a validity time (num type) in seconds. For example:
ExpiresByType image / jpg A31536000
Image / jpg (Type / encoding): For images in jpg
A (base): Indicates that we take as reference the last access
If we take as reference the last access, the validity is established since the client requested the resource. If we place an M, we indicate that the last modification is taken as reference. So the resource will lose validity for all clients, regardless of the date on which the last query was made. You can find more details in the Apache documentation .
31536000 (Num type): Effective time, in seconds. In this case 1 year.
We can also use this syntax:
ExpiresByType image / jpg “access 1 year”
A complete example of the code would be the following:
#We enable the module
#We set a default value, in this case a week
#The images will expire in a month
ExpiresByType image / jpg A2592000
ExpiresByType image / jpeg A2592000
ExpiresByType image / gif A2592000
ExpiresByType image / png A2592000
#on the server (6 seconds).
ExpiresByType text / css M6
ExpiresByType text / html M6
ExpiresByType application / x-shockwave-flash M6
#For PDF files one month
ExpiresByType application / pdf A2419200
ExpiresByType image / x-icon A29030400
However, this method does not work on all servers , so I show you an alternative method to do the same, which will be easier to operate. This is the Cache-Control header that also allows you to specify a little more the configuration.
It is an HTTP header (for communications, request / response between client / server), which allows establishing the guidelines that must be obeyed in the communication.
Example of use:
Header set Cache-Control “max-age = 2592000, public”
If you work like WordPress, you can configure these issues through a cache plugin, in my case W3 Total Cache .
Do you know the Gzip format? It is a compression mode that you can use yourself to reduce the size of your files. Well, today’s browsers support this type of compression. So that a web server that has the files compressed in this format, can send them to the browser, with the consequent reduction of the use of bandwidth and the loading speed.
Again using the .htaccess file of your server, you can enable file compression to reduce these times. The code that you would need to add is the following:
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / vnd.ms-fontobject
AddOutputFilterByType DEFLATE application / x-font
AddOutputFilterByType DEFLATE application / x-font-opentype
AddOutputFilterByType DEFLATE application / x-font-otf
AddOutputFilterByType DEFLATE application / x-font-truetype
AddOutputFilterByType DEFLATE application / x-font-ttf
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE font / opentype
AddOutputFilterByType DEFLATE font / otf
AddOutputFilterByType DEFLATE font / ttf
AddOutputFilterByType DEFLATE image / svg + xml
AddOutputFilterByType DEFLATE image / x-icon
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE text / plain
AddOutputFilterByType DEFLATE text / xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^ Mozilla / 4 gzip-only-text / html
BrowserMatch ^ Mozilla / 4 .0  no-gzip
BrowserMatch bMSIE! No-gzip! Gzip-only-text / html
Header append Vary User-Agent
Thanks to this configuration of the Apache DEFLATE module, we can reduce the load time up to 70%.
Do not worry if you use a server in the Microsoft family (IIS), because you can also configure file compression. Of course, for this I leave you with its technical support, you can see it here” .>
Now we will see what you can do to optimize the loading speed of your website, without many headaches, using only WordPress plugins.
Optimizing loading speed through WordPress plugins
I’m going to recommend some of the following plugins” to improve the speed of a wordpress> that my friend Arturo García taught me. Let’s see one by one the most interesting in relation to what I tell you in this post.
W3 Total Cache
The W3 Total Cache plugin helps you improve performance by using cache to reduce load times (what we saw in previous sections through code). If you allow the browser to use the resources stored in the device cache, you will be preventing it from reloading them and thus greatly reduce the load periods. With this you get:
- Minify requests for client-server resources
- Reduce latency in sending resources
- Optimize server performance by allowing it to run other processes
Just by activating the plugin, with the default configuration, you will have solved most of the performance problems. But there is a key section, which you must make sure is well configured. It’s about activating the browser’s cache optimization options:
1. General Settings> Browser Cache:
2. Browser Cache> General (general directives to add to the htaccess):
Using the cache we saw earlier, we activate it directly with “Set expires header” and “Set cache control header”. These are the headers that do the checks we see, but as you see it easier to do a “check” in this plugin than inserting the previous blocks of code.
We can also enable Gzip compression through “Enable HTTP (gzip) compression”.
We go with the images …
The Smush It plugin compresses the images of your website without any appreciable loss of quality, by converting it to more suitable formats, reducing the range of colors … etc. Not only those that upload from your installation but also those that were already uploaded (you’ll have to leave a ratillo logically). So you can forget about Photoshop to continuously edit your images.
Have you made these settings? I remember: use of browser cache, compression of files sent from the server, image optimization. Now launch the GTMetrix tool that I mentioned in the first section. You have significantly reduced the loading time and improved the rating, right?
Well thanks to this, you will soon see how to improve the positions in the rankings of search engines, in gratitude for facilitating the work of the search engines 😉
And if you think I forgot to include something in this post, Cheer up and comment!