Digital Innovation Digital Publishing
7 mins read

Google PageSpeed Insights: How publishers can increase their website speeds, and enhance user experience

Getting your Trinity Audio player ready...

Google has recently begun measuring page speed and experience on a pass/fail basis, as a factor in search ranking.

Page loading speed is a major factor considered by Google for search result ranking. Google has been increasing their focus on the overall visitor experience, and created Google Core Web Vitals to track page loading speed, page layout stability, and how quickly a user can start engaging with a page. Google has recently begun measuring page speed and experience on a pass/fail basis, as a factor in search ranking.

Publishers in particular can be negatively affected by Google’s new page speed scoring approach, since ads, header bidding, targeting and adtech tools can further affect the overall page experience and speed. Your Google PageSpeed Insights are inherently connected to your reach. If your page loads slowly, the news will move on — and leave you behind.

Google PageSpeed Insights and Core Web Vitals Score

Google developed the PageSpeed Insights tool to analyze a site’s content and loading speed, score a site’s performance, and provide information to help publishers make site speed improvements. Google uses a tool called Lighthouse to score your site from 1 to 100 separately for the desktop and mobile versions, with 90+ being a good score.

Originally PageSpeed Insights was mostly focused on loading speed factors, but recently Google shifted to focus on the overall site experience. Google states: “Optimizing for quality of user experience is key to the long-term success of any site on the web.”

They crafted Google Core Web Vitals (CWV), which focuses on three metrics of user experience: page stability, content loading speed, and page engagement speed. 

SEO specialists believe that only the Google field data is used for search ranking, and that quality content still plays a big role in ranking factors.

What are Google’s Core Web Vitals metrics? 

Google’s Core Web Vitals are three metrics that evaluate page stability, page loading speed, and how quickly the page responds to user interaction. Core Web Vitals are measured and reported for both the desktop and mobile experience, and are accessible from within Google Search Console, as well as on their developer PageSpeed Insights page. Anyone that wants to measure their own site, or any site, can enter the page url and view the report.

CoreWebVitals_Scoring
  • Largest Contentful Paint (LCP) – This rating  refers to how quickly the page can load the main content for the page. LCP of 2.5 seconds or less is a good score.
  • First Input Delay (FID) – This rating measures how long it takes a webpage to react to an action that a user takes. The timer for this measurement starts when there is something visual on the page for a user to react to, and ends when the page is able to respond to that visitors action. If the page cannot respond to the user because it is responding to many other scripts it is loading first, then the FID score will suffer. For a pass score, FID of 100 milliseconds or less is a good score.
  • Cumulative Layout Shift (CLS) – CLS measures visual stability of the page and layout. If you tab down, do things move around? Do you have ads, images or page elements that load later, and cause the page layout to shift? This results in a poor CLS score. CLS rating of 0.1 or less is a good score.

This video example by Google’s dev group illustrates the CLS problem. A user is trying to decline the purchase, but the layout shifts on him while clicking and he accidentally clicks purchase, resulting in a very unhappy experience.

Google’s guidance to publishers doing their own page speed audit:  “consider a page passing if it meets the recommended targets at the 75th percentile for all of the above three metrics.” 

Page loading speed and core web vitals metrics have been integrated into Chrome’s developer tool, available from within the Chrome browser. Chrome developer mode will even take a snapshot of the page throughout the loading process, to help pinpoint precisely where issues occur.

Chrome-Developer-mode-page-loading-speed

How Can Publishers Improve Page Loading Speed and Core Web Vitals?

Publishers should regularly do at least the following three steps to improve site performance: First, regularly run page speed and interaction tests and review the reports; secondly, identify which elements are loaded that are unused or unnecessary, such as old fonts or css scripts. Third, make note of images, CSS, video and JavaScript which can all be optimized for size and load speed via compression, minification, or concatenation.

Below are additional steps and resources for publishers to improve site loading times, core web vitals, and the visitor experience.

Implement Lazy Loading to Improve FID Web Vital

Lazy loading defers the loading of images or other elements until after the primary page content and layout is loaded and usable. This can improve bandwidth and FID metric. Think about images and elements that are never going to appear above the fold, those elements could be deferred to make sure that the initial experience is fast and interactive.

