8 Steps to Achieve 100% Google Page Speed

Nothing ruins a great website more than a poor loading experience. In fact, Google has said that visitors who experience a load time of seven seconds are 113% more likely to bounce off a page. Page speed is so important to the user experience that Google began including it as one of its ranking factors in 2018. Now, even if you’re working hard on SEO strategies, a low page speed could allow another site – maybe even one of your competitors – to get ahead of you on a crucial search engine results page.

For those who want to gain insight on their loading times, Google offers a free PageSpeeds Insights tool which can score your page on a scale of zero to 100. Here’s a quick example of a report that PageSpeed Insights presents after you search “google.com”:

The report looks clean and simple. But if you aren’t the most tech-savvy person, it can be a little hard to comprehend what some of the report’s suggestions actually mean. Here’s an example of a report that has a long list of jargony comments:

While the jargon above might look intimidating, many of the PageSpeed Insights suggestions could actually be pretty simple to take on – even if you aren’t an web developer. To help you boost your user experience and address slow loading times, here’s an eight-step guide to achieving a 100% speed score. For each step, we’ll explain why it’s important, give you insight on how to do it, and let you know if a tech expert might need to get involved.

1. Determine if and where you’re lagging.

Many CMSs have built-in tools or plugin options that can help you figure out why your entire website or a particular page has a slow load time. Before you take any action on fixing your website’s load time, you should use one of these tools to gain a baseline understanding of where you currently stand. This will help you narrow down the actual steps you need to take to improve your website’s load time. Without this initial audit, you risk spending time optimizing elements that aren’t actually causing the bottleneck, leading to wasted resources and minimal performance gains.

Here are five free tools you can try:

• Google’s PageSpeed Insights
• Website Grader
• GTM Metrix
• KeyCDN Website Speed Test
• Pingdom

Google’s PageSpeed Insights, which we highlighted above, might be one of your best guides – especially if your goal is achieving a high Google page speed score specifically. Some of the other tools listed are also helpful because they can give you a quick rundown of other details related to your site speed. For example, KeyCDN will allow you to see how quickly your page loads in different countries. To get a solid understanding of where you currently stand, try using a few different tools and comparing the results. This triangulation method ensures you aren’t relying on a single data point, which might be skewed by temporary server spikes or local network issues. By cross-referencing multiple reports, you can identify consistent pain points that require immediate attention.

How to Interpret Your First Report

When you first run your site through these tools, focus on the “Opportunities” and “Diagnostics” sections rather than just the overall score. The score is a composite metric, but the specific recommendations tell you exactly what is dragging down your performance. Look for items marked as “Low Priority” versus “High Priority.” High-priority items usually involve render-blocking resources or unoptimized images, which have the most significant impact on the initial load time. Addressing these first will yield the quickest improvements in your user experience and search engine rankings.

2. Compress your images.

Large images are one of the most common causes of slow page speeds. There are many different opinions on what an optimal file size is. While some hosts say you should aim for files under 200KB, Shopify’s blog suggests going under 70KB. Google developers suggest going as small as you can before losing crispness. The key is to find the sweet spot where the visual quality remains acceptable to your audience, but the file size is significantly reduced. This balance is crucial because users are more forgiving of slightly lower resolution images than they are of waiting several seconds for a page to load.

To shrink your images without totally destroying the quality, we suggest compressing files with a free online software like Squoosh.app or Compress.io. You can also use Photoshop, too. Before you upload an image, use Photoshop or other editing software to crop or size to the exact resolution that it will appear to be on the site. Modern formats like WebP often provide superior compression compared to traditional JPEG or PNG files, offering smaller file sizes with comparable or better visual fidelity. If your CMS supports WebP, consider converting your existing library to this format for an immediate boost in performance.

Your display size is not the same as your file size. The display size is simply the size an image looks on your website. Your file size is the size of the actual image that you uploaded. If you have a large file and a small display size, the large file still takes the same time to load as it would if it had a giant display size. Oppositely, if you upload a small file and present it at a small display size, it will load quickly. A good rule of thumb is to crop the image to the exact display size it will show up on your page, then compress the image file to make it take up less storage space.

