Anthony personalized his template by adding high-resolution images and several custom fonts. These changes caused his website to load super slowly. He also embedded multiple videos on the homepage, further impacting the speed. He needed a way to optimize his site without losing his personal touches.
The GrumpyHare PageSpeed team stepped in to resolve this for Anthony, so he doesn’t need to worry about the technical stuff. We improved the load speed of his website, www.webuyhousesinaugusta.com, from 8.6 seconds with a PageSpeed score of 52% to 1.2 seconds with a score of 97%. The improvements involved optimizing file sizes, media, and loading priority, as well as optimizing the website for Google’s Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Minified CSS, JavaScript, and HTML: Removed unnecessary characters, such as spaces and comments, to reduce file sizes.
Enabled Compression: Used Gzip or Brotli compression to reduce the size of files sent from the server to the browser.
Optimized Images: Used tools to compress images without losing quality and converted images to next-gen formats like WebP.
Reduced Redirects: Limited the number of redirects to lower additional HTTP requests and improve load times.
Removed Unused Code: Cleaned up CSS and JavaScript by removing any code that wasn’t being used on the page.
Lazy Loaded Images and Videos: Delayed the loading of images and videos until they were needed to improve initial load times.
Used Responsive Images: Served different image sizes based on the user’s device to ensure that the best size was delivered.
Used Content Delivery Networks (CDNs): Distributed content across multiple servers to reduce the distance between the server and the user.
Prioritized Critical Resources: Ensured critical resources loaded first by using preload, prefetch, or async attributes.
Optimized Server Response Times: Improved server response times by using faster hosting, optimizing the database, and reducing resource usage.
Used a Fast Web Hosting Service: At GrumpyHare, we offer a reliable hosting server with good performance and uptime.
Optimized CSS: Removed render-blocking CSS and only loaded the CSS needed for above-the-fold content.
Improved Resource Load Times: Used a CDN, compressed files, and optimized images to reduce the time it took for resources to load.
Minimized JavaScript Execution: Split long tasks, deferred unused JavaScript, and used web workers for heavy computations.
Optimized Third-Party Scripts: Reduced the impact of third-party code by only loading necessary scripts and deferring the rest.
Used Browser Caching: Stored resource files in the browser cache to reduce load times on repeat visits.
Reduced Main-Thread Work: Limited the amount of JavaScript executed during initial page load to ensure the main thread was available for user interactions.
Set Size Attributes for Media: Always include width and height attributes on images and video elements to prevent layout shifts as they are loaded.
Reserved Space for Ads and Embeds: Allocated fixed dimensions for ads, embeds, and iframes to prevent them from causing layout shifts.
Used CSS for Animations: Avoided animations that triggered layout changes and used CSS transform and opacity properties instead.
Avoided Injecting Content Above Existing Content: Ensured any new content added to the page did not shift existing content down.
These strategies were implemented to improve the website’s performance, enhance user experience, and achieve better scores in Google’s Core Web Vitals.
