We are an impatient species. If we have the choice between two things that are otherwise apparently equal but one takes less time than the other, it’s probable that we’ll choose the one that is faster.
This applies in particular to the web. As computers, devices, and networks get faster, latencyAnother word for delay. The higher the latency, the longer the delay between the action and the consequence. becomes almost inexcusable.
We expect the web services that we use to load fast. If things take a long time, the credibility of the web service diminishes. A form that takes a long time to load or a purchase that takes a long time to complete are often interpreted as signals that something went wrong.
Example
There’s an often quoted finding that for every 100 millisecond increase to Amazon’s page load time, their revenue dropped 1%. Whether this is true or not, or whether it’s relevant today or not, it does seem possible.
Especially in the wild west of online retail, it’s entirely plausible that the page load times of an ecommerceE-commerce represents the industry of online sales. E-commerce covers online transactions that happen on the web, among other things. site can make or break the user experience.
Example
If you are shopping for a new phone, for example, and the search engine result that you clicked takes seconds upon seconds to load, it’s unlikely you’ll wait around for it to complete. It’s just so much easier to hit the browser’s back button and choose another result.
Making the web faster should be a goal of everyone working with the web.
As a technical marketer, many of the tools you work with will deliberately slow down the page. This is due to how things like analytics scripts, conversion tagsNormally, tag references an HTML element (or node). In a marketing context, tags are used to denote HTML elements and JavaScript snippets specifically designed for collecting data to marketing vendors., structured dataStructured data is a semantic layer on a website, explaining what the website is about and what different entities on the page are. This information is usually provided for bots and crawlers to consume. snippets, and consentData protection laws often defer to positive consent for collecting or processing data from the user. Requesting consent usually involves a consent banner or a consent pop-up where the user is asked whether the site or app can collect data from them. banners are all side effects of the site functionality itself.
It’s your job to minimize the effect these things have on page performance.
This doesn’t just apply to the time it takes to load a page, but also to the speed of the interactive experiences on a page. If it takes a long time for a page to react to your interaction (such as a click or a scroll), or if you see elements jumping around annoyingly as they’re being rendered, it can result in negative sentiment towards the site.
Don’t miss this fact!
While page load time is a popular metric for measuring page performance, you need to consider everything that happens on the page when working to improve page performance. The page load is only the start of the user’s experience on any given page.
Impact on search engine optimization
At its core, SEOSEO focuses on improving a website's visibility and reach for users who perform relevant queries in a search engine. is about improving the user experience so that users who do use a search engine can be satisfied with the results shown for their queries.
A site that loads quickly is more likely to elicit a positive response than one that loads slowly.
First, it’s important to note that while page speed is a ranking factor, it’s generally not considered to have too much weight in itself. It’s one signal among many. However, as it’s also an indicative factor of other (possible) problems on a web page, it might have an overall impact on multiple different signals used by search engines to rank the content.
Don’t miss this fact!
While page load times and similar metrics might not have a huge ranking impact on search engine results, they are a strong indicator for many other reasons why visitors might or might not be clicking your search results.
Page speed is more and more important in the age of mobile browsing. A slow site on mobile can dramatically affect mobile rankings, because mobile devices often have less powerful hardware and might be on a slower network compared to desktops.
Slowly loading pages impact how crawlersA machine that downloads and parses content on the web. It follows links to find additional content to fetch. Search engine crawlers use the parsed information to build the search engine index. access the content. If the site is very slow to load, crawlersA machine that downloads and parses content on the web. It follows links to find additional content to fetch. Search engine crawlers use the parsed information to build the search engine index. might not end up indexing all the pages. This is because crawlersA machine that downloads and parses content on the web. It follows links to find additional content to fetch. Search engine crawlers use the parsed information to build the search engine index. use a crawl budget to allocate a certain amount of time for crawling any given site. If your pages take too long to load, the bots might leave before indexing all of them.
Finally, while the actual page experience is more a result of SEOSEO focuses on improving a website's visibility and reach for users who perform relevant queries in a search engine. efforts rather than optimization itself, it’s good to remember that a slow site can and will impact conversion ratesThe ratio of conversion events to visitors or sessions. A high conversion rate usually means that your visitors are performing actions that are beneficial to your business.. If users get frustrated waiting for a page to load, they might leave before making a purchase, signing up for a newsletter, or taking some other desired action.
Remember that when you optimize for search engines, you optimize for your visitors, too. And vice versa.
Page performance and load times
There are many different possible bottlenecks when it comes to the activity of loading a web page in a browser.
The initial request can take a long time to generate because of slowly running scripts on the page.
The web serverA machine connected to the World Wide Web, which is purpose-built to respond to HTTP requests from clients and for sending resources in response. might be sluggish or unresponsive.
The HTMLHyperText Markup Language (HTML) is used to describe how web documents should be rendered by the web browser. When you navigate to a web page, the web server hosting that page serves your browser an HTML source file that is then rendered into the visible and interactive web page. source code might be sprawling and convoluted, slowing down the renderRendering happens when the web browser starts to convert the HTML document and its associated resources into the dynamic document the user sees and interacts with when visiting a web page. process.
The linked resources such as images and scripts might take a long time to load and execute.
The user’s device might be old and slow.
The user’s network might be slow due to being in an area of poor coverage.
All of these factors contribute to the overall page performance experience. Luckily, many of them can be mitigated.
For search engine optimizationSEO focuses on improving a website's visibility and reach for users who perform relevant queries in a search engine., a fast page means a better user experience. As such, search engines are incentivized to promote faster pages over slower ones.
Optimizing the overall page load time is a joint effort. Your work as a marketer can directly impact how long it takes, on average, to load the web page. If you stuff it with tagsNormally, tag references an HTML element (or node). In a marketing context, tags are used to denote HTML elements and JavaScript snippets specifically designed for collecting data to marketing vendors. and scripts for marketing purposes, it’s possible you are degrading the page performance just for the sake of getting more data.
Page speed optimization is always a compromise. If you wanted a really fast page load experience, you’d need to strip out a lot of the dynamic qualities that define the modern web page.
Deep Dive
Metrics to optimize when working with SEO
The metrics you can and should improve for SEOSEO focuses on improving a website's visibility and reach for users who perform relevant queries in a search engine. purposes include:
- Time To First Byte (TTFB): the time it takes for the web serverA machine connected to the World Wide Web, which is purpose-built to respond to HTTP requests from clients and for sending resources in response. to serve the first byte of its response back to the browser. This measures the readiness of the web serverA machine connected to the World Wide Web, which is purpose-built to respond to HTTP requests from clients and for sending resources in response..
- First Contentful Paint (FCP): the time it takes for the user to see the first element on the page.
- Page Load Time: the overall time it takes to load the entire page.
- Core Web VitalsA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page.: a group of metrics that measure the page experience itself.
Some aspects of page performance improvement require cooperation across your entire organization. For example, TTFB is difficult to improve with the tools typically available to a marketer.
Instead, you need to discuss with your IT and developer operations if they could figure out ways to make the web servers more responsive. This might mean adding cacheCaches are temporary storage mechanisms for frequently accessed things such as domain name queries, images, even entire web pages. Their purpose is to make the web faster. mechanisms, or shortening the time it takes for redirects to take place. Similarly, the more computation the web serverA machine connected to the World Wide Web, which is purpose-built to respond to HTTP requests from clients and for sending resources in response. needs to do prior to delivering the response, the longer it takes to deliver the first byte.
A great way to get instant gratification with improved latencyAnother word for delay. The higher the latency, the longer the delay between the action and the consequence. is to make use of third-party edge cacheServices like Cloudflare can be used to cache frequently loaded resources from the "edge" of the network, as close to the users as possible, instead of having to fetch it across the web. This can result in amazing performance boosts for HTTP requests and resource loads. services. These sit between your site and the web, and they constantly cacheCaches are temporary storage mechanisms for frequently accessed things such as domain name queries, images, even entire web pages. Their purpose is to make the web faster. the content that the site needs. They utilize some of the fastest and most robust hardware and network connections available to make serving the content as fast as possible.
Ready for a quick break?
Don’t forget to optimize your performance, too. Take a short break, reload your batteries, and then carry on with the rest of this Topic. 😊
Core Web Vitals
“Traditional” page load metrics like TTFB are useful for comparing relative performance of different websites, but they don’t necessarily reflect accurately what the actual user experience is.
A slow web serverA machine connected to the World Wide Web, which is purpose-built to respond to HTTP requests from clients and for sending resources in response. can still result in a positive experience if the page load and renderRendering happens when the web browser starts to convert the HTML document and its associated resources into the dynamic document the user sees and interacts with when visiting a web page. processes are smooth.
Core Web VitalsA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. is a group of metrics developed by Google for measuring the overall experience the user has on any given web page.
Because CWVA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. metrics are a function of the user’s experience on a web page, they are considered to be more user-centric and realistic as measurements than the more clinical ones (such as TTFB and page load time).
Core Web VitalsA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. include metrics like:
- Largest Contentful Paint (LCP): measures the time it takes to load the largest element in the visible viewportThe area of the web page or app visible to the user at any given time. It is constrained by the size of the browser window and the resolution of the user's device. of the page, relative to when the page started loading. This is a measurement of loading performance.
- Interaction to Next Paint (INP): measures the longest latencyAnother word for delay. The higher the latency, the longer the delay between the action and the consequence. (response delay) for each interaction (click, tap, keypress) the user has on a web page. This is a measurement of interactivity.
- Cumulative Layout Shift (CLS): measures how often content moves (“shifts”) unexpectedly due to new elements being rendered on the page. This is a measurement of visual stability.
Core Web VitalsA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. are tricky to optimize against because they are reflective of the user’s experience of a web page. Experience, of course, is entirely subjective.
However, when measured in aggregate and with real user data, CWVA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. can give you a good baseline to work against.
One quirk from real user measurements comes with geographical distribution. If your site is hosted on European servers, for example, a large enough number of visitors from Australia might skew the aggregate Core Web VitalsA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. measurements for your site, as they would experience delays with content loads and interactions due to geographical distance.
Page performance optimization is a global effort.
Page performance for technical marketers
When working in digital marketing, there are many things you need to consider regarding page performance and the user experience on your website.
Here are some of the concrete actions you can take to improve the browsing experience of your website(s):
- Optimize images – images often take the longest time to load on a page. Use modern formats like WebP, and optimize the output for the web and not for print, for example.
- Use a content delivery network – with a proper CDNA collection of web servers designed to serve files and resources to websites. Images and JavaScript libraries are often downloaded from dedicated CDNs. like Cloudflare, you can optimize content delivery so that it is always loaded from network locations geographically closest to the visitor.
- Minify CSSCascading Stylesheets, or CSS, is a web technology that describes how the web page should look like and, up to a certain point, respond to interactions. If the HTML document defines the content, then CSS describes how that content should be structured, aligned, and painted in the browser., JavaScriptJavaScript is the main language of the dynamic web. The web browser renders the HTML source file into a dynamic document that can be interacted with using JavaScript., and HTMLHyperText Markup Language (HTML) is used to describe how web documents should be rendered by the web browser. When you navigate to a web page, the web server hosting that page serves your browser an HTML source file that is then rendered into the visible and interactive web page. – on the web, every byte counts. By minifying text resources, you remove all whitespace and compress the content so that it still works but takes much less space.
- CachingCaches are temporary storage mechanisms for frequently accessed things such as domain name queries, images, even entire web pages. Their purpose is to make the web faster. – most modern CDNsA collection of web servers designed to serve files and resources to websites. Images and JavaScript libraries are often downloaded from dedicated CDNs. allow you to cacheCaches are temporary storage mechanisms for frequently accessed things such as domain name queries, images, even entire web pages. Their purpose is to make the web faster. content on their servers, but you can also signal the browser to cacheCaches are temporary storage mechanisms for frequently accessed things such as domain name queries, images, even entire web pages. Their purpose is to make the web faster. content on the user’s computer.
- Optimize server performance – consider faster hosting or more optimized load balancing.
- Limit redirects – make sure your content isn’t stuck in long redirect chains. When an internal URLUniversal Resource Locator, the main method of encoding internet addresses for web browsers to send requests to. changes, try to update all links to that URLUniversal Resource Locator, the main method of encoding internet addresses for web browsers to send requests to. so that you don’t have to worry about redirections.
- Prioritize content that first appears in the viewportThe area of the web page or app visible to the user at any given time. It is constrained by the size of the browser window and the resolution of the user's device. – what the page first shows and loads for the user is one of the most critical user experiences. Make sure that the content that is loaded above the foldThe "fold" means the visible part of the page when a visitor loads it in the web browser. Items that are "below the fold" usually require the user to scroll to them. is loaded fast.
Remember that page performance optimizations don’t happen in a vacuum. Ensure that making your websites faster is a joint effort across your organization.
Key takeaway #1: Page performance isn’t just an SEO benefit
This topic is part of the “SEO” chapter, but really it’s important for any web design and development work. Digital marketing tools and functions often introduce overhead to page performance, and you need to be aware of this performance cost. You need to be able to justify why your efforts are worth the (hopefully minuscule) dip in page performance.
Key takeaway #2: Page performance isn’t just the developers’ responsibility
Everybody working on the site needs to be part of the effort of understanding and optimizing page performance. Especially with tools like tagNormally, tag references an HTML element (or node). In a marketing context, tags are used to denote HTML elements and JavaScript snippets specifically designed for collecting data to marketing vendors. management systems, it’s easy to get caught in the loop of adding new stuff to the page without considering what the impact on page performance might be. Collaboration is key here.
Key takeaway #3: Core Web Vitals measure user experience
Core Web VitalsA set of metrics that measure actual user experience for loading performance, interactivity, and visual stability of a web page. measure how users perceive the speed and performance of the web page. They are different from more clinical measurements in that they reflect how the user actually uses the browser and experiences the loading of the page.