For example, if your CMS will automatically crop or resize an image to 500px by 300px, you should still crop it to that same exact size manually before you upload it. Even if you don’t see a giant image on the page, the large image file you uploaded could still be contributing to a major slowdown. This is because the browser must download the entire file before it can render the smaller version. By pre-sizing your images, you ensure that the browser only downloads the data it actually needs, reducing bandwidth usage and improving load times for all visitors.

Practical Image Optimization Checklist

• Audit Existing Images: Use a plugin or tool to identify images that are larger than necessary for their display dimensions.
• Choose the Right Format: Use WebP for photos and complex graphics, and SVG for simple icons and logos.
• Compress Before Upload: Run all images through a compression tool before adding them to your CMS.
• Set Explicit Dimensions: Ensure your HTML or CMS settings define the width and height of images to prevent layout shifts.

3. Shrink, or minify, your code HTML, CSS, and JavaScript code.

CSS, HTML, and JavaScript can contain a lot of extra, redundant, or completely useless code. Similarly to images, that data can slow your page. To avoid this, Google developers suggest “minifying” your code. Minifying shrinks your code by removing useless language, notes, and spaces that might have gotten left behind when a page was being created or updated. This process strips out whitespace, comments, and unnecessary characters that are helpful for developers during coding but irrelevant to the browser’s rendering engine.

Why Minification Matters

While the reduction in file size from minification might seem small for individual files, the cumulative effect across an entire website can be substantial. A typical webpage might load dozens of CSS and JavaScript files. If each file is reduced by even 20-30% in size, the total data transferred to the user’s device decreases significantly. This not only speeds up the download time but also reduces the amount of data the browser needs to parse and execute, leading to faster interactivity and a smoother user experience. Many modern CMS platforms and hosting providers offer built-in minification features, so check your settings before reaching for third-party plugins.

4. Eliminate render-blocking elements.

Sometimes, a page will be coded to load less important elements, like a sidebar or banner, before the main content. You want to prioritize your code so your main content comes first above the fold. Once you know where these elements are, you can use this quick guide to learn how to eliminate them. Render-blocking resources prevent the browser from displaying any part of the page until they are fully downloaded and executed. This means that even if your text content is ready to show, the user sees a blank screen until the blocking scripts or stylesheets are processed.

Strategies for Deferring Non-Critical Code

One effective strategy is to defer the loading of non-critical JavaScript. By adding the defer attribute to your script tags, you tell the browser to download the script in the background but not execute it until the HTML parsing is complete. This allows the main content to render immediately, improving the perceived load time. Similarly, you can inline critical CSS—the styles needed for the above-the-fold content—and load the rest of the stylesheet asynchronously. This approach ensures that the most visually important parts of your page appear as quickly as possible, keeping users engaged while the rest of the page finishes loading in the background.

5. Accelerate your mobile speed.

In 2018, 60% of Google searches were done on mobile devices. Along with rewarding mobile-optimized sites in its search result rankings, Google will also give you a higher page speed score – and possibly a higher ranking – if your mobile site loads quickly. PageSpeed Insights can show you how your mobile site is scoring. After you search your URL and see the report, you can toggle between Desktop and Mobile tabs to see the individual scores for each format. Mobile networks are often slower and less stable than desktop connections, making optimization even more critical for this audience.

If you’re lagging, try to streamline what the visitor views on the mobile site. Hide or minimize desktop site elements, like photos or extra text boxes, that might seem clunky or unnecessary on the small screen. Services like AMP (which stands for Accelerated Mobile Pages) can guide you through creating simplified web pages that load quickly and auto-adjust to fit on different browser sizes or devices. Additionally, consider implementing responsive images using the srcset attribute, which allows the browser to choose the most appropriate image size based on the device’s screen resolution and connection speed. This prevents mobile users from downloading large, high-resolution images intended for desktop monitors.

Mobile-Specific Optimization Tips

