A good website should never compromise on the user’s experience. As a web publisher, you should invest some time and resources to learn everything possible about optimizing your website for speed.
Table of Contents
- To Make Your Website Super Fast
- 1) Remove Unnecessary PHP Queries and Database Access
- 2) Remove Inactive Plugins
- 3) Using a FREE CDN (Content Delivery Network)
- 4) Keep Your WordPress Version Up To Date
- 5) Compress the CSS Code
- 6) Optimize the WordPress Database
- 7) Compress & Combine Javascript Files
- 8 ) Reduce Image Sizes
- 9) Disable Hotlinking
- 10) Caching Pages for Faster Delivery and Response
- 11) Combining Javascript and CSS Files with PHP Speedy
- 12) Preloading the Page Contents
- 13) Flushing the buffer
- 14) Using CSS Sprites Technique
- 15) Use jQuery Image Lazy Load.
- 16) DB Cache Reloaded Plugin
Who would stay on to browse through a sluggish, slow-loading website?
Most visitors lose interest in leaving the site if this is the case. Moreover, Google started considering Website speed as a factor in their search engine ranking logarithm.
This Guide will help you reduce your website server load and make your site faster.
Remember speeding up and optimizing your WordPress site is not an easy process. It takes a bit of time to make the changes correctly and safely. But it’s worth it if you could spend the time. The time to implement the optimizations would depend upon your expertise with WordPress. Before making the following changes, my sites took around 11 – 15 seconds to load.
After implementing these changes, the site takes less than 5 seconds to load.
Before starting with anything, first, take a complete backup of your theme files and your WordPress database.
Now go to https://tools.pingdom.com/ and enter your site URL and do a speed test to see how long it takes for your website to load (You do a speed test at last, after implementing the changes in this GuideGuide to know the speed gain you have obtained).
We aim to reduce the load time and server load to a lesser value.
So let’s start the Guide;
To Make Your Website Super Fast
1) Remove Unnecessary PHP Queries and Database Access
- Almost all WordPress themes are made so that there should be minimal user effort in configuring them. Most themes come with generic PHP codes, which can be easily replaced after installing them in our blog. Removing these avoidable PHP codes will lessen the number of queries to your server and thus makes your site faster.
- First, open the header.php files located in your current themes folder. You can do this in two ways: going to Appearance > Editor from the wp dashboard or accessing the file directly using an FTP client and opening it in Notepad or Notepad++.
- You’ll find something like this in the header file.
<title><?php bloginfo(‘name’); ?> <?php bloginfo(‘description’);?></title>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php bloginfo(‘stylesheet_url’); ?>“/>
<link rel=”shorcut icon” type=”image/png” href=”<?php bloginfo(‘template_url’); ?>/favicon.jpg” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”<?php bloginfo(‘rss_url’); ?>” />
The text in bold is the PHP code. These five PHP commands are executed each time when your website gets loaded in the browser. Since we don’t want the theme to be portable anymore, we could replace these PHP queries with their corresponding Html code. That’s about 20 Times Faster Speed.
Open your site in any browser, e.g., in chrome and press Ctrl + U or select View Source From the menu. Concerning the above code, you will see the site’s source code as below (e.g.).
<title>Computing Unleashed</title>
<link rel=”stylesheet” type=”text/CSS” media=”screen” href=”http://www.computingunleashed.com/wp-content/themes/amalroy/style.css”/>
<link rel=”shortcut icon” href=”http://www.computingunleashed.com/wp-content/themes/amalroy/favicon.png” type=”image/png” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”www.computingunleashed.com/feed/rss/” />
Now you might have got an idea about this. Now copy these codes and replace them in the header.php file and save the file, and you are done. You can now check for similar queries in footer.php, sidebar.php, etc, and replace them accordingly.
2) Remove Inactive Plugins
We might likely test out various plugins and deactivate them if we are not happy with the results. There is a tendency for us to leave those deactivated plugins in the plugin directory. But it’s better to remove all those inactive plugins that you don’t require. Also, check for any plugins that you have activated but not using. These could eat up resources. So make sure you maintain the plugin directory clean and tidy.
If you feel that you might want to use those deactivated plugins later, make a text document in the plugin directory with the list of plugins you need, and you could safely delete those plugins, which are in no need as of now.
3) Using a FREE CDN (Content Delivery Network)
A content delivery network is used by almost all popular websites like Google, Twitter, Facebook, etc. A CDN is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.
The user’s proximity to your web server impacts response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective.
Using a CDN network will improve your website response time significantly. But ordinary users find it difficult to afford a CDN service. But there is a free alternative.
CoralCDN allows you to take full advantage of a robust CDN without spending a dime. How to use it? Well, append `.nyud.net` to the hostname of any URL, and Coral will handle that URL.
4) Keep Your WordPress Version Up To Date
With the release of new versions, WordPress keeps on improving. On each update, WordPress developers put their effort into making WordPress faster and safer.
So it’s essential that you upgrade to the latest WordPress version to get the performance improvements and new features.
5) Compress the CSS Code
Compressing your CSS Code will make its size small, and your browser can render it faster, resulting in faster page load times. Compressing the CSS can be done in two ways. Either by doing it manually by using the service CSS Drive.
You have to manually copy-paste your CSS code from the style.css file in their website, and you will get the compressed version of it which you can paste back on the style.css file.
But if you make changes to your CSS code at times, it’s better to use the WP CSS plugin. The Wp CSS plugin will automatically remove the white spaces and compress your CSS files. Plus, you will also have other options to set the expiry time for the files.
6) Optimize the WordPress Database
Just like the hard disks, the WordPress database also gets fragmented. So optimizing the WordPress database too can speed up your site.
- For optimizing the WordPress database of your site, visit the Cpanel of your hosting provider.
- Use phpMyAdmin to optimize your database: Log in to phpMyAdmin, select all the tables, and click on optimize.
7) Compress & Combine Javascript Files
Like the CSS files, the javascript in your template is also a significant reason for speed loss.
Try to reduce the javascript as much as possible.
Javascript Compression Services;
8 ) Reduce Image Sizes
Posts become lively when images are added. But using high-resolution images on your website will put a high load on the server, which is one reason why some sites go down when a Digg front page is reached.
The images could be compressed to a level without much loss of quality.
9) Disable Hotlinking
Stealing our website’s bandwidth can be referred to as Hotlinking. This happens when others link your site’s images in their articles, which puts a load on your server.
This is not a big issue if one or two websites directly link your images, but when multiple sites use this, it might drastically steal your bandwidth.
Offenders could be easily avoided by implementing a small code in the .htaccess file.
Disable Hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?computingunleashed.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteCond %{HTTP_REFERER}
!^http(s)?://(www.)?feeds2.feedburner.com/PersonalComputingUnleashed[NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]
Copy-paste the above code in your .htaccess file in the WordPress root directory and save it.
Important – Replace my site’s URL and feed with yours.
10) Caching Pages for Faster Delivery and Response
The super cache plugin is a must-have plugin that caches the most visited pages on your website and makes it immediately available to the next visitor. The plugin generates HTML files that are served without ever invoking a single line of PHP code.
11) Combining Javascript and CSS Files with PHP Speedy
Minimizing the HTTP requests can speed up the site significantly, and the PHP speedy plugin will help you further by combining all the javascript into one single file and all CSS files into a single one. Therefore, there will only be two files that are being requested.
You can use Wp Rocket for maximum benefits.
12) Preloading the Page Contents
This doesn’t give much of a performance benefit but rather enhances the page load by loading the page progressively. The problem with putting up style sheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
So here’s what you have to do. Move the Style Sheets to the header file.
<title>Computing Unleashed</title>
<link rel=”stylesheet” type=”text/CSS” media=”screen” href=”http://www.computingunleashed.com/wp-content/themes/amalroy/style.css”/>
Move the CSS file link near the title in the header.php file.
13) Flushing the buffer
When users request a page on your site, it can take around 200 – 500 milliseconds for the backend server to put together the HTML page. During this time, the browser remains idle. The flush() function in PHP helps you load the partially ready HTML response to the browser, and it can start fetching the components while the backend server is busy with the rest of the contents.
To insert the flush() function in your wordpress site, Open up the header.php file and find the </head> tag and insert the <?php flush(); ?> function right after it.
</head>
<?php flush(); ?>
<body>
14) Using CSS Sprites Technique
It simply means combining all the images in the site into a single big image containing all of them. The browser loads the single big image and displays the different photos using background-position.
If you are using many static images on your site, then it is worth trying the CSS sprites technique. It not only speeds up your site but also reduces HTTP requests. You may check the complete CSS Sprites and their implementation here.
15) Use jQuery Image Lazy Load.
The jQuery Image Lazy Load plugin for WordPress helps to reduce the page load time drastically, especially when you have pages with images as its primary content. It delays the loading of images below the fold and loads only when the user scrolls up to the destination.
16) DB Cache Reloaded Plugin
The DB cache plugin works differently from the super cache plugin by optimizing your database alone. It caches WordPress MySQL queries to a file. This results in less space for caching and faster performance from the WordPress blog. This is no longer needed if you are using the Db-Cache option in the W3 Total cache plugin.
Apart from all these criteria, website speed also depends upon other factors such as the hosting, the number of java-scripts and CSS files you use, etc. VPS hosting will have more speed and performance over shared hosting than many WordPress blogs use.
If you can implement these steps correctly, you might notice a considerable performance gain by now. Still, there are more ways to improve the website load time further.
Don’t forget to add your valuable suggestions and ideas on how you speed up your website in the comments.
That’s genuinely good and helpful!
Thanks, Shanel 🙂