Slow page speed ruins the experience for users. The speed at which your page loads is uber important as users will click away if your website has not rendered in mere seconds.
Google says that the probability of a visitor bouncing from your site increases by 32% if your page load time goes from 1 second to 3. And this increase becomes higher the longer your page takes to load.
Before we go further into page speed optimization, let’s talk about what exactly page speed is. It is a measure of how fast all the elements on your page renders. These elements include your text, images, video, and code.
It sounds straightforward, right?
But your page load time is affected by more than the elements on your page. Other factors could be the culprit behind slow load times. An example is sluggish server response time.
We will explore all these variables as we go along. Let’s delve into ways you can measure your page load time.
How is Page Speed Measured?
Here are three common ways of measuring the speed at which your page loads:
- Fully loaded page is the most direct way to measure how fast your page loads. This calculates the time it takes all the content on your page to load. For example, it may take 8 seconds for your page to render completely.
- Time to first byte (TFFB) gauges the time it takes your page to start rendering the elements it contains. It basically measures the time it takes for the page to load the first byte as its name implies.
- Coined by Google, the First meaningful paint measures the time it takes for your page’s primary elements (readable content) to appear on the page. Say your page takes 8 seconds to fully load all the content on the page, your primary content could have loaded in 1.2 seconds. That 1.2 seconds is what this metric measures.
There is no one way to measure your page speed. Every way of measuring has its advantages and disadvantages. It is essential that you optimize page speed and these metrics can point you in the right direction.
Why is Page Speed such a big deal?
Apart from losing you valuable traffic, page speed has become an even bigger deal for websites looking for more organic visibility.
Your webpage loads too slowly. Visitors have a bad experience, they click away and may never come back.
Do you know who else is in the business of providing an excellent User Experience to users?
Search engines!
That’s right, search engines like Google always want to provide the best experience possible for their users. So, what does it tell them when visitors click away from your webpage because of snail-pace speeds?
Google may deprioritize showing your page to visitors because your bounce rates are too high and dwell times are low. Page speed optimization is so vital to providing a great user experience that Google announced it will use it as a ranking factor in 2018. Google now considers the speed of your webpage when ranking your content.
Bottom line, fast page speeds improve the experience of visitors to your website. And search engines reward you for providing great user experience.
Tools for Analysing Page Speed
Knowing how important page load time is, analyzing and optimizing it are the next logical steps for anyone. Below are some great tools to help analyze speed load times:
- GT Metrix is a free tool that you can use to analyze your page speed. It uses Google PageSpeed and Yahoo’s YSlow rules to perform speed analysis and offers you actionable steps you can take to optimize your speed. GT Metrix also has a paid version.
- Google Page Insights is a tool from Google that you can use to analyze page load speed. It auto-generates tips for improving your web page speed.
- Pingdom is more than a page speed monitoring tool. They also offer website performance monitoring. Their speed tool tests your page load time and offers suggestions on how to boost your speed.
There are many other tools to use in web page speed analysis but these should get you started!
Mobile Page Speed Optimization
No page load time article would be complete without focusing on one often neglected area — Mobile!
Mobile traffic accounts for half of all traffic on the web. Many internet users depend on their smartphones to access websites, watch videos, send emails, contact companies and conduct business. Their phones are the hubs of their internet activity and access.
But mobile web page speed has not kept up with the increase in mobile traffic. It still takes up to 15 seconds to load the average mobile webpage. This figure sounds benign until you realize that over 50% of users click away if a mobile page is taking over 3 seconds to render. A whopping half of all traffic to your website will bounce if your page doesn’t load in less than 3 seconds.
Slow mobile pages are costing many websites valuable customers, revenue and traffic. Google says many mobile websites are bloated with unnecessary elements that slow down the webpage speeds and discourage users from sticking around. Just optimizing the speed and size of their mobile pages reduced bounce rates for many websites.
A good practice towards improving mobile web page speed is compressing images and other visual elements on the page. This will decrease the size of the web page and boost the speed at which the page loads.
We will get into optimization steps to improve both desktop and mobile sites below.
Simple Page Speed Optimization Steps to Take
When it comes to page speed optimization, there is always room for improvement. These simple actionable steps can take your website from snail to cheetah speed in no time!
Compress images
Large images contribute to slow load times. While large files may look extra crispy, your website need not be bloated with images that are 10MB and above. These images will slow down the speed of the page they are on as it takes a longer time to render them. During which your visitors have clicked away.
There are many schools of thought on what image size is best for websites looking to improve speed. Google recommends you go as low as you can before you lose image crispiness. You can use PNGs, GIFs, JPEGs and other images formats provided they are clear, crisp and small.
Please note that the display size of your image differs from its file size. For example, your image might be 600 x 900 pixels in display size but its file size could be 300 kb. File size is what you need to reduce.
If you have a WordPress site, Short Pixel is a good plugin that compresses images. You can alternatively use PhotoShop and Compress to reduce file size and crop images.
Clean and shrink your code
One element that makes up your web page is code. This is typically CSS, HTML or JavaScript, but there are many coding languages. Like images, your code also has a file size that can be shrunk and compressed to make rendering faster. A good tool to use for compression is GZip.
Clean up your code to greatly boost web page speeds. Remove unnecessary characters (like spaces and commas), code comments and unused code to make your page faster.
Reduce page redirects
A page redirect occurs when a visitor to your website clicks on a link and is redirected to one or more locations before they get what they wanted originally. Page redirects add an unnecessary wait time to your page speed. You should use the page redirects sparingly to prevent visitors from clicking away.
Upgrade to premium hosting
This is one of the most important steps you can take to boost page load times. You may implement all the actionable steps in this guide, but if you are using shared hosting plans, your page speed will still suck.
Hosting your website for less than $5 monthly means you’re sharing that server with millions of other websites. Response time from your server will be slow as it has to handle requests for millions of websites. Cheap shared hosting with millions of websites subscribing is how many shared-hosting companies turn a profit.
If you are dead serious about having instantaneous page rendering time, it’s time to upgrade your hosting to premium or even a dedicated server. There are many hosting companies offering premium hosting and dedicated servers. We have tested several WordPress premia hosting companies but tend to like WP Engine the best.
Enable browser caching
Browser caching allows visitors to your website to store parts of your webpage in their browser (like Chrome, Safari or Firefox) cache. This allows repeat visitors to your website to experience faster load times as their browser doesn’t have to download all your page elements.
While this has no effect on the loading speed for new visitors, it is a great way to provide a good experience for existing traffic. You can set up browser caching in your .htaccess file. You can make use of a plugin if your website is built on the WordPress CMS or enable caching via the server.
Remove render-blocking Javascript
Before web browsers fully render a page, they have to read and interpret your HTML code first. If during this process the browser encounters a script, it will pause rendering your page and execute the script. Then it will load your page. This process hogs time and increases the loading time of your webpage.
For example, the script for your side banners can increase how long it takes a browser to render the main content on your webpage.
Page speed analysis tools like Google PageSpeed Insights show you the exact scripts that are causing your page to load slowly. You can fix this by adding the content of the script directly into your HTML code and your browser loads the script only when needed. This method works for optimizing single pages and small scripts.
Another alternative is to defer the script. This means any non-vital script is only loaded after the browser has rendered more essential components.
Improve server response time
Many things can affect your server response time. Common examples include the amount of traffic you receive, server software, page resources and hosting solutions. Google recommends having a server response time of 200 milliseconds. If your server response time is higher than recommended, you can work on improving it by fixing things like slow routing, inadequate memory, and slow database queries.
Leverage Content Delivery Networks (CDNs)
A content delivery network (aka Content Distribution Network) is a group of servers in different locations worldwide that store a copy of your website and loads it quickly for visitors.
When someone in a location far from your servers visits your website, your pages load slower for them. But with CDNs, this person experiences faster page speeds. This is because your website is rendered from a copy stored on a server close to the visitor.
Using a CDN decreases page load time. This is essential for companies that have a good percentage of their monthly traffic coming from international or national visitors. There are many CDN providers that offer their services to websites. Popular providers include Amazon’s CloudFront and Cloudflare. Alternatively, check with your hosting company to see if they already offer a CDN solution you can leverage (WP Engines does).
Conclusion
Page Speed optimization is important both to creating a great user experience for visitors and in how search engines rank your website. Taking actionable steps outlined above to improve your page speed ensures you don’t miss out on traffic, revenue from that traffic and being ranked well on the organic search results page.
As always, I enjoy hearing from fellow optimizers who have boosted their page speeds. Are you having any challenges with the more technical side of optimizing your loading time?
Leave a comment below.
Or you can contact me directly for a free consultation.
