Who doesn’t like a fast loading website/blog under his name? But to attain a beautiful yet fast loading webpage is one of the toughest tasks of web development. It costs great effort and money. You buy overpriced web-hosting plans hoping to get a speedy website, but still you feel something is wrong. Your website doesn’t load as fast as it was expected. Slow page load ultimately results in loss of visits to your site and weakens your site’s SEO. Before you blame your host, let me tell you, it is not completely their fault. You are also responsible for the slow loading of your website. As far as WordPress websites/blogs are concerned, to make a WordPress site load faster we need to figure out what factors are responsible for the load time:
- Server response time: This factor is monitored by your web-host. If your site has an unexpectedly long server response time — you must contact them and request them to reduce the response time.
- Number of scripts: If you are using a heavy theme and/or a lot of plugins, then CSS/JS files can make your site load forever. Increasing number of scripts also increases the number of HTTP requests in header.If your site has more than usual HTTP requests in header, then you will be experiencing a slow loading web page.
- Images: As everyone knows, un-optimized images take ages to load on a web browser and therefore rapidly increases site loading time.
- Unnecessary Plugins: A plugin uploads its own files to your WordPress installation directory which are later downloaded by readers accessing your blog, if plugin is activated. The greater number of plugins are activated, the more files are downloaded by users and hence the greater load time is experienced. Unnecessary plugins, therefore increase load on your web server resulting in bad page speed.
- Solving site loading issues
- Decreasing server response time: Using Cloudflare
- Taking your site-speed to a new level: Using W3 Total Cache
- Uncompromised Speed with Lesser Web Fonts
- Optimizing Images: WP SmushIt and other Tools
- Improve Caching: Remove Query Strings from Static Resources
- Clean Garbage: Deactivate Unnecessary plugins
- Load only what you need : Use Lazy Load plugin
- Image sizes does matter: Regenerate Thumbnails
- Monitor your site speed
Solving site loading issues
Decreasing server response time: Using Cloudflare
Security, CDN, Speed and Small Server Response Time
Cloudflare is a free Content Delivery Network (CDN) and site-optimizer which can work with any type of websites to deliver a fast-paced and secure web experience. It is free for all users with just a few feature limitations. Higher plans allow more freedom and start at $20 per month. Setting up for Cloudflare is very easy and can be achieved by any person who has access to his domain’s DNS manager. We will see how it works and what should be the most suitable setting for WordPress blogs.
How to set up Cloudflare?
First of all, create a new account on https://cloudflare.com and verify your email address. Cloudflare provides guided setup which involves the following steps:
1. Insert the domain
In this section, type the domain name you want to be on cloudflare. Cloudflare will read and download the existing A/CNAME/MX & TXT records so that they can be edited directly from the Cloudflare dashboard. After these records are downloaded, cloudflare asks if you want to do any changes to the existing records or just want to add new ones. There is always “I’ve added all missing records” link at the bottom of the page if you want to step forward.
2. Change the domain nameservers
For cloudflare to work with your domain, you need to edit the nameserver records from your domain registrar’s control panel. You need to delete all existing nameservers and add following two to the list:
Once you change nameservers, it takes about an hour for them to work, however cloudflare requests you to wait for 24 hours to guarantee that the settings will work.
3. Cloudflare settings
With proper cloudflare setting you can configure how the cloudflare services and apps should work with your site. You should chose the CDN+MEDIUM OPTIMIZATIONS profile for the intermediate results. You can however modify these settings later. In security settings section, ‘medium security profile will be worth protecting your blogs from regular hacking attacks. If you feel that your site is under heavy attack, switch the security level to high .
RECOMMENDED SECURITY PROFILE SETTINGS
- Security Profile: Custom
- Advanced DDOS protection: Unavailable on free plan
- Basic protection level: High
- Challenge passage TTL: 8 hours
- E-mail address obfuscation: ON
- Server side exclude (SSE): Off
- Browser integrity check: On
- Hotlink protection: Off
- Advanced security (Web Application Firewall): Unavailable on free plan
RECOMMENDED PERFORMANCE PROFILE SETTINGS
- Performance Profile: Custom
- Caching Level: Aggressive
- Minimum Expiry TTL: 5 days
- Auto Minify (Web Optimization): Off (for each; CSS, JS and HTML)
- Rocket Loader (Web Optimization): Automatic
- Website preloader: Unavailable on free plan
Our cloudflare configuration process ends up here. You can however add and experiment some cloudflare apps to deliver better browsing experiences to users.
Taking your site-speed to a new level: Using W3 Total Cache
Page, Database & Browser Caching, Script Minifications and Cloudflare Integration
A guide on how to install, activate and use W3 Total Cache can be found on the WordPress repository. But as you have selected Cloudflare as CDN, you must install the Cloudflare extension for W3 Total Cache. This will help W3TC to properly optimize your site settings according to cloudflare configuration. W3TC recommends deleting official cloudflare plugin. W3TC now also offers an extension which integrates Yoast’s SEO plugin within it, if you really use that. After you finish installing them, go to “General Settings” section and make sure:
- Page Cache is enabled with page cache method being “Disk : Enhanced ”.
- Minify is enabled and minify mode is set to be on manual mode. Minify cache method should be disk for best results. Leave remaining minify settings to their default settings.
- Database Cache is enabled with database cache method being Disk .
- Object Cache is not enabled . I don’t have a solid reason to do so, but I found it interfering with my cloudflare integration.
- Browser Cache is enabled . This reduces server load and decreases the response time by using the cache available in reader’s browser, if supported by the device.
- Enable CDN if you purchased a premium Content Delivery Network like MaxCDN. Otherwise feel free to disable it.
- Reverse Proxy and Monitoring are two optional and unimportant setting sections for a free-user using Cloudflare. I suggest disabling both of them to avoid any further issues.
- In Network Performance & Security powered by Cloudflare you must enable Cloudflare and enter your cloudflare account email, the API key and domain. After that you need to configure settings about Security Level, Rocket Loader, Minification and Development mode. Please note that all these settings must match to the same at cloudflare.com.
After you complete all these settings, save them.
Now as we set “Minify” to Manual, we need to properly configure the Minify settings.
By combining two or more CSS/JS files we reduce the HTTP requests your WordPress site sends to the server. Less the number of HTTP requests, smaller the page load time. By minification of CSS and JS files, W3TC deletes the useless data and comments from them to offer lighter and speedier files. This also helps gain a fast loading site.
Properly configuring Minify options in W3 Total Cache
- In General tab, enable Rewrite URL structure .
- Enable HTML minify settings in HTML & XML tab and also enable Inline CSS minification and Inline JS minification.
- As same we did in JS tab, CSS minification should be enabled with following configuration. To add new CSS (stylesheets) just open the source of your homepage and find .css files to add them to CSS minification list at CSS files management. You must skip all the CSS files which has URL structures like “http://example.com/wp-includes/ filename.css”. Add them to minification list causes Dashboard interface issues. CSS minification is also a single time work and will be required to done again only after you change your theme.
- In Advanced tab, you can modify the data according to your needs.
This is all we were required to configure with W3 Total Cache. Other settings can be modified by users with proper experience, but as we are already using Cloudflare, those can be ignored for now.
Uncompromised Speed with Lesser Web Fonts
Prefer offline fonts to web-fonts with similar glyph
Web Fonts are CSS file imports which usually make just a little load to your site’s server (if used by external font repositories like Google Fonts/Typekit) but they are downloaded separately on reader’s device and increase the site load time for an individual. For creative sites they may be visually appealing but for bloggers, they are of little or no use. Offline fonts can be used to decrease site load time as they are already available on reader’s device and their web browser render them perfectly with no extra loading time. While Open Sans, Lato, Raleway and Source Sans Pro etc., are the most used sans-serif web-fonts on internet, those don’t differ by Segoe UI font-family in appearance which is already installed on all Windows devices. For sake of speed, we can replace all these web fonts by ‘Segoe UI’. Helvetica/Arial font-family is another option for these sans-serif web-fonts. If you like to use serif fonts on your site, ‘Georgia’ or ‘Times New Roman’ can be great choices.
If you are really intended to use web-fonts on your site, make sure that they are not more than two. More the web-fonts, greater the site loading time.
Optimizing Images: WP SmushIt and other Tools
WordPress has several awesome plugins which may help your optimize and re-size images according to your needs. WP Smush.It by WPMU DEV is one such awesome plugin which optimizes new and/or old images by using Smush.it API. WP Smush.It is a must have tool for every WordPress blogger. It reduces files size of images to reduce load time of your webpages by 30% at an average. It works with almost all image file-types, including JPG, PNG and GIF. It’s however highly recommended to optimize images before you upload them to your media-library. You can use both offline (e.g., RIOT for Windows) and online tools (e.g., TinyPNG.org) to optimize images with a little or no compromise with quality.
Improve Caching: Remove Query Strings from Static Resources
Use this plugin to remove query strings from static CSS and JS files to improve page caching.
Clean Garbage: Deactivate Unnecessary plugins
Unimportant plugins make both the front-end and back-end of your website feel heavier. It’s highly recommended to deactivate the plugins your WordPress is not using. Also make sure that the activated plugins are up to date and fully compatible to your WordPress installation.
Load only what you need : Use Lazy Load plugin
Lazy load plugins like BJ Lazy Load decreases the load time of a webpage by loading images only if they are needed.
Image sizes does matter: Regenerate Thumbnails
What if a 800px image is downloaded where only a 250px images was needed? That will unnecessarily increase page load time.
Use thumbnail generation plugins like Force Regenerate Thumbnails to get images of all specified dimensions, which are termed as thumbnail, small, medium, large and full images in WordPress. It helps other plugins and scripts to load the best dimension of images with relatively less load time.
Monitor your site speed
You can monitor load speed of your website/blog by using Google’s Page Speed service, GTMetrix and Pingdom Tools. They watch and rate the webpage data according to their own algorithms. GTMetrix is best among them as it also suggests how to rectify any page loading issues with its amazingly easy documentation.
Get more help!
If you are having any issues configuring or following these steps, please feel free to contact me or drop your query in comments.