While we all know backlinks are the number one ranking signal, we cover another aspect of SEO and user experience, and that is your website’s loading speed.
1. Caching Plugins For WordPress
If your website is powered by WordPress, then this section of the article will be the most beneficial to you.
To speed up a WordPress website, the best thing you can do is install a good caching plugin that takes care of most of the things on this list.
Caching is a way to store data temporarily for easier and faster retrieval. That means caching could be done in two ways. Your host’s server could cache some data, and then your users’ browsers could cache the remaining data. This ensures that your server will not have to run as many database calls or files, and your user will not have to download every single file each time they visit your website.
The most popular WordPress caching plugin is W3 Total Cache and it is packed with features. In fact, it has so many features it can be a little overwhelming.
There is another much easier to use plugin called WP Fastest Cache. It is much more user-friendly and easier to setup. The fine folks over at GTmetrix have created a simple guide to follow to optimize your WordPress website quickly using the WP Fastest Cache plugin.
2. Implement A Content Delivery Network
This step is important for every website owner, including those whose websites are powered by WordPress. I'll use CloudFlare as an example but the principles apply to any CDN.
A CDN is a large network of servers distributed throughout the world that is capable of caching your website’s files, and then sending those files from the server closest to your users. So in an ideal situation, a user in New York would download your website’s files from the northeast United States rather than the west coast or Europe.
Routing your traffic through CloudFlare allows you to decrease loading times and increase website security.
In order to set up a CDN, like CloudFlare, follow these steps:
1. Register an account
2. Add your website to your account
3. Change your domain nameservers to point to the ones provided by your CDN during setup process
4. If using WordPress and CloudFlare, install the official CloudFlare plugin.
5. If not using WordPress, you should install mod_cloudflare module for Apache. Although this is not 100% needed, it is helpful in order to log your website’s users’ real IP addresses.
3. Optimizing Images
Image optimization refers to the process of converting an image to a specific format, which causes the image’s file size to shrink due to the compression used by that format.
Many website owners skip this step because they assume the images they post are already optimized. And while they are most likely optimized, that doesn’t mean you can’t optimize them further.
One of my favorite website to optimize jpg and transparent png images is Tiny PNG. As you can see in the example below, I was able to optimize my test image by over 50% taking the file size down from 9.8 KB to 4.8 KB.
For more advanced users, you can further optimize your images by using the newer WebP standard. You can read the detailed guide on how to successfully use WebP images while also supporting older browsers and browsers that do not support this format yet. Unfortunately, it is only supported by Chrome, Android, and Opera browsers today, so you definitely need to use fallback methods in order to properly load images on other browsers.
4. Combining And Minifying Javascript Files
In order to combine and minify JavaScript files, you should probably be familiar with JavaScript, otherwise, the process could break your JavaScript functionality.
If you’re using CloudFlare, you can enable JavaScript Minification by going to the Speed tab, and checking the JavaScript checkbox under “Auto Minify” sub section.
If you’re feeling even more adventurous, you can try turning on Rocket Loader in the same sub section. This feature combines JavaScript files into one, load scripts in the last priority, and caches them locally. If this feature breaks some of your JavaScript functionality, it is easy to turn off.
For those that are not using CloudFlare, you can still manually compress your JavaScript files. Simply use an online tool such as JS Compress to compress and minify your JavaScript code.
If you’re a web developer and savvy with code, you can run Grunt or Gulp to automate the process of minification. There is also an Apache module that can minify JavaScript on the fly, however, it should not be mixed with other minification methods.
Once you’ve combined and minified your JavaScript files, you should load them with async or defer attributes. If the script is an external third party resource, then it is best to use async attribute. For most other scripts that rely on one another to function, use the defer attribute. More detailed information can be seen here.
If you are using WordPress, you can try one of the optimization plugins such as Hummingbird or Async JavaScript, which includes a way to easily add async or defer attributes to your JavaScript files.
5. Combining And Minifying CSS Files
The process for CSS files is more or less the same as JavaScript except it is much less risky. Since CSS is primarily for website’s style and formatting, there is no risk of breaking the website’s functionality.
For CloudFlare users, the CSS minification is located in the same Speed sub section. You can also try to enable HTML minification while you’re at it.
Just as with JavaScript, advanced users can use Grunt or Gulp to minify CSS code on their server. There is also an Apache module called mod_ext_filter that can be configured to automatically minify CSS files, however, since they wouldn’t be cached as static files, it is not a preferred choice of minification.
In order to manually minify CSS, you can use one of the online tools such as Minifier.
6. Load Dynamic Parts Via AJAX
One of the problems websites might face is trying to load parts that generally load slowly because they need specific calculation or third party services. Using PriceListo website as an example, the social shares count part of the website would load slower because they have to contact Facebook and Twitter servers to get a correct calculation of the total shares.
So instead of bogging down the entire page, they simply call that part of the code via AJAX. That allows the main page to load completely while the share count is updating in the background and probably saves it in their database for an even faster retrieval next time. That would prevent having to load data from Facebook or Twitter on every page load. And guess what, even if there is an error in getting the count, only that part of the page would be broken.
If you’re not a web developer, it might be hard to separate your website into multiple AJAX calls. However, it is worth hiring a great developer to create it for you if you know for sure that a specific part of your website is a bottleneck to your entire page load.
Here is a more detailed breakdown on how to load specific parts of your page’s content via AJAX and PHP. And here’s an explanation of precisely why rendering content on server-side and loading it via AJAX is much faster.
7. Leverage Browser Caching
Browser caching is a way for your browser to cache resources such as images, JavaScript files, and CSS files so that they do not have to be downloaded each time. Although it mainly affects repeat users, it is still an important step to take to speed up your website.
In CloudFlare, this setting can be adjusted by going to the Caching tab and selecting the proper “Browser Cache Expiration” option. If your files are not updated often, you can select a higher option such as 8-16 days. Websites whose files update more frequently should select a lower option.
To manually enable browser caching on Apache-based servers, you can try adding code similar to this in your .htaccess file in the root of your website.
8. Enable Gzip Compression
Gzip compression is a way to load pages in a compressed format which are then decompressed and read by the browser. This saves on the overall file size as well as the speed it takes to load the data.
You can enable Gzip compression in a similar way as browser caching. Simply add the following code to your .htaccess file in the root of your website and you should be good to go.
If you are using CloudFlare, your resources will automatically be Gzipped already.
9. Avoid Loading Many External Resources
This is one of the problems big media websites have these days. But that doesn’t mean it cannot affect your website as well. In fact, it affects smaller websites as well, especially those that use ad networks such as Google AdSense, Media.net, Taboola, and so on.
The problem is that when you add third party snippets of code to your website, it will most likely load various dependencies and files in order to make their functionality work. This in turn exponentially increases your website’s loading time. These external resources can increase your website load time by over 100%.
So what can you do about it? The easiest solution is to minimize the number of third party scripts you add to your website. For example, if you are using multiple ad networks, try to consolidated your ads into only one or two networks max.
If you are using other third party resources such as forms, live chat, pop up notifications, and similar, you will need to run a GTmetrix test on your website and see which files are adding the most to your page load using the Waterfall view of the report.
In the example report below of the last article I wrote on Search Engine People, you can see that the loading time could be greatly improved if they removed some of the external resources I highlighted, the page load speed could be increased by over 2 seconds.
10. Implementing Google AMP
Google AMP (Accelerated Mobile Pages) is Google’s framework for creating light web pages for mobile devices. They are essentially stripped down versions of your website which are pre-loaded and pre-cached by Google’s servers.
For WordPress users, installing the official AMP plugin is highly recommended in order to create the AMP-compatible posts.
For custom websites, you would need to create a template for your website that follows the AMP guidelines. Implementing those is more difficult and the process varies depending on what type of website you are running, how many pages it has, and so on.
Hand-Picked Related Articles:
- Site Speed: Ranking Factor or Not? Everything Googlers Ever Said about Site Speed
- What Is Time To First Byte, And How To Improve It
- The Ultimate Guide To Mobile Site Speed Optimization
* Adapted lead image: