Written by Matt Birch on June 16, 2021

How to optimize website performance amid Google Page Experience update rollout

The Google Page Experience algorithm update was rolled out globally to users on Tuesday, and Core Web Vitals is no longer alone as the hot topic of discussion dominating headlines in the online media world.

Don’t expect any drastic or immediate changes, though. Page Experience is being rolled out slowly, according to Google, with the new algorithm set to be implemented in its entirety to all users by the end of August.

And while we obviously don’t have any actionable insights about the algorithm’s impact on ranking, it’s important to note there have been other updates in the past that drew a lot of hype early on, yet carried very little weight once the dust settled. The Medic Update (2018) has long been forgotten, as has Accelerated Mobile Pages (AMP), which Google will officially eliminate as a requirement for inclusion in Top Stories on Thursday.

It’s a polarizing topic, and while Page Experience’s effects on ranking are unclear, if you want to give your website the best chance of success in the future, or are already seeing minor changes in Search Engine Ranking Position (SERP), we’d advise optimizing for mobile–first and foremost.

What is the Google Page Experience algorithm update?


The Page Experience update is a set of signals that will become part of Google’s ranking algorithm. Its purpose is similar to other recent algorithm updates, as it's centered around optimizing the user experience.

Where it differs from past ones, however, is in its structure. It joins the long list of hundreds of other factors currently impacting ranking. But what differentiates Page Experience from other past algorithms is that it's object oriented. Each aspect of the new algorithm is essentially treated as its own object, rather than simply looking at keywords and information on a web page, as its predecessors were designed to do. Google has indicated the Page Experience ranking boost will serve as more of a tiebreaker for SERP, rather than a driving force.

The Page Experience algorithm is comprised of these five ranking signals:

  • Core Web Vitals
  • HTTPS (SSL certificate)
  • No intrusive interstitials (mobile pop-up)
  • Mobile-friendly (aka "Mobilegeddon")
  • Safe browsing
  •  

It’s unclear how much weight each signal will have, so it’s best to optimize for all five (displayed below). The two main themes they all share, however, is that they’re centered around being mobile responsive, and also delivering the best user experience possible. As such, any website optimization strategy should start in these areas, and then drill down to the more granular issues.

Google Page Experience Ranking Signals

What role will Core Web Vitals play in this update?

The three Core Web Vitals metrics are Cumulative Layout Shift (CLS), First Input Delay (FID) and Largest Contentful Paint (LCP). Each carries its own score, and will be handled individually as its own ranking signal by the Page Experience update.

It’s important to note that the CWV scores will essentially be viewed as the sum of their parts. Meaning that the individual metrics for any page that falls into the “good” range won't impact ranking by how high or low their score is. As long as each metric is in the “good” range, the impact of each individual score is essentially minimized.

As such, we shouldn’t obsess too much about the numerical value given to each of the three metrics, as long as the page is deemed to be "good" overall. There are many ranking signals included in this update, so until we have more data, and better understand the extent of CWV’s impact, it’s best to focus on optimizing for all of them, and providing the best user experience possible.

How the Page Experience update is impacting your website’s ranking, traffic


Arguments can be made for both sides in terms of Page Experience’s impact, as it’s clearly not going to have a seismic effect on the tech world as a whole, such as when Apple released the original iPhone roughly 14 years ago. However, connectivity trends show mobile use has continued to grow like wildfire since that time, and 6.378 million people now own a smartphone. Not much has changed for Apple, though, as the tech giant still holds the majority of the United States smartphone market share (chart via Counterpoint, using data from Mobile Devices Monitor).

Apple Smartphone Market Share Comparison

Designing a mobile-friendly website gives you the best chance of surviving this update, and also for maximizing growth potential, which is why we advocate focusing a lot of attention in that area.

Potential issues, challenges the algorithm update can create for your website

The most obvious area in which your website can be affected is its traffic, given that Google is implementing the Page Experience update as a ranking signal. Similarly, brand awareness and lead generation can also be negatively impacted.

