Page Speed Improvements Every Frontend Developer Should Know

<img 
  src="image-small.jpg" 
  srcset="image-small.jpg 600w, 
          image-medium.jpg 1200w, 
          image-large.jpg 1800w" 
  sizes="(max-width: 600px) 600px, 
         (max-width: 1200px) 1200px, 
         1800px" 
  alt="Responsive optimized image"
  loading="lazy">

# Combining CSS files
cat style1.css style2.css style3.css > combined-styles.css

# Minify the combined file
cssnano combined-styles.css combined-styles.min.css

.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

.icon-search {
  width: 32px;
  height: 32px;
  background-position: -32px 0;
}

<!-- Load libraries from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Use CDN for static assets -->
<img src="https://cdn.example.com/images/hero-image.webp" alt="Hero image">

<IfModule mod_expires.c>
  ExpiresActive On
  
  # Images - 1 year
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  
  # CSS and JavaScript - 1 month
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  
  # HTML - 1 day
  ExpiresByType text/html "access plus 1 day"
</IfModule>

# Minify JavaScript with UglifyJS
uglifyjs input.js -o output.min.js -c -m

# Minify CSS with CSSNano
cssnano input.css output.min.css

# Minify HTML with html-minifier
html-minifier --collapse-whitespace --remove-comments input.html -o output.min.html

4. Enable Browser Caching

By setting appropriate cache headers, you can instruct browsers to store static resources locally. This reduces the need for repeated requests on subsequent visits, speeding up page load times.

Benefits of Enabling Browser Caching

• Faster Load Times: Cached resources load quickly from the user's device, improving overall site speed.
• Reduced Server Load: Caching decreases the number of requests to your server, freeing up resources for other tasks.
• Improved User Experience: Users experience quicker access to your site on repeat visits, enhancing satisfaction and engagement.
• Lower Bandwidth Usage: Caching reduces data transfer, which can be particularly beneficial for users with limited data plans or slower connections.

Example

Setting cache headers in Apache:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

5. Minify CSS, JavaScript, and HTML

Minification removes unnecessary characters (like whitespace and comments) from your code without affecting its functionality. This reduces file sizes and improves load times. Tools like UglifyJS for JavaScript and CSSNano for CSS can help automate this process.

Benefits of Minification

• Reduced File Sizes: Minified files are smaller, leading to faster downloads and improved load times.
• Improved Performance: Smaller files require less bandwidth and processing power, enhancing overall site performance.
• Better SEO Rankings: Search engines favor fast-loading websites, potentially boosting your search rankings.
• Enhanced User Experience: Quicker load times lead to higher user satisfaction and lower bounce rates.

Example

Minifying JavaScript using UglifyJS:

uglifyjs input.js -o output.min.js -c -m

Minifying CSS using CSSNano:

cssnano input.css output.min.css

<img src="image.jpg" alt="Description" loading="lazy">
<iframe src="video.mp4" loading="lazy"></iframe>

@font-face {
  font-family: 'OptimizedFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

# Avoid: example.com → www.example.com → www.example.com/page
# Use direct redirect:
Redirect 301 /old-page /new-page

<script src="analytics.js" async></script>
<script src="app.js" defer></script>

# Run Lighthouse audit
lighthouse https://your-site.com --output=json

# Check Core Web Vitals
https://web.dev/measure/