Performance Optimization: A Necessity for User Experience and SEO
Did you know that part of your Google page rank is not only your content and keyword management but also ensuring that your website performance is on par?
Google and other search engines love fast websites. Users love fast websites, too.
When the loading time of website pages increases, visitors get bored or frustrated with waiting and abandon their site visit – this is called a “bounce.”
Source: Digital.com
Research by Digital.com indicates that 53% of mobile users abandon websites that take longer than 3 seconds to load. The numbers in the infographic above clearly show that a site’s performance in terms of load time is crucial for user engagement and satisfaction.
Page Speed Counts!
Site Speed is a ranking factor. Websites that load quickly tend to rank higher in search results. In contrast, slow-loading sites can lead to high bounce rates, sending a message to search engines that users aren’t finding the content useful or relevant, which can negatively impact website SEO rankings. One of the other biggest factors determining organic page rank is providing site visitors with meaningful, relevant content, and even if present, the technical slow delivery may make all the efforts to write excellent copy irrelevant.
At this time, Google has three (3) Core Web Vitals related to:
Loading performance, measured by largest contentful paint (LCP)
Interactivity, measured by first input delay (FID) [Interaction to Next Paint or INP is sometimes displayed]
Visual stability, measured by cumulative layout shift (CLS)
What does this mean? Even with a visually stunning website that presents your brand design and meaningful content, your page rank will be impacted if your website doesn’t measure up to the above Core Web Vitals.
Key Metrics to Understand – some are Google Core Web Vitals (above)
Time to First Byte (TTFB) metric measures the time from the user making an HTTP request to the first byte of the page being received by the client’s browser. TTFB is a key indicator of the responsiveness of your web server or hosting provider.
First Contentful Paint (FCP) measures the time from the navigation or page-load to the point when the browser renders the first bit of content from the DOM (Document Object Model). This could be text, an image, or even a canvas render. It provides an idea of how long users wait to start consuming page content.
Largest Contentful Paint (LCP)marks the point in the page load timeline when the largest image or text block visible within the viewport is rendered. This metric is important because it tells you when the page’s main content has finished rendering on the screen.
Cumulative Layout Shift (CLS) is a metric that measures visual stability on a webpage. It quantifies how much unexpected layout shifting of visible elements occurs on the page.
Time to Interactive(TTI) metric measures the time it takes for a page to become fully interactive, meaning that the page displays useful content, event handlers are registered for most visible page elements, and the page responds to user interactions within 50 milliseconds.
Total Blocking Time (TBT) quantifies the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The metric is the total sum of all blocking time between First Contentful Paint and Time to Interactive.
Speed Index metric measures how quickly the content of a page is visibly populated. It is expressed in milliseconds and correlates with the perceived loading speed of the page. The lower the Speed Index, the better.
Search algorithms look at many factors and signals, including the words of your query, relevance and usability of pages, expertise of sources, and your location and settings. The weight applied to each factor varies depending on the nature of your query.
Through both internal studies and industry research, users show they prefer sites with a great page experience. In recent years, Search has added a variety of user experience criteria, such as how quickly pages load and mobile-friendliness, as factors for ranking results. Earlier this month, the Chrome team announced Core Web Vitals, a set of metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web.
Today, we’re building on this work and providing an early look at an upcoming Search ranking change that incorporates these page experience metrics. We will introduce a new signal that combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user’s experience on a web page.
Performance Optimization: How does Sullivan Solutions deal with it?
Performance optimization is baked into our design and development processes if Sullivan Solutions builds a brand-new or redesigned website. However, for any clients we acquire with a WordPress website we did not create and are engaged for ongoing maintenance, our initial steps are to conduct an extensive corrective audit (if needed); we can then implement the optimization components required to improve Core Web Vitals and overall user experience.
WordPress Maintenance is not a one-and-done process, nor is the need for ongoing performance optimization as part of perpetual care. As a site evolves, its content, technical foundation, and what lies under the hood (Host settings, WordPress core, Themes, and Plugins), change. Following are some of the components included in performance optimization where we typically use Imagify, WP Rocket, and generate reports with PageSpeed Insights (PSI) and GTMetrix:
Image Optimization: Resizing and compressing
Script Loading Control (minify and optimize CSS delivery & minify, defer, and delay JavaScript)
There’s a big difference in the size and resolution of images used for print (usually 300 dpi) versus digital applications (≤ 72 dpi) such as a website. If speed is necessary to improve user experience (faster site loading), the original image taken with a camera may have enormous dimensions (pixels width x height) equivalent to what is needed for displays on monitors of varying sizes and mobile devices. We usually use a plugin called “Imagify” to set a maximum pixel dimension and if we want to use lossy or lossless image compression. Lossy compression is the fastest download but might produce a slightly fuzzy image. We typically use lossless compression to achieve a balance so the quality remains high while accomplishing the fastest reasonable download speed.
WebP images can be served, if available, to compatible browsers. What is that?
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.
Fortunately, it is not necessary to create a WebP image initially. Still, we can use add-on tools when optimizing images on a website to “convert” existing JPG and PNG images to this format. Not all browsers or devices will use WebP, so it’s a situation where providing the browser and device the option to use it, if available, speeds up download speed. We use a tool called Imagify because it has lots of options we like, but it is also fully compatible with WP Rocket and there’s a smart recognition of the existence of Imagify-generated WebP images in the WP Rocket settings. When we do ask Imagify to convert images to WebP, all our original images are safely saved automatically, and when WebP isn’t compatible for use in a browser or device, it will use the original optimized jpg or png image.
Other alternatives to Imagify that have similar functionality are EWWW and ShortPixel. However, we prefer Imagify because of its seamless integration with WP Rocket, the plugin we prefer for most of the following.
2) Script Loading Control
Minify and optimize CSS delivery
Minify, defer and delay JavaScript
Depending upon the hosting used, there are options to combine CSS or JavaScript, but these are not recommended when a site host enables what is called http2.
Fast load times also depend on how many files are uploaded to a website
With the WP Rocket plugin, we can minify (and combine in non-http2) a website’s CSS and JS files, optimize CSS delivery, and load JS deferred.
More importantly, we can also delay the execution of JavaScript files until user interaction to reduce initial load time. Delaying JavaScript files will directly impact two Core Web Vitals metrics: Largest Contentful Paint (LCP – measures loading performance) and First Input Delay (FID – measures interactivity).
3) Cache-Control
A site cache, also known as page cache, temporarily stores website data (such as images, webpages, files, and similar multimedia) the first time a web page is loaded. So whenever a user revisits your website, saved elements are quickly retrieved and displayed to them.
Caching site pages creates static HTML files—making them readily available for future visitors.
Browser caching is also enabled, and the browser stores commonly used but rarely updated files in its local cache memory.
Page Caching = Get your WordPress site cached right away. Caching makes your site load ultra-fast, which is the key to boosting your SEO and increasing conversions.
GZIP = Compress web pages on the server and decompress them in the browser; GZIP is a special file format and software application used for file compression and decompression. Enabling this module at the server level is required, but it’s worth the minimal effort as the size of website files decreases and visitors get site content quicker.
With eCommerce applications such as WooCommerce, some pages we do not want to cache are those that need to include dynamic/live information. For example, we want to exclude caching on critical pages like the “Cart,” “Checkout,” and “My Account.” Caching those pages would likely prevent updates to a cart from displaying correctly and frustrate the customer.
4) Loading site images only when needed
When considering a website page, the most critical content is typically in the top section, also known as “above-the-fold.” When we scroll down the page, that additional content is meaningful but considered “below the fold.” The below-the-fold content does not need to load immediately with the topmost section.
With a cache control plugin like WP Rocket, we can include options to control the display of images and iframes on the site.
LazyLoad defers the loading of images or iframes, leaving them ”off-screen” until the users need them. Lazy loading is a brilliant way of optimizing both perceived and real performance. It also saves users bandwidth because they won’t have to download all your images! This will also lower your CPU bandwidth usage at the server level.
5) Cache Preloading
Cache preloading ensures website visitors immediately get a site’s speedier, cached versions.
With WP Rocket, preloading happens quickly after the site clears its cache of posts/pages/custom post types. It’s a cyclical process that is typically automatic.
A sitemap-based cache preloading option automatically detects and preloads the sitemaps generated by popular WordPress SEO plugins such as Yoast SEO (free or premium), which we use on all sites.
6) Prefetch DNS Requests
Ironically, when we audit potential client sites in PageSpeed Insights or GTMetrix, a site often receives a poor performance result because actual Google scripts such as Google Fonts, Recaptcha, Analytics, Tag Manager, and others are slow. Google penalizes the site speed for its slow scripts. Prefetching is also handy for social media or other third-party services.
When your site loads any content hosted on a domain besides yours, your visitor’s browser has to retrieve the file(s) from that other domain. Part of that process is the browser connecting to the domain, which is called DNS resolution. DNS prefetching tells the browser to perform this connection before the file is needed, so that it’s already complete by the time the file is requested.
How do we know that we’re hitting performance goals?
We have numerous tools that provide valuable feedback, including external tests and those enabled within the WordPress dashboard.
Google PageSpeed Insights (PSI)
GTMetrix
Pingdom (SolarWinds)
1) PageSpeed Insights (PSI)
Google’s PageSpeed Insights (PSI) is a free tool that analyzes the performance of your webpages on mobile and desktop devices. And offers valuable metrics (known as the Core Web Vitals) to assess the quality of the user experience.
The tool gives you a score between 0 and 100. A higher score usually means your page is optimized for speed and efficiency.
PSI uses Lighthouse (an open-source, automated tool) to analyze webpages’ performance and quality. And provides a performance report with improvement suggestions based on two types of data:
Lab data: This is data collected by Lighthouse in a controlled environment. It helps you debug issues by simulating how your site loads but might not show real-world user experience issues.
Field data: This is real-world user experience data gathered from actual users as they interact with your site. It provides a realistic view of the user experience but includes fewer metrics.
While scored in the 0 to 100 range, there are breakpoint ranges and separate scores for mobile and desktop use. A score of ≥ 90 is excellent, and those in the 50-89 indicate needed improvements, with < 50 poor. Scores are provided only for the page URL provided. Technically, it would be necessary to test multiple pages to ensure the overall PSI is relatively consistent. Testing multiple pages is a good barometer.
While Google doesn’t use the PSI score in its ranking, it does use page speed as a ranking factor.
2) GTmetrix
GTmetrix breaks down your page performance in an easy to read, summarized report. We use a premium GTmetrix account to get more detailed results, including a detailed page performance assessment with Lighthouse metrics and audits. Web Vitals (LCP, TBT, CLS).
The reports not only provide a score but also provide detailed feedback if there are issues. Granular performance optimization is complex and will vary by website.
In 2020, GTmetrix revamped its performance test algorithm to embrace Google Lighthouse’s metrics. Lighthouse has become the industry standard for performance measurement and encompasses a broader scope of modern web best practices.
Google uses Lighthouse for its PageSpeed Insights tool. Thus, by aligning GTmetrix with Lighthouse, users can better understand how their site might perform in Google’s search rankings. Lighthouse is better suited to handle modern web technologies and offers a more holistic view of a website’s performance, including metrics related to mobile devices and progressive web apps.
GTmetrix features and capabilities overview.
After shifting to Lighthouse, GTmetrix provides a more accurate, comprehensive, and up-to-date website performance analysis. It aligns with the tools and metrics that most matter to today’s web development and digital marketing professionals.
It’s important to realize that, as with PSI, GTmetrix analyzes one page at a time, not aggregating the entire site. Therefore, we spotcheck several pages — especially those beyond the home page that might include special functionality.
The key features of a GTmetrix report on a specific page URL include:
Performance Analysis: GTmetrix provides an in-depth evaluation of your website’s load speed using key Google Lighthouse metrics, including Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), Time to Interactive (TTI), and Speed Index.
Structured Reports: GTmetrix generates detailed reports highlighting the areas of your website that are well-optimized and those that need improvement. This makes it easier to prioritize and address the most impactful issues.
Page Performance Insights: Beyond providing scores, GTmetrix offers actionable recommendations to help improve your website’s performance. These insights can guide your optimization efforts and lead to tangible improvements.
Historical Tracking: GTmetrix allows you to track your website’s performance over time. This can help you understand the impact of changes you make and identify trends or recurring issues.
Waterfall Chart: This visual representation of your website’s load behavior can help you pinpoint specific bottlenecks or problematic elements slowing down your site. This chart is especially helpful in determining what we might need to add to a Prefetch request.
Video Playback: GTmetrix can record a video of a site page loading, allowing you to see what your users see. This can help identify any visual issues that may not be captured by performance metrics alone.
It is a well-optimized website, but minor tweaks could still be made. Overall, the website loads quickly.
80-89% (B)
The website is reasonably optimized and should load relatively quickly. Some areas could improve.
70-79% (C)
The website’s optimization is mediocre to average. Several aspects could be improved to speed up load time.
60-69% (D)
The website is poorly optimized; there are significant areas that need to be addressed to improve load time
0-59% (E-F)
The website is very badly optimized and predicted to load very slowly. Significant improvements need to be made.
3) Pingdom
Pingdom is a global performance and availability monitoring solution for websites, applications, and servers. As a whole, this is a premium subscription service. However, they do provide a free Speed Test, which is often a handy tool for comparison if we encounter any website problems we cannot fully discern using PSI or GTmetrix.
Sullivan Solutions’ developer Deb Clark has over 31 years of website development experience and 17 years specific to advanced WordPress. She has maintained all Sullivan Solutions’ client websites with active maintenance plans for over ten years. In this time, no Sullivan Solutions client site has been hacked. She has been sought after to successfully clean up major hacks in the past by businesses who were not clients before the hack including a major university research facility.