If you’re attempting to rank (or already did rank) for a seed keyword – or any competitive keyword, for that matter – and you don’t measure up to your competitors, you could see a decline.

Long-tail keywords with less search volume may not see as much of a fluctuation. It depends on what sector your business operates in, and the demand. E-Commerce and service-based businesses in particular should pay close attention to keyword tracking and search positions, which SEO tools such as SEMrush, Ahrefs and Searchmetrics can help with.

How to diagnose technical issues using a website performance monitor such as Google PageSpeed Insights, Lighthouse


There are a number of tools to leverage to gauge how your website is performing, with Google’s Lighthouse and PageSpeed Insights being at the top of the list. We’re big fans of Lighthouse, which you can access in Chrome DevTools, as it tends to be more accurate than PSI. It can also help identify more technical issues dragging your website's performance down. It also does a great job of providing potential solutions to the problems it identifies. Lighthouse is a very popular tool among developers, and for good reason.
 

Google Lighthouse in Chrome DevTools Report

 

Both PSI and Lighthouse illustrate how your website measures up for Core Web Vitals (as you can see in the screenshots provided). And given that CWV is a signal included in the Page Experience update, we’d advocate starting there.
 
PageSpeed Insights Scores
 
SEO tools to monitor ranking, as well as website performance monitors to identify technical issues, are great starting points to identify where your website optimization process should begin.

We also advocate using a crawling tool, such as Screaming Frog, to do a site audit, from an SEO perspective. It will allow you to compare Googlebot Desktop to Googlebot Mobile. Screaming Frog also analyzes your URL structure and site architecture, to identify issues, so you can make the necessary fixes.

...Don’t forget about Google Search Console’s new Page Experience report

Any business owner, SEO, marketer and digital media professional already routinely monitors all the reports, data and analytics Google Search Console provides. And now Google has given us yet another reason to always keep a GSC tab open in our browser.

Google recently announced it has now included a Page Experience report in Search Console. You can see exactly what the report looks like via the screenshot below (which was recently posted).

Google Search Console Report Page Experience

What to do with all this data for Page Experience website optimization

These metrics are important, but with so many different factors involved in analyzing website performance, results can be quite fluid. It can be hard to gain actionable insights without a large sample size to pull from.

And while data is important, there may not be a huge difference between scoring an 82 and an 89 in one particular Core Web Vitals metric, as an example. So while you should use the scores as a starting point for optimization and fixing technical issues, it’s important not to obsess over the numbers.

Website performance metrics are only a piece of the puzzle in terms of how pages rank. Google has gone pretty far down the rabbit hole with mobile-first indexing. The signal was rolled out in its entirety earlier this year. It dictates that Google will use the mobile version of a website for indexing and ranking the majority of the time. If Googlebot Mobile is unsuccessful in its efforts to crawl the website, then yes, desktop can then be taken into consideration as well. But remember, if Googlebot Mobile isn't happy, then neither are users—the majority of whom are browsing on their smartphones.

If you’re improving your website's performance, potential leads and current customers will notice improvements in their experience while browsing. Focus on keeping users engaged and happy—as well as satisfying the intent of their search query.

What you can do following the algorithm update to improve your website’s performance


In looking at how Page Experience is structured, from a technical perspective, we advise beginning with optimizing for mobile.

Mobile use continues to grow like wildfire each year, and this trend isn’t slowing down anytime soon. It is, however, important to know your ideal customer, because some industries have a higher mobile usage rate than others. E-Commerce, hospitality and food service—all of which are currently thriving, with restrictions related to the pandemic recently having been lifted—are skewed heavily toward mobile users.

Furthermore, it’s important to point out that many people living in third-world countries don’t have access to computers, so browsing on mobile devices is their only option. Just look at how many users operated smartphones last year in Africa and the Middle East, compared to the rest of the world (graphic via Newzoo).