Wordstream offers a good article on when and how to implement lazy loading, but you may want to check with specific communities built around your CMS system. Hubspot has lazy loading built in to some of their functions, and there are a bevy of WordPress plugins for lazy loading automation.

Leveraging a Content Delivery Network CDN

Leverage a CDN and make sure it is properly configured for performance. A Content Delivery Network (CDN) can reduce bandwidth and page loading times by hosting copies of your media geographically closer to users. For example, a visitor in Canada could have your content delivered by a CDN server in Toronto, while a simultaneous visitor India could have content delivered from Chennai, all optimally managed by the CDN.

Compress Images and Videos for Faster Page Loading

Large media files are one of the most comment culprits in slow page load times, and one of the easiest to address. You should rank all of the images on your site by size, and pay attention to those 100k or larger immediately. You can spider your site with a tool like Screaming Frog to identify all of the large images in minutes. WordPress and modern CMS systems often have image compression tools built in, but verify yourself. Sometimes you can do much better with 3rd party tools built specifically for image compression, such as tinypng or jpeg-optimizer.

Remove Unused JavaScript Files to Improve Page Render Speed

Does your web page have JavaScript bloat? If the JavaScript is render blocking, it needs to be called, downloaded, parsed evaluated and executed before the page can finish rendering. Do you have unused JavaScript files? JavaScript files can pile up for targeting, CMS systems, setting tracking pixels, social tags, loading fonts,  and more. You can identify how much of your JavaScript goes unused in detail by using the Coverage feature in Chrome DevTools.

When running the Google page speed tool, it will identify any JavaScript with more than 20 kilobytes of unused code.

remove-unused-javascript-pagespeed

Combine or Minify CSS and Scripts to Improve Page Speed

Minifying these scripts retains their machine readability but makes them load much faster. There are several tools available to minify scripts; RankRed has put together a good assortment of script minification tools and descriptions. You can also save some trips to the server if you concatenate JavaScript or CSS files.

Optimizing Cache for Core Web Vitals

Cache strategy should be reviewed for the type of site you have, across cache PI functions such as Cache-control and Last-Modified. Google developers provide some guidance and a checklist for cache options, as well as configuration options for popular servers. You  may want to pre-load cache so that the page is already optimized before Googlebot arrives to evaluate performance. 

WP tool maker WP Rocket suggests preloading cache can be a key help for improving page speed, and created this video to explain.

Help Browsers Allocate Space to Avoid Layout Shift

  • Specify image height and width attributes so the browser can plan for their real estate, even if they are lazy loading later.
  • Reserve space for ads, iframes, and dynamic content. Use containers to help avoid layout shifts at render time.
  • Consider optimizing font display with link rel=”preload” and font-display: optional.

Run Analytics

Running a frequent PageSpeed test can give you more insights into your core web vitals. Not only can you see a page speed score, but you can see how many elements are being loaded and how quickly they’re loading. Dive into your reports to identify the elements that could be holding your page speed back. Here are a few popular tools for viewing different levels of detail and reporting on page loading, page speed, and optimizing for search engines:

Here are some recommendations for more technical and detailed discussions of page speed optimization:

Replace Multiple Point Solutions with Speed-Optimized Visitor Relationship Management

By using Admiral’s one-tag install, and horizontal Visitor Relationship Management (VRM) platform, publishers have one speed-optimized tag for the entire visitor journey, a single vendor relationship to manage, low-code/no-code deployment, a consistent user experience across engagements, and Admiral’s AI running in the background to optimize the visitor journey to drive revenue. This results in one small, speed-optimized tag vs many conflicting, redundant tags, and a leaner, more effective web page.

Michael Yeon
VP Marketing, Admiral

By Admiral
Admiral helps digital publishers grow visitor relationships via adblock recovery, per-site subscriptions, multi-site subscriptions, email subscriptions, social subscriptions, privacy consent and more, powered by Admiral’s one-tag, one-vendor, one visitor experience Visitor Relationship Management (VRM) platform.