Website
Speed
Optimization
Case Study
How we made our own website score 100 on desktop and 94 on mobile in Google PageSpeed Insights, with smaller images, later scripts and cleaner code.
View Live Site
The Challenge
Our own website had grown heavy. Screenshots of client work were saved as 3 to 9 MB files, and some pages loaded them at full size, so one visitor could download up to 8.4 MB for a single image. Google Tag Manager and Analytics loaded early, fonts came from an outside stylesheet that blocked the page, and PageSpeed Insights flagged hundreds of kilobytes of images that could be smaller.
For a company that builds websites for other businesses, a slow website is the wrong first impression. Visitors leave slow pages, and speed is one of the things Google looks at when it decides which sites to show.
The Strategy
We treated our own site like a client project: measure first, fix the biggest problems first, and keep only the changes we could prove helped.
We ran PageSpeed Insights, worked through its list from the largest saving to the smallest, and tested again after each round. Two ideas were dropped because the numbers did not improve: inlining all the CSS made every page's HTML more than twice as big (21 KiB to 49 KiB) with no measurable gain, and removing the polyfills built into Next.js would have saved only 12 KiB and needed unsupported workarounds.
- Client
- Web Design Etobicoke (our own website)
- Services
- Speed optimization, image optimization
- Built With
- Next.js, Tailwind CSS, Vercel
- Tested With
- Google PageSpeed Insights (Lighthouse 13.4.1)
- Report Date
- September 20, 2026
- Live Site
- webdesignetobicoke.ca
What the Numbers Mean
- First Contentful Paint
- When the first text or image appears on the screen.
- Largest Contentful Paint
- When the biggest piece of content has loaded.
- Total Blocking Time
- How long the page is frozen while scripts run.
- Cumulative Layout Shift
- How much the page jumps around while it loads.
- Speed Index
- How quickly the page fills in.
The Solution
We changed how the site loads: smaller images, scripts that wait their turn, fonts that do not block the page and caching that fits each kind of file. The result is a faster, more user-friendly experience on every screen.
What I Did
Everything changed to make the website faster.
Smaller Images
Screenshots resized to 1440px wide at most and saved as palette PNGs. 20 portfolio images dropped from 71 MB to 10.6 MB, and about 35 MB of redesign, case study and logo images dropped to 5 MB.
The Right Image for Each Screen
Photos and screenshots on the main pages use next/image with a sizes setting, so phones download small files and large screens get larger ones, in modern AVIF and WebP formats.
The First Image Loads First
The main image at the top of the page is marked as a priority, and the images below it load as you scroll.
Scripts That Wait
Google Tag Manager was removed because its container had no tags. Google Analytics now loads after the page has finished loading, so it never delays the first view.
Fonts That Do Not Block
A render-blocking Google Fonts stylesheet was replaced with next/font, which serves the fonts from our own site and shows text straight away.
Less Code to Download
The site targets current browsers (Chrome 90+, Safari 14+, Firefox 90+, Edge 90+), so visitors are not sent code that only very old browsers need.
Caching Done Right
Files that never change (scripts, images, fonts) are cached for a year. HTML pages are not, so updates show up straight away.
Test Before Keeping
Every change was checked in PageSpeed Insights. Ideas that made pages bigger or needed unsupported workarounds were dropped.
Readable Text
Low-contrast labels, footer text and small orange text were darkened to meet WCAG AA. Accessibility scores 96 today, with one contrast item still to fix.
A Clean Image Folder
377 unused image files (42.9 MB) were deleted, so nothing heavy can be loaded by accident.
Before and After in File Size
71 MB → 10.6 MB
20 portfolio screenshots
35 MB → 5 MB
Redesign, case study and logo images
6 MB → 226 KB
One project image (PNG to JPG)
1.87 MB → 367 KB
The About page photo
377 files
Unused images deleted (42.9 MB)
The Results
On September 20, 2026 we ran Google PageSpeed Insights on the live site. Desktop scored 100 for Performance, Best Practices and SEO. Mobile scored 94 for Performance and 100 for Best Practices and SEO. Both scored 96 for Accessibility.
The Scores
Measured with Google PageSpeed Insights.
100 on desktop
Performance, Best Practices and SEO all score 100. The first content appears in 0.3 seconds and the largest content in 0.6 seconds.
94 on mobile
Tested on an emulated Moto G Power over slow 4G. First content appears in 1.5 seconds and the page does not shift while it loads.
100 for Best Practices and SEO on both
Speed is not the only check. Best Practices and SEO both pass with a perfect 100, on desktop and on mobile.
Website Performance
| Score | Desktop | Mobile |
|---|---|---|
| Performance | 100 | 94 |
| Accessibility | 96 | 96 |
| Best Practices | 100 | 100 |
| SEO | 100 | 100 |
| Load Times | ||
| First Contentful Paint | 0.3 s | 1.5 s |
| Largest Contentful Paint | 0.6 s | 3.0 s |
| Total Blocking Time | 40 ms | 80 ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 0.5 s | 1.6 s |
What is next: mobile Largest Contentful Paint (3.0 s) is the one number PageSpeed still marks orange. It also points to render-blocking CSS (an estimated 890 ms on mobile), 79 KiB of unused JavaScript and one text-contrast item. Those are the next things we will fix.
The PageSpeed Insights Reports
The two reports for webdesignetobicoke.ca, run on September 20, 2026. Open a report to see every check.
Desktop
View full report →Mobile
View full report →See More Work
Browse our case studies and the websites we have built for businesses across Canada.
View All Case Studies →Want a website
this fast?
We build fast, custom websites for businesses across Canada, live in 7 days. Book a free consultation and we will tell you what would speed up your site.