Mobile Global Use In Middle East, Africa

And as far as mobile optimization is concerned, page speed and user experience are still the most important areas to prioritize.

Users on mobile devices choose predominantly to browse websites while away from their home or office, "on the go," with limited time at their disposal. So costing them an additional second or two could result in them leaving your website quickly, negatively impacting both dwell time and bounce rate.

Mobile users simply don’t have time to wait for scripts to load. Or to experience a delay as they’re attempting to scroll down the page. Provide a seamless, quick and easy browsing experience for them, and it will pay dividends.

And while designing a mobile responsive website is extremely important, Page Experience isn’t just limited to one device. Here are some tips on how to optimize for all three.

Best practices, strategies to optimize for Page Experience mobile, tablet and desktop use

Image optimization, using size reduction and compression

Images make up approximately 50% of a page’s load on mobile devices, so remember that size and formats matter. Don’t make the common mistake of only using PNGs and JPGs, as WebPs and SVGs are much smaller in size, and therefore load quicker. If you can get away with a slight decrease in image quality, it’s worth using those two from a page load and user experience standpoint.

Also, crop, re-size and scale images down, with different sizes for each device, then compress them. Do this before uploading them. Generally, it works best to create horizontal graphics for desktop, and vertical ones for mobile. Adobe Photoshop works well for re-sizing. If on a budget, Affinity Designer provides excellent value for the price as well. Also, there are a number of different options to help with image compression. If you prefer to spend a bit more, and are amenable to being on a monthly plan, Smush and Imagify are excellent WordPress plugins that get the job done, quickly and easily. But if you’re looking for a cheaper option, Pym and EWWW Image Optimizer will suffice as well.

Lastly, it’s wise to use an image Content Delivery Network (CDN). This can both transform and deliver images quicker. Cloudflare, for example, excels at accomplishing both these goals.

Choose your web hosting company wisely


Shared hosting simply isn’t the way to go if you’re looking to optimize your website. These companies spend a ton of money on marketing and are commonly used by beginners, but they fall short on performance. Reputable managed hosting companies such as Kinsta and SiteGround are far better options, and they’ll also handle some of the hosting responsibilities for you. They’re viable choices for both beginners and intermediate users. Lastly, if you're an advanced user, hosting your website on a dedicated server, or via cloud hosting, can really boost your website's performance.

Try to limit any redirects whenever possible


There’s a time and a place for redirects, such as when you’ve changed domains, deleted a page or have merged websites. But aside from those scenarios, it’s best to avoid them. Otherwise, the user experience suffers greatly, and your website’s ranking could be affected.

Optimize JavaScript and CSS


There are a number of different strategies to optimize your website’s JavaScript code. One of the best ways to start is by eliminating render-blocking JavaScript and CSS with asynchronous loading, using Defer and Async tags. This will delay the loading of JavaScript and CSS until the visible elements on your page have already loaded—similar to lazy loading images.

Also, you can change the order of how elements are loaded. It’s best practice to have as little JS inside a website's sections as possible. This probably isn’t feasible for beginner or intermediate web designers. But there are some WordPress plugins, such as Asset CleanUp and WP Rocket, that do this extremely well.

(Disclaimer: Always test on a staging site before making any substantial changes such as these go live. These adjustments can break your website, so tread carefully.)

One final suggestion is to put less essential JavaScript (such as tracking pixels or Google Analytics code) in the footer, so the rest of the page can render first.

Leverage minification to minimize code and markup


The extra space and comments can be beneficial during the development phase, but once your site is live, they’re no longer necessary. Minifying the JavaScript, CSS and HTML files will increase site speed, but also improve accessibility. WP Rocket is great for this purpose. (The same disclaimer listed above, about testing on a staging site, applies here.)

If you’re getting “flashy,” use HTML5, not Adobe Flash


