Boosting WordPress website speed reduces the loading time of your website increasing user experience and revisits. Great website loads within a second or two depending on the contents. However, there are certain factors that reduce the speed of your website, even though there are no coding errors. There are several ways to check your website speed like by using GTMetrix, Pingdom or Google Page Speed. Today, in this post we would discuss some of those factors that plummet your website speed and how to overcome those.
Boosting WordPress Website Speed using Speed Booster Plugin
Before we go any further I would like you to download and install a WordPress plugin named Speed Booster Pack by Macho Themes. If you do not know how to install a WordPress plugin then have a look at how to easily install plugins in simple ways. The Speed Booster Pack is a lightweight and easy to use the plugin which helps you to improve your website's loading speed by tweaking different options. And once you are done installing it let us look how to set it up to get the maximum performance.
- Post installation, head over to Settings on your WordPress admin panel and click on it.
- Locate the Speed Booster Pack plugin under settings ›› Click on it.
- You would see the dashboard, same as the below image.
We would discuss each option one by one present under the general section.
- Move Scripts to the footer: This option when checkoff will move all the scripts to the bottom of the page. Scripts will be removed from the head tag and placed just before the body tag ends. In doing so it will help to load the necessary page elements that need to be loaded at first. Like, since end users are impatient, hence it is a good idea to give the priority of your HTTP requests to the visual display/elements that will be presented to the client instead of to the logic of interaction or dynamics.
Note: This option only works if you have plugins or themes which utilize correctly
wp_enqueue_scripts. If you experience issues with any plugin please uncheck this option.
- Load JS from Google Libraries: This option enables the scripts to load from google libraries/servers. This is because Google Libraries are using Google’s CDN which is extremely powerful. Moreover, now it has become a standard, and a lot of other sites are utilizing it as well.
- Defer Parsing of Java Scripts: It places the attribute defer to all the scripts loaded from external sources. Defer when used downloads the JS file during HTML parsing and will only execute it after the parser has completed thus improving loading speeds. Scripts that have
deferattribute always execute in the order that they appear in the document.
Note: Some plugins might not work properly as they utilize certain scripts which are needed to be loaded on a priority basis for the DOM content to render properly.
- Remove query strings: At the end of the URLs some of the CSS and JS files have a file version following a '?', like domain.com/example.js?ver=1.20. Some proxy servers are unable to cache the resources that contain these query strings and thus they are loaded every time, increasing page load time. By enabling this option, you can remove the query strings and the servers will be able to cache the resources. A cleaned resource would look like domain.com/example.js.
- Lazy load Images to improve Speed: Checkoff this option to stop unnecessary loading of images. Images will only be loaded once it comes inside the viewport thus increasing overall page load speed. This option is very useful and effective.
- Removes extra font awesome styles: This option removes any other extra font awesome stylesheet used by other plugins. In this case, only one stylesheet would be present, loaded and used by the theme, plugins that utilize font awesome.
- Minify HTML and JS: Used to minify the HTML and internal JS codes to increase website performance. After enabling this option, load your page ›› right-click anywhere on your page ›› Click view source. You would see that the HTML code has been minified.
- Remove WordPress Short link: This option is helpful in those cases where WordPress URL shortening is useful.
- Remove adjacent post link: Some browsers might use Adjacent Posts Links to navigate your site, you can, however, remove it if you are using a perfectly designed theme.
- Remove Windows Manifest: Windows Live Writer (WLW) is a Microsoft application which is used for writing and managing blog posts offline and publish them later. You can, however, with the help of this option remove it from the WP head if you are not using WLW application.
- Remove WordPress Version: Checkoff this option to remove the WordPress version thus cleaning your header.
- Remove all RSS feed links: This option when enabled removed all the RSS feed links used in the header. These links fetch information from other website feeds thus decreasing your page load speed. If you are not using any RSS links explicitly then it is a good idea to checkoff this option.
Exclude Scripts from being moved to the Footer
Use this section to specify the scripts that you do not want to move to the footer or might need to be loaded in the header for some reason. This is because some plugins use certain JS that needs to be loaded initially else that plugin will not work. In those cases, you can specify the name of the handler and the HTML code of the script from the page source present in the script tag.
There are two ways to get the script handler, either you can get from the list of plugins (as shown in above image) showed by the Speed Booster Pack plugin which is, by the way, generated automatically. Or if the plugin is not present in the list then go to your plugin files by clicking on plugins ›› Editor, on your admin panel. For each plugin search for
wp_enqueue_script(... The first parameter inside the
wp_enqueue_script( is the script handler.
Exclude Scripts from being Deferred
Some JS files as said before are required during the initial load to set up the DOM content and functionalities of the elements. Example of such JS files are
jquery-ui.min.js, jquery.min.js etc.
For such scripts mention their names in the box provided and those scripts will be excluded from deferring.
Default Image Compression Level
The default image compression is set to 90% by default. It is the percentage by which all of your website images are compressed. As a rule of thumb more the compression, less is the size, and better is the performance, however, more data loss. So it is better to set the image compression level to around 60-70%.
The plugin also offers some extra features too.
- Load CSS asynchronously: Helps rendering your page more quickly.
- Minify all CSS: Inlines all CSS styles and optimises CSS delivery.
- Insert CSS styles to the footer: Improves the rendering of pages by removing the render-blocking resources while page load.
- Disable all CSS options in mobile: Used to avoid appearance issues in mobile devices. Not all mobile supports rendering elements smoothly. So, use this option if there is an issue related to the website appearance in any mobile.
That's it. I hope this post helped you. If you learned something please don't forget to share and comment. Also, check out our other articles related to WordPress.