Optimizing your website’s page speed score and core vitals

I recently became interested in improving website performance after Google introduced its Core Web Vitals as a primary ranking factor. These metrics prioritize sites that load quickly and provide the best mobile experience. Here’s how you can optimize your website to achieve top performance.

Optimize Your Assets

A major factor in page speed is asset optimization, particularly images. Ensure that images are appropriately sized for their display dimensions—don’t use a 1000px-wide image and shrink it to 300px with CSS. That’s wasted bandwidth. Also, compress your images to reduce their file size significantly. I personally use Compressor.io, which offers a pro subscription that lets me batch compress up to 100 images at a time. It’s been a game-changer.

For background images, resize them based on device type. A 2300px-wide stock image isn’t necessary for a mobile screen that’s only 400px wide. Instead, resize it to 500px and compress it, reducing the file size from megabytes to kilobytes. Then, use larger images only when necessary, such as for tablets and desktops. A common mistake I’ve seen is websites loading multiple 4000px-wide background images, causing painfully slow load times.

For responsive images, use the srcset attribute. This allows you to define multiple image sizes so that the browser loads the appropriate one based on the user’s screen size. For instance, if you have a 700px-wide image on desktop, you can serve a 350px version for smaller screens. This improves load times without compromising quality.

Lastly, always specify width and height attributes for images. Google recommends this as it helps reserve space before the image loads, preventing layout shifts that affect user experience.

Implement Lazy Loading

Lazy loading ensures that images below the fold (those not immediately visible) only load when needed. Simply add loading="lazy" to your image tags. However, avoid lazy loading images that are visible when the page first loads, as this can cause content shifts and degrade user experience.

Minimize External Dependencies

Remove jQuery

jQuery was once essential, but modern JavaScript can handle most tasks natively, making jQuery unnecessary and bloated. Removing it improves security and speeds up your site. Google’s PageSpeed Insights often flags jQuery as a performance issue, so phasing it out is a smart move.

Eliminate Google Fonts CDN

Instead of linking Google Fonts in your HTML, download them and load them locally using @font-face. This removes an external request, improving page speed.

Example:

@font-face {
    font-family: "CustomFont";
    src: url("/fonts/CustomFont-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

By storing fonts in a local directory and referencing them in your CSS, you eliminate render-blocking delays and improve site performance.

Defer Non-Essential JavaScript

Add the defer attribute to your <script> tags to prevent JavaScript from delaying the rendering of your page. This ensures the HTML and CSS load first, making the page appear faster to users before scripts execute in the background.

Use SVGs Instead of PNGs

Wherever possible, replace PNGs with SVGs. SVGs are lightweight, scalable, and often significantly smaller than PNG files. I use Flaticon to source SVG graphics, which allows easy customization. Additionally, instead of relying on icon libraries like FontAwesome (which requires additional requests), use individual SVG icons for better performance.

If you work with clients, consider converting their logos to SVG format. This not only enhances their website’s efficiency but also provides them with a high-quality, scalable version for branding materials. You can find affordable SVG conversion services on Fiverr for under $30 per image, making it a worthwhile investment.

Check Performance with Google Lighthouse

Once you’ve made these optimizations, test your site using Google Lighthouse in Chrome DevTools. This tool provides detailed feedback on performance, accessibility, SEO, and best practices. Fixing flagged issues—such as missing aria-label attributes, alt tags, or contrast problems—can push your page speed score above 96 and ensure a well-optimized website.

Final Thoughts

These are the steps I follow for every website I optimize. This process ensures that pages load quickly, perform well on mobile, and rank higher in search results. If you’re looking for a clear, actionable guide without technical jargon, I hope this helps!