1. Chrome Coverage Tab: Identifying Unused Code

Chrome's Coverage tab is a powerful tool to analyze how much of your CSS and JavaScript is actually being used by the website. By reducing unused code, you can drastically decrease load times.

How to Use the Coverage Tab:

1. Open DevTools (Ctrl + Shift + I or Cmd + Option + I on Mac).
2. Go to the “Coverage” tab under “More Tools.”
3. Reload your page, and the Coverage tab will show how much of your CSS and JavaScript is unused.

Once identified, you can use tools like PurgeCSS or UnusedCSS to automatically remove this unused code.

# PurgeCSS example in your build process
purgecss --css css/style.css --content index.html
    

2. Minifying CSS and JavaScript

Reducing file size by minifying CSS and JavaScript is crucial for performance. This process removes unnecessary characters like spaces and comments, ensuring the code is as compact as possible.

Tools for Minification:

• PurgeCSS: Removes unused CSS.
• UnusedCSS: Identifies and removes unnecessary CSS.
• Terser: Minifies JavaScript.

# Example with PurgeCSS to minify CSS
npm install purgecss --save-dev
purgecss --css style.css --content *.html --output ./dist
    

3. WebP Images: Smaller and Faster

Images contribute to the bulk of website data. Using modern image formats like WebP can reduce image sizes without compromising quality.

Convert Images to WebP:

# Using imagemagick to convert images to WebP
convert image.png image.webp
    

You can also configure .htaccess to serve WebP images if supported by the browser:

  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule .+ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]

    

4. .htaccess Configuration for Compression

By enabling server-side compression using Gzip or Brotli, you can shrink file sizes before they're sent to the browser. This reduces the load time significantly.

.htaccess Example:

# Enable Gzip compression

  AddOutputFilterByType DEFLATE text/html text/css application/javascript


# Enable browser caching

  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"

    

5. Content Delivery Network (CDN)

A CDN distributes your site’s assets across multiple servers worldwide, allowing users to download files from the server closest to them, thus speeding up load time.

Using Cloudflare CDN:

1. Sign up for Cloudflare.
2. Update your website’s DNS to route traffic through Cloudflare.
3. Set up caching rules for static files like CSS, JS, and images.

<link rel="stylesheet" href="https://cdn.yoursite.com/style.css">
<script src="https://cdn.yoursite.com/script.js"></script>

6. CSS Preprocessors and Sprites

Preprocessors like Sass or Less allow for more organized and modular CSS, which is easier to minify and optimize. Sprites combine multiple images into a single file to reduce HTTP requests, improving load time.

Example with Sass:

$primary-color: #333;
body {
  color: $primary-color;
}
    

Example of a Sprite:

.icon {
  background-image: url('sprite.png');
  width: 32px;
  height: 32px;
  background-position: -64px 0;
}
    

Use a tool like ImageMagick to generate sprites from multiple images:

# Combine images into a sprite
montage image1.png image2.png sprite.png
    

7. HTML Templating Engines

Using a templating engine like Pug or Handlebars reduces HTML redundancy by allowing reusable components. Templating engines make it easier to manage large projects and improve maintainability, which can indirectly optimize load times.

Example with Pug:

doctype html
html
  head
    title My Website
  body
    h1 Welcome
    include footer.pug
    

Using partials and includes helps reduce duplicated code, keeping HTML files smaller and faster to render.