• Enable Touch Optimization: Ensure buttons and links are large enough to be tapped easily, reducing user frustration.
• Reduce JavaScript Execution Time: Mobile processors are less powerful than desktop CPUs, so heavy scripts can cause significant lag.
• Test on Real Devices: While emulators are useful, testing on actual mobile devices can reveal issues that simulation tools might miss.

6. Avoid or minimize page redirects.

A redirect is when a visitor clicks or types one link and is then automatically directed to one or more different locations before they hit their desired webpage. Because this can take valuable time away from your page speed, you should only use redirects when absolutely necessary. An example of this could be during a company or website rebrand. In that case, this post touches on how to create SEO-friendly 301 redirects. Each redirect introduces an additional HTTP request-response cycle, adding latency to the loading process. A chain of redirects (e.g., A redirects to B, which redirects to C) is particularly harmful, as each step compounds the delay.

Best Practices for Managing Redirects

Regularly audit your website for redirect chains and loops. Use tools like Screaming Frog or Ahrefs to identify any URLs that are redirecting multiple times. Consolidate these chains so that the original URL points directly to the final destination. Additionally, ensure that your canonical tags are set correctly to avoid duplicate content issues that might inadvertently trigger redirects. By keeping your redirect structure simple and direct, you minimize the overhead and ensure that users reach their intended destination with minimal delay.

7. Improve your server response times.

Google suggests having a server response time of under 200 milliseconds. A slow server can be caused by a number of different things, including your website host. Addressing a lagging server can get a bit more technical than the last few steps. This guide to combating a 502 Gateway error has a few useful tips about diagnosing and resolving server-related issues. If your website uses servers from a host company, like GoDaddy, contacting a knowledgeable representative might also help you determine and solve the problem. Server response time, or Time to First Byte (TTFB), is the time it takes for the server to respond to a request from the browser. A high TTFB indicates that the server is struggling to process requests, which can be due to high traffic, inefficient code, or inadequate server resources.

Diagnosing Server Bottlenecks

To improve server response times, start by checking your hosting plan. Shared hosting plans often suffer from resource contention, where other websites on the same server consume bandwidth and processing power. Upgrading to a VPS or dedicated hosting plan can provide more consistent performance. Additionally, implement server-side caching solutions like Redis or Memcached to store frequently accessed data in memory, reducing the need to query the database for every request. Optimizing your database queries and indexing can also significantly reduce the time it takes for the server to generate dynamic content.

8. Use a content delivery network.

A content delivery network (CDN) is a group of globally distributed servers that can store a browser cache of your website and load it quickly for visitors around the world. When someone from a far geographical place visits your website, pages will be loaded from nearby CDN servers close to the visitor, instead of your own server. Why would you use this? Because visitors who are far away from your server might incur longer page load times. For instance, if your servers are based in California, a German web visitor would see a slower website speed than someone in a nearby place, like Seattle.

Because of their global locations CDN servers prevent this issue and will boost site speed for international visitors. If you’ve built your site with a CMS, like HubSpot, it might already run on a CDN. GoDaddy and Squarespace are other examples of content management software that offer a CDN service. WordPress users can also set up a number of free plugins, like CDN Enabler. If you don’t think you have a CDN, a few CDN providers include Amazon CloudFront, Cloudflare, and the AT&T Content Delivery Network. Next time you look at your Google PageSpeed Insights report, keep this list of steps handy. These tips will guide you through how to quickly minimize and streamline your pages as you aim for that perfect 100% score.

The Global Advantage of CDNs

Beyond just reducing latency, CDNs also provide an additional layer of security and reliability. They can absorb traffic spikes during high-traffic events, preventing your origin server from becoming overwhelmed. Many CDNs also offer DDoS protection and SSL/TLS encryption offloading, which further enhances the security and performance of your website. By distributing your content across multiple geographic locations, you ensure that your site remains accessible and fast, regardless of where your users are located. This global reach is essential for businesses with an international audience, as it provides a consistent and high-quality user experience across all regions.