Fast loading web pages lead to higher visitor engagement, retention, and conversions. This is proven by the usability tests and research data straight from Google. As you would agree that it makes perfect sense, because a typical searcher is accustomed to get lighting fast results when searching. In fact, to a degree that when visitors land on a web page, they don’t even read, instead, they quickly scan the web page.
Today mobile first index world of Google also asks website owners to follow Core Web Vitals report and fix poor user experiences on your site.
Remember that the second 2nd step of user interaction the searcher has after a search in Google, is visiting your webpage, when the visitor keeps waiting and waiting for your web page to load, well, he or she is not going to wait, instead go back to Google and search again. Over time, Google tracking almost everything will eventually rank other sites higher than those who have slow loading times.
Google suggests that on average web pages take 10 seconds to load (that’s snail pace) and Google suggests that 3 second rule is a good measure before users get frustrated.
Why is This Critical for Websites?
Because each time a search is conducted, Google records that interaction (this is called the bounce rate in your Google Analytics). Your aim should be not just bring web traffic, but keep them by providing great user experience.
Web page load time improvements are one aspect which you are in total control over to provide that great user experience.
If you’ve done your keyword research and all the other on page seo elements are optimized, now you can use page speed optimization techniques so that your web pages load faster.
Simple Web Page Improvement Techniques
- Minify, Externalize and or Group CSS or JS files: because when you minify, externalizing and grouping CSS and JS files will make your web page size smaller, also your website doesn’t need to send unnecessary http requests to the server each time a visitor requests different landing pages.
- Optimize your images: if you have Adobe Photoshop (or you can even use open source image manipulation programs like GIMP) you can experiment with Photoshop settings under File > Save for Web & Devices and optimize images used on your website. You can even try online tools which can assist you to compress your images
- Rethink your HTML code: even though you need all that you see on your web page, take a look at under-the-hood of your web page, and see if there are any empty redundant code. Because most theme designers ignore the implications of great coding and at times they use empty tags to style content. Visit your webpage > Press Control+U on your keyboard > Take a look at the Code to see if there are Empty tags. For example:
<div></div> <p> </p> <span> </span>
- Basically if you see any code as above on your website’s source code, remove them, because redundant HTML code serves no purpose
- There is always a great opportunity for improving Cascading Style Sheets (CSS) of almost all websites due to using non-custom development
- Utilize caching: why not utilize the technology at hand, because website optimization is just that, utilizing current WWW technologies to your advantage. Therefore, at least understand the basics of cache directives and use it wherever possible. If you are using WordPress there are many caching plugins
Improvement Tips for WordPress Sites
Usually, most of the default PHP code in the <head> section (can be found in wp-content/themes/header.php file) makes dynamic calls which can be served as static content
<html <?php language_attributes(); ?>><head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
</head>
Simply locate the code above and replace it to be static version like so:
<html lang="en-US"><head>
<meta charset="UTF-8"><!-- if your site is using UTF-8 encoding -->
<link rel="pingback" href="https://www.rankya.com/xmlrpc.php"> <!-- change the domain name to match your own -->
</head>
Although PHP is a fast processing script, sending 3 less HTTP requests is better. And you can probably find other areas of your code to optimize as well.
What Else Can You Do for Website Optimization?
Reconsider Using Plugins the power of WordPress as Content Management System is within the available plugins, with few clicks of a mouse button you can install new plugins that can do all sorts of stuff and really help you create stunning looking websites.
However, at times, you can accomplish similar results to those plugins using other methods (perhaps a simple manual addition of PHP code etc.) either way, always consider shopping around for better plugins which are coded much cleaner, and those that do not create many scripts just so that you can use the plugin. Because each new script the plugin relies on, is an extra burden on your web page load times.
Advanced Techniques: there are many htaccess file directive for better content delivery. Including Cross Origin and even prefetch some resources. I created a video particularly for optimization of WordPress sites, it will allow you to use simple server directives using .htaccess file (insights in that video are suitable for most WordPress setups). Or at least check out HTML5 Boilerplate’s .htaccess keep in mind to test each directive you use and always backup your website before tweaking .htaccess file.
Google’s PageSpeed insights and recommendations are for more technical website owners: Make the Web Faster its worth checking out.
Mobile Mobile Mobile is the Google World We Are Living In
50% searches conducted on Google network is performed using mobile devices. That’s HUGE. That’s why we are living in Mobile First Index by Google, it is critically important to optimize your website so that it is fast loading as possible on mobile devices because that affects your Google rankings both on mobile and also desktop search rankings.
Using Google Analytics?
Analytics help section has Site Speed Sample Rate which can be used by adding it to Google Analytics Tracking code to get in-depth data on user-timing
if (window.performance) {
var timeSincePageLoad = Math.round(performance.now());
ga('send', 'timing', 'pageloadtiming', 'load', timeSincePageLoad, 'customtime');
}
You can also place timing for scripts to load after
setTimeout(function(){}, 3500) //in this example after 3500milliseconds
Apart from what’s shared above, you can invest in better servers with higher resource allocation (such as more CPU and RAM just like your computer, faster the parts, faster the performance) with SSD and even your very own Virtual Private Server with dedicated IP where you do not have to share server resources with other site owners.
Hi Tolga,
This post is great,I learned new things. But what is mean by Externalize and Group CSS or JS files and how to do it.
You would simply make sure that the CSS or JS files are placed in just file and link it externally like so
<link href="css/global.css" type="text/css" rel="stylesheet"/>so instead of having CSS code on the page itself, you can reference the external file which contains the CSS (much easier to manage, and much better for everything else)