• •Google PageSpeed Insights gives you a performance score and specific recommendations
• •GTmetrix shows a waterfall chart of every resource your page loads
• •Your browser's DevTools (Network tab) shows exactly what is loading and how long each resource takes

• •Total page weight in megabytes (aim for under 1.5MB for most sites)
• •Number of HTTP requests (every file is a separate request)
• •Largest Contentful Paint (LCP) measures when your main content becomes visible
• •Time to First Byte (TTFB) tells you how fast your server responds

Write down your numbers. You will want to compare after each optimization.

Run every image through a compression tool before uploading. A 2MB hero image can easily become 200KB with no visible quality loss. That single change can shave a full second off your load time.

Browser-based tools like the image compressor on FreeApexGears handle this in seconds. No software to install.

If your site still serves JPEG and PNG files exclusively, you are leaving performance on the table.

• •WebP offers 25-35% smaller files than JPEG at equivalent quality
• •AVIF is even better but has slightly less browser support
• •Use the `<picture>` element to serve modern formats with fallbacks

Images that are not visible when the page first loads should not block the initial render. Add `loading="lazy"` to any image that is not in the first viewport.

This is a one-attribute change that can make a massive difference on image-heavy pages.

Do not serve a 3000px wide image in a 400px container. Use responsive images with the `srcset` attribute to deliver appropriately sized images based on the user's screen.

Most sites load way more CSS and JS than they actually need. Entire frameworks get imported for a handful of features. Unused code still has to be downloaded and parsed by the browser.

Use Chrome DevTools Coverage tab to see how much of your CSS and JS is actually being used. You might be surprised.

Minification strips whitespace, comments, and shortens variable names. It is free performance. Most build tools do this automatically, but double-check that your production builds are actually minified.

Not all JavaScript needs to run before the page is visible. Use `defer` or `async` attributes on script tags that are not needed for the initial render.

• •`defer` loads the script in parallel and runs it after the HTML is parsed
• •`async` loads and runs the script as soon as it is ready (use for independent scripts like analytics)

The CSS needed to render the above-the-fold content should be inlined directly in the HTML. This eliminates a render-blocking request and lets the browser paint the page faster.

Configure your server to send proper cache headers for static assets:

• •Images, fonts, and CSS/JS should have long cache durations (1 year is common)
• •HTML pages should have shorter cache times or no-cache headers so users always get fresh content
• •Use content hashing in filenames (like `style.a3f2b1.css`) so the browser knows when a file has actually changed

A Content Delivery Network serves your static files from servers close to your users. If your server is in New York and your visitor is in Tokyo, a CDN puts a copy of your files in Tokyo (and dozens of other locations worldwide).

For static sites, CDNs can cut load times by 50% or more for distant visitors.

• •Bundle your CSS into fewer files
• •Bundle your JavaScript modules
• •Use CSS sprites or inline SVGs instead of many small image files

Modern protocols handle multiple requests much more efficiently than HTTP/1.1. Most modern hosting providers and CDNs support HTTP/2 by default, but it is worth verifying.

Use `<link rel="preload">` to tell the browser about critical resources it will need soon. This is especially useful for fonts and hero images.

Every weight and style is a separate file. If you load Regular, Bold, Italic, and Bold Italic in two font families, that is 8 font files. Pick only the weights you actually use.

This tells the browser to show text in a system font immediately, then swap in the custom font once it loads. Users see content faster, even if the font takes a moment to appear.

System font stacks look great and load instantly because they are already on the user's device. Unless your brand requires a specific typeface, system fonts are worth considering.

• •Enable server-side caching so your server is not regenerating the same page for every request
• •Optimize database queries if your site is database-driven
• •Upgrade your hosting if you are on shared hosting with limited resources
• •Use a static site generator if your content does not change per-request