With Google now rolling out their 2021 Core Algorithm update, never before will the mantra of “mobile-first” be more cemented into the minds of website owners, content creators, administrators, and developers.
The update will place an even greater emphasis on a user’s on-page experience by diving deep into Google's Core Web Vitals and the associated results for page speed.
In order to alleviate any future pain points that are likely to occur due to the algorithm modification, or at the very least lessen their effects, it is important to be proactive and take advantage of the existing knowledge now. Get to know the average speed of your web pages as they exist today. What are your strengths and weaknesses? Most importantly, learn how you can improve your user experience and enhance your page speed performance without sacrificing the overall quality of your website.
Finding Your Mark
As a general rule of thumb for website managers, the ideal page speed mark to shoot for is an average of 2-3 seconds. If a website takes any longer to load, the likelihood of a user converting into a qualified lead will be greatly diminished. A study by KISSmetrics has shown that an average of about 40% of users bounce from a website when it takes longer than 3 seconds to load. As part of the 2021 algorithm update, Google is placing a greater emphasis on page speed and their PageSpeed Insights software, which allows users to track in real-time key metrics pertaining to the speed of a specific page URL. The six key metrics that Google factors into page speed ranking are:
- First Contentful Paint: First Contentful Paint marks the time at which the first text or image is painted.
- Speed Index: Speed Index shows how quickly the contents of a page are visibly populated.
- Largest Contentful Paint: Largest Contentful Paint marks the time at which the largest text or image is painted.
- Time to Interactive: Time to interactive is the amount of time it takes for the page to become fully interactive.
- Total Blocking Time: Sum of all time periods between FCP and TTI, when task length exceeded 50ms (typically relating to JavaScript and customized experiences).
- Cumulative Layout Shift: Cumulative Layout Shift measures the movement of visible elements within the viewport.
Maintaining a top-tier website will be impossible without focusing time and effort on at least some of the ranking factors listed for each category. However, of these six categories, Largest Contentful Paint and Total Blocking Time carry the majority of the ranking weight, coming in at an estimated 50% combined of your overall score. While there are not currently any "easy" or reliable solutions for viewing a website’s speed in its entirety, this ability to narrow focus, and look at the strengths and weaknesses of a particular piece of the digital guest journey, will help web developers to piece together a plan that will optimize your site and bring about the most beneficial changes possible.
The Proactive Optimization Options
There have been plenty of attempts in mastering how to best serve information to mobile devices over the years. From a custom website mobile app, to completely separate websites that auto-load with an “m.” as a website prefix - not one has proven to necessarily outperform the other, or save on time and manpower. When looking at page speed optimizations through the lens of Google’s Core Web Vitals, however, two of the best speed upgrades available to the proactive website owner are adhering to strict Mobile Optimizations and AMP (Accelerated Mobile Pages). For the best approach, a mixture of both is usually the best course of action.
Mobile Optimization
When looking to perform mobile optimization, there are two avenues you’ll need to travel down. The first being your website as a whole will need to become responsive to different screen sizes and resolutions, adapting your content to show the same page to many different users in many different ways. The second is that each page within the website will need to be separately analyzed for potential speed-offending cuts or modifications.
The top 5 mobile optimization recommendations are:
- Adding breakpoints to Cascading Style Sheets. This will allow your website to adapt to different screen resolutions through the use of @media queries in your CSS, and stack your content in a way that best fits smaller screen sizes.
- Creating a mobile-friendly menu. This will prevent unfortunate breaks in the menu, potentially taking up much more of the screen than it otherwise would on a desktop.
- Compress images below 1MB before uploading. Images are one of the largest offenders when it comes to page speed. Compressing your images into smaller sizes before the upload through tools like Photoshop's “Save For Web” function will get files down to a much more easily digestible size for loading.
- Eliminate useless JavaScript and CSS wherever possible. Likely the top offender of page speed, and one of the easiest to control. Analyze each page and determine whether or not the CSS and JavaScript on the page are beneficial to the customer journey or if it can be eliminated.
- Reduce the number of modals or pop-up windows wherever possible. Removing a modal or pop-up from certain pages will increase the speed at which a page becomes interactive for the user, thus increase the speed.
Depending on the page that is needing a speed boost, mobile optimization could be your best bet without having to sacrifice your brand and the experience you provide your users as they navigate your website. That being said, a judgment call may need to be made as to where you’re willing to sacrifice your desired user experience as well as the brand imaging.
Accelerated Mobile Pages
Originally launched in 2015 as an open-source project between Twitter and Google, and designed for faster loading of News and Media websites, AMP has continually evolved into one of the top ways to bring about real change when it comes to improving the speed of your website. Essentially creating lightweight pages (in terms of code, not content) AMP allows internet servers to cache your webpages and deliver them to users at an average speed of four times faster than a typical webpage.
The faster load time notwithstanding, there are some decent downsides to adding AMP pages to your sitemap. You’ll likely be forced to sacrifice some of the desired look-and-feel on your website due to the current qualifying JavaScript size being restricted to 105KB or less. That is roughly half the size of a typical webpage script. You’ll also have to spend time building out AMP-specific templates since they’ll require their own custom code called AMP HTML, and you’ll likely lose access to monetization efforts on AMP pages due to code size restrictions as well.
While it is not always recommended to implement AMP pages site-wide (yet!), for example on your homepage, there are obviously benefits to adding AMP to portions of your sitemap. Certain page templates or even your blog page could benefit from this. The good news is, it’s getting easier every day. Depending on the CMS you’ve used to build out your website, you can utilize plugins such as the WordPress AMP Plugin or AMP for WP Plugin to update your site.
Did you enjoy the read?
Get original hospitality industry insights delivered to your inbox. Sign up to receive Screen Pilot’s #TrendingNow Newsletter.
With Google now rolling out their 2021 Core Algorithm update, never before will the mantra of “mobile-first” be more cemented into the minds of website owners, content creators, administrators, and developers.
The update will place an even greater emphasis on a user’s on-page experience by diving deep into Google's Core Web Vitals and the associated results for page speed.
In order to alleviate any future pain points that are likely to occur due to the algorithm modification, or at the very least lessen their effects, it is important to be proactive and take advantage of the existing knowledge now. Get to know the average speed of your web pages as they exist today. What are your strengths and weaknesses? Most importantly, learn how you can improve your user experience and enhance your page speed performance without sacrificing the overall quality of your website.
Finding Your Mark
As a general rule of thumb for website managers, the ideal page speed mark to shoot for is an average of 2-3 seconds. If a website takes any longer to load, the likelihood of a user converting into a qualified lead will be greatly diminished. A study by KISSmetrics has shown that an average of about 40% of users bounce from a website when it takes longer than 3 seconds to load. As part of the 2021 algorithm update, Google is placing a greater emphasis on page speed and their PageSpeed Insights software, which allows users to track in real-time key metrics pertaining to the speed of a specific page URL. The six key metrics that Google factors into page speed ranking are:
- First Contentful Paint: First Contentful Paint marks the time at which the first text or image is painted.
- Speed Index: Speed Index shows how quickly the contents of a page are visibly populated.
- Largest Contentful Paint: Largest Contentful Paint marks the time at which the largest text or image is painted.
- Time to Interactive: Time to interactive is the amount of time it takes for the page to become fully interactive.
- Total Blocking Time: Sum of all time periods between FCP and TTI, when task length exceeded 50ms (typically relating to JavaScript and customized experiences).
- Cumulative Layout Shift: Cumulative Layout Shift measures the movement of visible elements within the viewport.
Maintaining a top-tier website will be impossible without focusing time and effort on at least some of the ranking factors listed for each category. However, of these six categories, Largest Contentful Paint and Total Blocking Time carry the majority of the ranking weight, coming in at an estimated 50% combined of your overall score. While there are not currently any "easy" or reliable solutions for viewing a website’s speed in its entirety, this ability to narrow focus, and look at the strengths and weaknesses of a particular piece of the digital guest journey, will help web developers to piece together a plan that will optimize your site and bring about the most beneficial changes possible.
The Proactive Optimization Options
There have been plenty of attempts in mastering how to best serve information to mobile devices over the years. From a custom website mobile app, to completely separate websites that auto-load with an “m.” as a website prefix - not one has proven to necessarily outperform the other, or save on time and manpower. When looking at page speed optimizations through the lens of Google’s Core Web Vitals, however, two of the best speed upgrades available to the proactive website owner are adhering to strict Mobile Optimizations and AMP (Accelerated Mobile Pages). For the best approach, a mixture of both is usually the best course of action.
Mobile Optimization
When looking to perform mobile optimization, there are two avenues you’ll need to travel down. The first being your website as a whole will need to become responsive to different screen sizes and resolutions, adapting your content to show the same page to many different users in many different ways. The second is that each page within the website will need to be separately analyzed for potential speed-offending cuts or modifications.
The top 5 mobile optimization recommendations are:
- Adding breakpoints to Cascading Style Sheets. This will allow your website to adapt to different screen resolutions through the use of @media queries in your CSS, and stack your content in a way that best fits smaller screen sizes.
- Creating a mobile-friendly menu. This will prevent unfortunate breaks in the menu, potentially taking up much more of the screen than it otherwise would on a desktop.
- Compress images below 1MB before uploading. Images are one of the largest offenders when it comes to page speed. Compressing your images into smaller sizes before the upload through tools like Photoshop's “Save For Web” function will get files down to a much more easily digestible size for loading.
- Eliminate useless JavaScript and CSS wherever possible. Likely the top offender of page speed, and one of the easiest to control. Analyze each page and determine whether or not the CSS and JavaScript on the page are beneficial to the customer journey or if it can be eliminated.
- Reduce the number of modals or pop-up windows wherever possible. Removing a modal or pop-up from certain pages will increase the speed at which a page becomes interactive for the user, thus increase the speed.
Depending on the page that is needing a speed boost, mobile optimization could be your best bet without having to sacrifice your brand and the experience you provide your users as they navigate your website. That being said, a judgment call may need to be made as to where you’re willing to sacrifice your desired user experience as well as the brand imaging.
Accelerated Mobile Pages
Originally launched in 2015 as an open-source project between Twitter and Google, and designed for faster loading of News and Media websites, AMP has continually evolved into one of the top ways to bring about real change when it comes to improving the speed of your website. Essentially creating lightweight pages (in terms of code, not content) AMP allows internet servers to cache your webpages and deliver them to users at an average speed of four times faster than a typical webpage.
The faster load time notwithstanding, there are some decent downsides to adding AMP pages to your sitemap. You’ll likely be forced to sacrifice some of the desired look-and-feel on your website due to the current qualifying JavaScript size being restricted to 105KB or less. That is roughly half the size of a typical webpage script. You’ll also have to spend time building out AMP-specific templates since they’ll require their own custom code called AMP HTML, and you’ll likely lose access to monetization efforts on AMP pages due to code size restrictions as well.
While it is not always recommended to implement AMP pages site-wide (yet!), for example on your homepage, there are obviously benefits to adding AMP to portions of your sitemap. Certain page templates or even your blog page could benefit from this. The good news is, it’s getting easier every day. Depending on the CMS you’ve used to build out your website, you can utilize plugins such as the WordPress AMP Plugin or AMP for WP Plugin to update your site.
Did you enjoy the read?
Get original hospitality industry insights delivered to your inbox. Sign up to receive Screen Pilot’s #TrendingNow Newsletter.