Flash was once great for integrating animations, games, vector graphics, sounds and more, but Adobe pulled the plug on updates, and now few browsers support its use. We advise against including any of these on your website, but if you must, roll with HTML5 instead.

Optimize website layout, styling, navigation


Design your website in a way that you believe delivers the best experience for users, not to be visually appealing in your mind. The less options, elements, menu tweaks, fonts, colors, etc., the better. If unsure about site layout, use Hotjar’s heat maps to understand how users navigate your site, to find that perfect balance. Split testing can help you diagnose and identify which elements you should use, and where they should be on the page, such as a call-to-action button, and what exactly is or isn’t displayed above the fold.

Utilize clean website structure to get indexed


Sitemaps allow search engines to expeditiously crawl through your website and (hopefully) index your content for search. Many SEO plugins such as Rank Math and Yoast SEO can create a sitemap for you, with the click of a button. Submit the sitemap using Google Search Console, and you’ll be all set.

Pay close attention to content organization


Group related content, and make sure it flows well on the page. Also, make sure to use headings to separate each group in a logical, numerical order, and to implement them correctly. Start with using an <h1> element for the page title, and then begin each section with an <h2>. From there, you'll drill down to <h3>, and the rest is up to you. Just make sure the heading elements are structured properly.

Avoid using pop-ups


This one is self-explanatory, especially if approaching from a user experience perspective. You don’t enjoy browsing websites that have pop-ups, and neither do users. Pop-ups negatively impact the user experience, and can also get you penalized by Google. If it doesn’t pertain to the brand, product or customers you serve, it can negatively affect your SEO. We avoid using them altogether, but if you feel you must include one on your website, for lead generation purposes, make it easy to close. And make sure it doesn’t impact your content layout.

 

Less is more for mobile, but you can still get creative while optimizing


Eliminating large images and certain elements that don’t render or display well on mobile devices is considered best practice. But try not to feel like you’re limited, from a creativity perspective. You can still display engaging elements on your pages to make your content visually appealing, like in this awesome mobile-responsive navigation mockup.

Mobile Responsive Navigation

 

Here are some ideas to make your mobile website's layout pop, in a way that engages users, in case you're feeling a bit handcuffed about it.

Mobile carousels can display images, GIFs and text in a clean, user-friendly way. Top navigation is also a great option. It enables the user to access the menu easily, while also providing the option to navigate the entire website efficiently. Lastly, accordions continue to grow in popularity, as they conserve space by making content collapsible. You’ve probably seen these implemented on FAQ pages.

Summary: What we’ve learned about how Page Experience update will impact ranking, and what we can do about it


It’s been well over a year since Google first alerted us about the Page Experience update, so we do know what ranking signals it’s comprised of. Google has also provided us with a general understanding of the algorithm's purpose.

However, what business owners, SEOs, marketers and digital media professionals around the world want to know is how it will impact ranking. And what the potential outcomes will be. These questions won’t be answered overnight, as it will require a lot of testing and sharing of knowledge to gain actionable insights about the update’s impact.

But if your website has been negatively impacted in any way: Don’t worry, you’re not alone. The good news is that we’re here to help with website optimization solutions.

In the meantime, here are the three most important takeaways from this blog post , as well as our two cents on how you can optimize your website for the Page Experience algorithm.

  • The Page Experience update, it appears, will look favorably upon websites that provide a seamless, enjoyable experience for users while browsing.
  • Having less elements and more white space on pages is not only a modern design principle, but also best practice from a technical standpoint.
  • Optimizing for mobile and making sure your website passes the Core Web Vitals assessment will give you a leg up on your competition, especially in the near future. Many websites are still behind the curve, as business owners generally don’t feel the need to make the updates necessary for optimization. Don’t make the same mistake.

Our thoughts on optimizing for Page Experience: Nothing trumps good content. Educate and provide value for users that browse your website. And, most importantly, include information that answers their question by being directly relevant to their search query. Focus on these key areas, and everything else will fall into place.

Article written by Matt Birch

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts