Loading speed of a website is an important aspect of user experience and SEO, so here are some tips to speed it up:-
1. WordPress Plugins:
If you have a WordPress driven website then you can get many benefits by paying attention to this section.
The most effective way to accelerate the speed of your website is by using the caching plugins to manage the elements mentioned in this article.
Caching provides a temporary storage for faster and easier access to data. Caching is done in usually two ways- The server of the host and user’s browser share all the data respectively which helps in better functioning as all the files are not required to be run or downloaded each time a user visits your website.
W3 Total Cache possesses the most features for WordPress caching. It can even overwhelm the user in the beginning.
If you prefer a more user-friendly plugin which is easier to operate then WP Fastest Cache is the one. A guide is also created by GTmetrix on optimizing the website with the help of WP Fastest Cache.
2. Create a CDN (Content Delivery Network):
This is an essential step for all kinds of website owners. CloudFlare can be used as an example as it shares the principles with any other CDN.
Content Delivery Network, as the name suggests, is a huge server’s network which is created to cache the files from websites and then transfer the required files to the users. It means that a user operating your website from New York will receive the files from North-east USA rather than Europe.
CloudFlare helps in rerouting the traffic to load your website faster and increases the website security.
Follow these steps for setting up a CDN:
- Create an account
- Link the website with your account.
- Change the domain nameservers with the one which is provided during CDN setup.
- Install the certified CloudFlare plugin if you are using CloudFlare and WordPress.
- Install mod_cloudflare module for Apache if you are not using WordPress. It is not essential but it can be used for logging into your users’ IP addresses.
3. Image optimization
It is the conversion of an image to a particular format, which compresses the image due to the format’s properties and decreases its size.
Do not skip this step. Even if the images are optimized, make sure that they are optimized to their fullest capacity.
Tiny PNG is the most recommended website for the task.
For advanced users, the WebP standard can be used. A detailed guide can be found on effective running of this on older as well as the other browsers who do not support it. It is supported by Android, Chrome, and Opera, so alternative methods are to be used for other browsers.
4. Combination and minification of JavaScript files:
A familiarity with JavaScript is a must for this process or else it won’t function properly.
On CloudFlare, JavaScript Minification can be enabled by ticking the checkbox below “Auto Minify” category in the speed tab.
The Rocket Loader can also be turned on for an adventure. It combines the JavaScript files as one, loads scripts as last priority, and locally caches them. It can easily be turned off if you face any problem.
Manual compression of JavaScript files can be done by those who do not use CloudFlare. Online tools like JS Compress can also be used for an easier compression and minification.
Web designers who also code savvy can do automatic minification by running Gulp or Grunt. A module on Apache can also be used separately from the other methods of minification.
After combination and minification of the files, they have to be loaded with defer attributes or async. In case of external or third-party scripts, async is preferred. Other scripts use defer attributes to function as they are dependent on one another.
Async JavaScript or Hummingbird plugins can be used in WordPress to add defer attributes or async to the javascript files.
5. Combination and Minification of CSS Files:
This process is similar to the one used for JavaScript files though it is less risky. As CSS deals with the styling and formatting of the website, it possesses no risk to the functionality of your website.
CSS minification can be found in the Speed category on CloudFlare. HTML minification can also be enabled for ease.
Just like in JavaScript, Gulp and Grunt can be run for minification of CSS by advanced users. A module name mod_ext_filter is present in Apache for automatic minification of CSS but it isn’t preferable as it does not cache files as static.
Online tools like Minifier can be used to manual minification.
6. Loading Dynamic Parts with AJAX:
Some parts of the website take more time in loading as it involves particular calculations or third-party services, which can be a problem. For example, in PriceListo website the count of social shares takes longer time as the website has to be connected with Twitter and Facebook to get an accurate calculation.
In such cases, the specific parts are coded via AJAX so the whole page does not slow down. The main page loads completely while the calculation keeps running in the background and the data is also stored in the database for the next time. This prevents the page from slowing down and breaking down as a whole even if a problem arises while contacting Facebook or Twitter.
The division of website into AJAX calls can be difficult for a non-developer. Though hiring a web-developer to do the job for you is totally worth it if your website has such a tricky part.
7. Browser Caching:
Browser caching speeds up your website as the data stored in it is easily accessible for recurrent users. The data includes JavaScript files, CSS files, and images.
To adjust this setting in CloudFlare, go to Cach tab then select the “Browser Cache Expiration” option. The duration of days should be selected on the basis of the frequency of updates in your websites. More frequent updates would mean less number of days and vice-versa.
For manual activation on servers based on Apache, the similar code can be added in the .htaccess file inside the root.
8. Implement Gzip Compression:
Gzip compression is a process where the pages are compressed and decompressed then read by all the browsers to load faster.
It can be enabled like browser caching, simply by adding the required code to .htaccess file inside the root.
Resources are automatically Gzipped in the CloudFlare.
9. Avoid External Resources:
This problem is mainly faced by big media websites but even smaller websites are affected as well. Websites that use Media.net, Google AdSense, Tabool, etc. are more prone to this.
The problem with these third-party resources is that they have to load various files and dependencies to work properly, so they increase the website’s loading time by 100%.
The best solution is to limit the third-party resources. Like if you want to use multiple networks for the ad then consolidate the ads into maximum two networks.
In case of external resources like forms, pop-up notifications, live chat and so on, run a GTmetrix test on the website to see the files contributing to major page loading by checking the report using Waterfall view.
10. Google Accelerated Mobile Pages (AMP):
It is a framework by Google to create moderate websites for mobile devices. They use a degraded version of the pages based on the previously stored and cached data in Google’s servers.
Install the authenticated AMP plugin for the creation of AMP-compatible posts on WordPress.
A template has to be created for the custom websites following AMP guidelines. The implementation of such templates is more complex as the process keeps varying depending on the type and number of pages on the websites, and so on.
