The loading speed plays a crucial role in the success of any website. Fast loading speed not only improves users’ experience but also increases pageviews and helps with WordPress SEO.
If you do the Google Search then millions of blog posts are already written on this topic. In fact, I had even written many blog posts on this topic. However, this blog post will be different from them all.
Make a Website Load Faster
Unlike other blog posts, this will only consist of advanced ways to make your website load faster.
If you had already implemented all possible ways but still want to further optimize your website to load faster then you should surely read this blogpost.
However, if you are a complete beginner and reading this article for basic tips to improve the loading speed of your website then you must read the below articles first.
- 7 Proven ways to improve the loading speed of your website
- This is how I improved the loading speed of my WordPress blog drastically?
- 5 proven ways to load eCommerce store faster
- How to score 90+ in Google Page Speed Insight results?
- 8 faster ways to improve the loading time of your online store
After reading the above articles, kindly refer to this blog post for further optimization.
I promise you these advanced tips will surely resolve all your problems by increasing the loading speed of your website.
But before all else, let us check the loading speed of my blog (LoveUMarketing) first.
From the above snapshot, you can clearly observe the loading speed of my blog is of A Grade.
If you want to achieve these results then you must read this article thoroughly and implement the tips given in this blog post.
So, What are we waiting for? Let’s discuss those advanced tips below.
1. Remove Social Media Sharing Plugin
This is the very first thing I did on my blog. I removed the Social Sharing plugin from the blog. And, the results were really surprising.
Besides loading speed, the number of organic keywords on my blog also got increased. The below snapshot is the proof of the same.
Being a new site, the traffic on my blog was almost NIL, and out of which only a few percentages of users were using the social media sharing plugin.
On the contrary side, due to this installation, the loading time of my blog got increased. This was because the plugin needs to load a few additional CSS and JS files to function.
When I did the cost-benefit analysis, I found that removing this plugin will have more benefits than using it.
Hence, I removed this plugin from my blog.
Now, if in case you still want to have the social sharing option enabled on your blog then you may refer to the below tips for better results.
- Enable only a few selected social networking sites like Facebook, Twitter, and Pinterest on your blog.
- Install superfast social sharing plugin without javascript. In simple words, instead of installing any fancy plugin, simply add the link to a social sharing site on your blog. This is as simple as adding any hyperlink to the text in a blog post.
- Do not add a social sharing option everywhere on your blog. Add it only if it is required. For example, I don’t find any logic in adding these buttons on both the top and bottom of the blogpost.
2. Remove render-blocking resources
Render-blocking resources are stylesheets, HTML imports, and scripts, that delay or block the browser from rendering page content to the screen.
It is highly advisable that you should not load unnecessary resources to the top of the page because it is going to make the browser take more time to load the visible part of the content.
In simple words, the lesser the resource used to the top better the loading speed will be.
This is the only reason why I have only two objects installed at the top of the page. These resources are the Header and Signup form.
3. Do not install any Page Builder Plugin
Why you should install the page builder plugin if the default inbuilt ‘Gutenberg Blocks’ can do this for you without any kind of installation?
Yes, default ‘Gutenberg Blocks’ are capable enough to build any website like a page builder.
In fact, my blog LoveUMarketing’s homepage is built using these blocks.
Like the Page builder plugin, Gutenberg also has all features like Social Media Sharing, Recent Blogposts, Cover Page, Columns and Rows, etc are available.
So, there is no logic in disabling the Gutenberg and using a page builder in place of it.
Moreover, your entire website will get broken down if you uninstall the page builder from your site.
4. Remove Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. Obviously, this is faster than the visitor having to download the CSS files directly from the server. However, this will slow down your site if you start using inline CSS for every HTML element.
Hence, it is better to remove inline CSS to improve the loading time of your website.
This can be easily done by adding the below code to your WordPress function.php file
add_filter('the_content', function( $content ){
//--Remove all inline styles
$content = preg_replace('/ style=("|\')(.*?)("|\')/','',$content);
return $content;
}, 20);5. Disable Heartbeat
WordPress uses heartbeat API which creates a communication channel between your server and browser. This will leads to frequent use of the admin-ajax.php file.
Now, if you don’t need this heartbeat API, then you can disable it by adding below in the function.php file of the WordPress blog.
add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}or else, you can also install the WordPress plugin ‘Heartbeat Control‘ to completely control the heartbeat API of your WordPress blog.
It is highly recommended that you should move all Javascript files to the footer instead of the header.
Javascript files are known as ‘Render-Blocking’ resources. Hence, moving them to the bottom will help the webpage render easily. And this will also improve the loading speed of your website.
Of course, CSS files can also be moved to the footer. But, moving your CSS after the closing body tag will cause major styling issues that will lead to Flash of Unstyled Content.
It may also have a negative impact on the ‘Cumulative Layout Shift’ scores of your website.
Hence, it is only advisable to move Js files to the footer rather than CSS files as well.
7. Defer Javascript files
When you defer the Javascript and CSS files, it will tell the web browser to not load them until the HTML has finished loading.
Like in Point no.6 (shared above), here I will not defer the CSS files because it will result in FOUC.
I will only defer the Javascript file here. And, the same can be done easily by adding the below code to the function.php file of your WordPress blog
/** Defer Javascript Files
/* Add this code to defer Javascripts and CSS files for improving loading speed
*/
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
function move_javascripts() {
remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_footer', 'wp_enqueue_scripts', 5 );
}
8. Defer Google Analytical Code
I am sure to track your blogging statistics, you are using Google Analytics on your site. But, besides tracking statistics it also results in render-blocking javascript resources leading to an increase in the loading time of your blog.
This can be further resolved by deferring the Google Analytic Js file. You can do the same by adding the below code to your header.php file of your WordPress theme.
<script defer src="https://www.google-analytics.com/analytics.js"></script>Over to You
I am sure if you implement all the above tips then it will definitely improve the loading speed of your site drastically.
Obviously, you may contact us anytime if you need any help in implementing any of the above tips or require additional information on it.
But, always remembers, these advanced tips will work only if you had already implemented the basic tips given at the start of this article.
At last, I had missed out on any important tips to improve the loading speed then please do share with us in the below comment box.
You can also contact me through ‘Contact Me’ page at any time.