PageSpeed Insights Optimization – Implementation Summary

Overview

To improve the website’s performance, accessibility, and SEO scores in Google PageSpeed Insights, several optimizations were implemented in the HTML structure, resource loading strategy, asset optimization, and accessibility compliance.

1. Image Optimization (PNG/JPG → WebP)

All major images were converted from PNG/JPG to WebP format to reduce file size and improve loading performance.

Example

Before

<img src="assets/img/logo.png" alt="Logo">

After

<img src="assets/img/logo.webp" alt="Logo">

Benefits

• Smaller image size

• Faster loading

• Improved PageSpeed performance score

• Better LCP performance

Example size comparison:

2. Resource Preloading

Critical resources were preloaded so the browser downloads them earlier, improving Largest Contentful Paint (LCP).

Preloaded Resources

• Logo image

• Hero banner image (LCP element)

• Bootstrap CSS

• Main stylesheet

Example

<link rel="preload" as="image" href="assets/img/logo.webp" type="image/webp">
<link rel="preload" as="image" href="assets/img/banner-1.webp" type="image/webp">

<link rel="preload"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
as="style">

<link rel="preload" href="assets/css/style.min.css" as="style">

Benefits

• Faster critical resource discovery

• Improved LCP and FCP

3. CSS and JavaScript Minification

CSS and JavaScript files were minified to reduce file size and improve loading speed.

Files optimized

• style.css → style.min.css

• custom.js → custom.min.js

Example

<link rel="stylesheet" href="assets/css/style.min.css">
<script defer src="assets/js/custom.min.js"></script>

Benefits

• Reduced file size

• Faster download time

• Improved PageSpeed performance

4. Optimized Google Fonts Loading

The previous CSS @import method caused render-blocking resources.

Fix

Fonts are now loaded asynchronously using preconnect and preload.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="preload"
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800&display=swap"
as="style"
onload="this.rel='stylesheet'">

Benefits

• Eliminates render-blocking font loading

• Improves PageSpeed performance score

5. LCP Image Optimization

The hero banner is the Largest Contentful Paint element.

Improvements

• Added fetchpriority="high"

• Added decoding="async"

• Removed lazy loading

• Preloaded the image

<img src="assets/img/banner-1.webp"
class="hero-bg"
alt="DASH Services Banner"
width="1600"
height="700"
fetchpriority="high"
decoding="async">

Benefits

• Faster LCP rendering

• Improved loading performance

6. Lazy Loading for Non-Critical Images

Images below the fold were optimized using lazy loading.

Example:

<img src="assets/img/img01.webp"
alt="accreditation"
loading="lazy">

Benefits

• Reduced initial page load size

• Faster page rendering

7. JavaScript Optimization

JavaScript files were deferred to prevent blocking the initial page render.

<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="assets/js/custom.min.js"></script>

Benefits

• Prevents render blocking

• Improves FCP and LCP

8. Viewport Accessibility Fix

The previous viewport configuration disabled zoom functionality.

Before

<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

After

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Benefits

• Improves accessibility compliance

• Passes Lighthouse accessibility audit

9. Semantic Landmark Structure

A <main> landmark was added to improve screen reader navigation.

<header>...</header>

<main>
  <!-- main page content -->
</main>

<footer>...</footer>

Benefits

• Improves accessibility

• Better semantic HTML structure

10. Color Contrast Improvements

Text colors were adjusted to meet WCAG contrast requirements.

Example:

.news-date {
color: #0f3164;
}

Benefits

• Improves readability

• Passes Lighthouse accessibility checks

11. Layout Stability Improvements

Image dimensions were defined to prevent layout shifts.

Example:

<img src="assets/img/logo.webp"
width="160"
height="60"
alt="Logo">

Benefits

• Prevents Cumulative Layout Shift (CLS)

Results

Conclusion

These optimizations significantly improved the website’s performance, accessibility, and SEO metrics, ensuring better compliance with Google PageSpeed Insights and Lighthouse recommendations.