To-Do List To Raise WordPress Page Speed Grade
I must admit to you that I’m addicted to speed, and no, I’m not talking to you about any stimulant. I only have website speed in mind.
I am not the only one in this kind of quest though. Google has already announced that website speed is a determining factor for search engine ranking for them.
I almost forgot to mention that your revenue stream can literally disappear due to slow website speed. According to the websiteoptimizaton.com’s experts, transition from a page with 10 results loading in 0.4 seconds time to a page listing 30 results and loading in 0.9 seconds will decrease both ad revenue and traffic by as much as 20 per cent.
Similar tests conducted at Amazon showed nearly the same results: a load time increase of 100 ms decreased sales by 1 per cent.
All this makes it clear that people dislike slowly loading websites. Having said that, it is only logical that we ask ourselves how to improve the speed of our WordPress websites? If you continue to read this article, I’ll show you tips of what steps you should take to speed up your website.
How is website page speed determined?
The Google Page Speed and Yahoo! YSlow plugins for Mozilla Firefox determine the speed of your website against universally accepted website performance rules. However, they don’t give you advices on what to do with the performance scores provided by them.
My task is to outline the top recommendations for performance and show you the way you can take advantage of them to improve your website’s speed.
1. Bring down the number of HTTP requests.
What this means is to limit the number of files used to display content on your pages. When your website is visited by someone, the necessary files are sent to the browser of that person. These are references to a JavaScript library, CSS files, and loads of images.
As you may have already guessed for yourself, each file used to enhance the design of your website limits its speed. In a similar way, plugins from the WordPress repository are known to inject extra CSS code in the head section of your website and preventing you from adding the needed styles to your style.css file manually.
The important point here is to remember that one should always strive to remove what is unnecessary. You should always be mindful of how the plugins you like and use impact the performance of your website. A particular plugin may not be worth the extra page-load time it requires to operate.
2. All images should be optimized and correctly displayed.
This means that all images should be made as small as possible, without sacrificing much quality. Many images, depending on the format they use, carry a heavy load of metadata that can dramatically increase a file’s size. A lot of designers do not compress the images they use in their designs before uploading them to a host, and an image-intensive design can have a drastic impact on the overall site performance.
Another mistake inexperienced webmasters make is when they upload to their website an image far larger than their design requires. Unfortunately, WordPress allows this and many website owners upload huge graphics taken directly from their digital cameras to their sites.
With freely available applications such as Image Optimizer and Picnik, there is no place for an excuse not to optimize and resize photos. Both your server and your visitors will be thankful to you if you use them.
3. It is a good practice to minify your CSS, HTML and JavaScript code.
Before serving the code to your visitors, it is a good practice to remove all white spaces from it. All the tabs, spaces and structured code on your website has the purpose of making the code readable. Both browsers and servers care little of what the code looks like. They are only concerned whether it validates and executes without errors. If you want your files to perform better on the server, you should remove the white spaces before uploading them.
Since it isn’t always a good idea to dispose of white spaces from often edited files, it is practical to use plugins like W3 Total Cache and WP-Minify to only handle this at runtime and leave the files you edit unaffected.
4. Use a CDN or Content Delivery Network.
A CDN can turbocharge the performance of your server and lighten the load on it.
The high-performance network of servers called CDN is able to replicate your websites’ static assets and serve them from the closest POP to your visitors.
It may be hard for you to grasp this but the good news is that we are not required to have an understanding of the mechanics governing Content Delivery Networks to use their potential and power. What you have is a group of servers that distribute the static assets of your website to your visitors all over the world.
CDNs are considered one of the most effective ways to boost the speed with which our websites load.
5. Compress components and Gzip.
Before sending your files to the server, compress them at the server level. If you have to throw a piece of paper across a distance so that it goes as far as it can, would you not squeeze and crumple it as much as you can? The same applies here – we must allow our webserver to use compression on our files before they are served to our visitors. This is easily accomplished through a few lines of code added to our .htaccess file:
#Begin gzip and deflate
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
Although the aforementioned code may look intimidating, actually it is not that much complex. We just check to see whether the Apache mod_deflate module is there and if it is so, choose to serve plain files, favicons, CSS, HTML and JavaScript using the gzip compression method.
You should note that it asks for the mod_deflate module and the Apache webserver. In order for the gzip compression with NGINX to be enabled, you should ensure that a couple extra lines of code are included into the appropriate directive. These are:
server {
gzip on;
gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}
6. The method should always be chosen over the @import method.
When your stylesheets are included, make sure you link to the files instead of relying on the @import reference. The reason for this is the fact that IE deals with them differently. The browser in question loads them as a reference at the bottom of the document.
7. The stylesheet should be put at the top.
All references to stylesheets should be included in your document’s head section.
Unstyled content should never be displayed to visitors. Files that control the appearance of our website should load first so that they affect all HTML while it is loading.
8. The place for scripts is at the bottom.
All files that relate to functionality can load after the content has loaded. As we a mindful of how we serve the content to our visitors in the fastest possible way and the steps that users will take subsequently, it is a good practice to prioritize in the following way:
1. The content should be served to visitors as fast as it is possible.
2. Unstyled content should not load in the browser, and all CSS should load in thesection of a page.
3. The files that handle interaction, certain external API calls, tabbed widgets and so on should load last.
9. Use catching.
With catching, we are asking the browser to always rely on particular files for a certain time period. When a visitor requires the files once again, the browser loads them from its local cache and doesn’t request them from the browser again.
To run a website without catching is the same as going over to the nearby store to fill up a glass of water each time you feel thirsty. It is shortsighted and impractical to say the least because it takes so much more time and work.
The directive dubbed ExpiresByType is in use to let browsers know what types of files to cache and for how long to use them to display content. The following example informs the browsers of your visitors to cache images, favicons, CSS, HTML and JavaScript for a period of 3600 seconds:
ExpiresActive On
ExpiresByType text/html M3600
ExpiresByType text/css M3600
ExpiresByType application/x-javascript M3600
ExpiresByType image/bmp M3600
ExpiresByType image/gif M3600
ExpiresByType image/x-icon M3600
ExpiresByType image/jpeg M3600
I should have pointed out that the code above is for your .htaccess file. In NGINX, the same setting will look this way:
location ~* .(jpg | png | gif | jpeg | css | js)$ {
expires 1h;
}
10. Consider using CSS sprites.
These load one very optimized graphic for your design with the aim to improve on performance.
In essence, a CSS sprite represents an image that is made up of other images. Your design uses such sprites as a map that lists the locations of all the images on a particular sprite. When all the coordinates are known, some smart CSS is employed to point to the necessary sections of the sprite when the browser loads your design.
The topic of sprites is an extensive one and there are a range of resources on the web that explain the mechanics behind CSS sprites and how we can create such sprites for our projects. An example of a utility that helps generate a sprite and the associated with it code is SpriteMe.
Should you decide to implement some of these techniques, you will witness a dramatic and immediate improvement in the performance of your website. While it is good to know how things like HTTP requests and database calls work, we don’t need to grasp these concepts in detail in order to use them to our advantage in our websites.
