Page Speed – The Secret Weapon for SEO and Conversion
As organizations continue to fight for customers, experienced digital marketers are harnessing the power of page speed to outrank and outsell the competition. Despite Google’s recent focus on encouraging businesses to improve website speed, many organizations have yet to address this critical area. In this article, I’ll highlight why page speed is so important, just what page speed optimization is all about, and show how organizations can beat the competition by improving the performance of their own website.
The Importance of Speed: “I want it NOW!”
Over the last few years, the thresholds that consumers use to decide what makes a website great, just acceptable, or downright terrible have shifted dramatically. While some organizations constantly strive to make the best experience possible, others have grown stagnant – and consumers have noticed. The length of the average website visit has dropped by 18%, and visitors abandon websites more quickly than ever before.
Benefits to Search Engine Optimization (SEO)
Google recognizes this reality, and has integrated page speed as a ranking factor in search. Google’s goal is to present search users with pages that are the most likely to meet their needs, and the people have spoken – users need faster websites. As of July 2018, Google considers page speed when ranking both desktop and mobile search results. Slow websites stand to lose valuable search ranking and traffic if they don’t speed up.
It all comes down to visitor satisfaction: does the visitor FEEL like the website is meeting their needs? And more importantly, is the website meeting their needs QUICKLY? Research from Google finds:
29% of smartphone users will immediately switch to another site if it doesn’t satisfy their needs.67% will switch if it takes too many steps to purchase or find the information they are looking for.70% switch specifically because the website takes too long to load.
This data highlights two primary components of site speed: an efficient, user-focused web design; and technical page load speed.
Efficient Web Design
One of the most effective ways to satisfy visitors is through a well-organized website with easy-to-understand page layouts. Customers crave web designs that anticipate their needs and guide them through the shortest path to success. Seasoned web design and user experience experts are skilled at helping organizations identify their customers’ core needs so they can create a website designed to meet these needs quickly. From thoughtful navigation and strategic content, to helpful page layouts with an impactful design, every component of the website should work together to help visitors find the information they are looking for.
Optimizing the user interface and design requires an ongoing process of inquiry, experimentation, and evaluation. Are there opportunities to eliminate steps that a visitor must take to successfully reach their goal? Can you anticipate the needs of visitors and adjust the website structure or page layout to better support them? This process can yield powerful results but it’s different for every organization – so it’s important that you engage an experienced web designer.
Page Load Speed
Even the best web design is useless if the website takes too long to load. The moment a person chooses to visit your website, the countdown begins. Faster broadband has made websites with all kinds of rich media and dynamic interaction possible. But too often, careless website designers, developers, and owners unwittingly sabotage their websites.
They go overboard with too many plugins, fail to optimize images and videos, or neglect coding practices and hosting infrastructure. The result is websites that take far too long to load, and users who leave frustrated – research has found that 53% of mobile users will abandon a website that takes more than 3 seconds to load.
Generally speaking, optimizing page load speed is much clearer: reduce the amount of time it takes before a user can interact with your site in a meaningful way. While optimizing page load speed requires deep technical understanding, there is a handful of key concepts that marketers should be aware of. Let’s take a look at some of these concepts.
Optimizing Page Speed
In a nutshell, the goal of page speed optimization is to minimize the amount of time between when a visitor requests a page, and when they can interact with the page in a meaningful way. This might seem deceptively simple but in reality, there is a lot going on behind the scenes. There are many reasons a page might appear slow, and there just as many ways to make a website appear fast.
Every web page relies on many different parts that work together to display the page to a visitor. The web page links to CSS stylesheets and Javascript files. The stylesheets link to images and fonts. The body of the page includes text and more images. The browser needs to download each of these parts, and then process them to figure out how to display (or “render”) them on the screen.
Page speed optimization seeks to minimize the time it takes to download and render each page by addressing three main areas:
- Download Size – Minimize the amount of data that the visitor needs to download.
- Render Speed – Minimize the work that the browser needs to do to display the page.
- Network / Hosting Speed – Minimize the time spent delivering the site to the visitor’s device.
Reduce Download Size
Probably the biggest cause of slow website performance is the size of assets used on the website. Modern designs often include high-quality images and large videos throughout the design. These kinds of assets use lots of bandwidth and can prevent the page from loading quickly. To ensure that your website loads quickly, the website developer needs to pay close attention to these bandwidth-hungry assets.
Compress and Minimize Assets
Using special tools, web developers can compress the images and videos to make sure they are the smallest they can be. Images can be resized to a smaller resolution, image and video compression settings can be adjusted, and even javascript and CSS assets can be compressed to minimize the file size. Advanced website platforms will even support multiple versions of images or videos, so that smaller, more optimized assets are used when the larger versions are unnecessary such as on mobile devices. These kinds of optimizations all reduce the size of items that need to be downloaded.
Implement Lazy-Loading
Often, there are many images that are not immediately visible on page load. The visitor will not be able to see them until they scroll down, or interact with the page. The website can be built so that these resources are not downloaded until they are needed – a technique called lazy-loading. Using lazy-loading, the download of images and other assets are placed “on-hold” until a certain action takes place, triggering the browser to download the missing assets. Rather than reducing the SIZE of the items that need to be downloaded, these optimizations defer the download of resources so that the page displays more quickly.
Improve Page Render Speed
Another important type of optimization is render speed. Once each of these parts has been downloaded, the browser needs to process them and figure out how to display them on the screen, and this takes time. With specialized software, web developers can analyze the website and fine-tune it for the best performance with some of these techniques.
Reduce Render-Blocking Resources
Sometimes, specific resources put the web page on hold until the browser downloads and processes them. Things like stylesheets that tell the browser what the page should look like and javascript that provides functionality needed to use or display the page, can all prevent the browser from displaying the page to the user. Web developers can look for resources that block the page from displaying, and then find ways to move the unnecessary parts elsewhere to ensure only the most important resources stay in this “critical path.” This type of optimization is about prioritization – making sure that the resources needed to make the website DISPLAY quickly are loaded first, while the rest are loaded later.
Optimize Page Layouts
Modern websites rely on technologies like javascript to include interactive features and complex functionality. With javascript, the page can be changed on the fly and adjusted while you are using it. For example, javascript can be used to display a larger version of a picture when you click on a thumbnail. However, it’s becoming all too common for websites to rely on javascript for critical parts of the page, resulting in a layout that reshapes itself as the page loads. The result is often page layouts that jump around while you’re trying to read an article or click on a button, and this can be VERY frustrating!
Attentive web developers can create more stable layouts that prevent this behavior. By using techniques to preserve space for page elements BEFORE they are loaded, the browser doesn’t need to constantly rearrange elements and visitors can use the page more reliably – even before it has finished loading.
Optimize Styles and Scripts
When a browser is loading a web page, it has quite a bit of processing to do. Complex scripts and massive stylesheets can put a huge computational load on the browser, resulting in sluggish performance and choppy animations. Experienced website developers can analyze page performance, and adjust the code to eliminate repetitive or unnecessary work and reduce the browser’s workload. By carefully tweaking the website so that it displays quickly and responds to user input as soon as possible, the web developer can ensure a smooth and responsive user experience.
Optimize Network / Hosting Speed
The final area to optimize page loading speed is the network and hosting infrastructure. For each of the assets that need to be downloaded, the browser needs to request it from the server. A robust hosting platform and website backend should be designed to deliver these assets quickly, regardless of the user’s location or device. The right solution will depend on the specific website and its visitors, but there are several common techniques.
Minimize Network Requests
Every request for an asset, like an image file or a stylesheet, requires some additional time called “network overhead.” In order to minimize the impact of network overhead and other conditions, web developers can build the site to minimize the number of assets needed by the site. For example, instead of using multiple CSS stylesheets they can be combined into a single, larger file, resulting in fewer requests and a more efficient use of network resources.
Sufficient Server Resources and Network Bandwidth
Another consideration for website speed is the availability of network and computing resources. The server needs enough memory and processing power to be able to respond to requests quickly, and the network bandwidth needs to be able to support all the website visitors using the site. Very low-priced hosting plans will sometimes try to mask deficiencies here by including more storage space, free email addresses, or other benefits – but these won’t make up for terrible website performance. Leveraging scalable cloud hosting can be a great option by enabling the server to increase these resources to accommodate growing website traffic.
Caching and Content Distribution
While not needed by every company, a high-performance website platform can also reduce network and server load by distributing resources across multiple servers or multiple locations. Organizations with lots of website visitors or high bandwidth needs will often implement an infrastructure designed to trade off storage space for more speed. Website assets might be duplicated on several servers around the world so that website visitors can automatically connect to the closest and fastest one. Instead of generating web pages on-the-fly (the way most modern websites work), specific pages or resources that receive lots of traffic might be generated ahead of time and saved (or “cached”) to reduce the load on the server.
Optimizing Your Site
As you have probably already guessed, optimizing the speed of your website will require lots of experience and technical knowledge. You will need to enlist the help of an experienced web design company to see meaningful results. But before you do this, it’s important to know just where you stand right now. Google provides two simple tools that anyone can use to see how the performance of their website stacks up:
Test My Site
https://testmysite.thinkwithgoogle.com/By typing in your website address, this site will perform a series of tests and present you with a simple summary of your mobile website performance. Click the “Get My Free Report” button and provide your email address to see more information, including specific suggestions for improving page speed.
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/This tool is much more robust, and provides a clearer view into the opportunities that exist for your website. By typing in your website address, the tool analyzes your site and provides a performance summary for both the mobile and desktop versions of your site. It also highlights several example optimizations that could improve the performance of your website.
Take a look at these reports and bring them to the attention of your web design company and search engine optimization experts. You might be surprised by what you discover! By making the effort to improve page loading speed, you could see big improvements in search ranking, user retention, and conversion. So what are you waiting for?
Don’t hesitate to reach out to us if you have questions about this article, or if you’re curious about how your organization could benefit from page speed optimization.