Website Speed Optimization Guide 2025

Core Web Vitals

Google's Core Web Vitals are now essential metrics for SEO and user experience:

• Largest Contentful Paint (LCP) - Measures loading performance. For good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID) - Measures interactivity. Pages should have an FID of less than 100 milliseconds.
• Cumulative Layout Shift (CLS) - Measures visual stability. Pages should maintain a CLS of less than 0.1.

Additional Speed Metrics

Beyond Core Web Vitals, these metrics also impact perceived performance:

• Time to First Byte (TTFB) - How quickly the server responds. Aim for under 200ms.
• First Contentful Paint (FCP) - When the first content appears. Should be under 1.8 seconds.
• Total Blocking Time (TBT) - Measures responsiveness during page load. Keep under 300ms.
• Speed Index - How quickly content is visually displayed. Target under 3.4 seconds.

1. Enable LiteSpeed Cache

Hostinger uses LiteSpeed Web Server, which includes a powerful caching solution:

1. Log in to your WordPress dashboard
2. Install and activate the LiteSpeed Cache plugin
3. Go to LiteSpeed Cache > Settings
4. Enable cache and set TTL (Time To Live) to at least 86400 seconds (24 hours)
5. Enable browser caching and object caching

This configuration can reduce page load times by up to 70%.

2. Utilize Hostinger's CDN

Hostinger offers Cloudflare CDN integration at no additional cost:

1. Log in to your Hostinger hPanel
2. Navigate to "Advanced" > "Cloudflare"
3. Click "Enable Cloudflare"
4. Select the "Standard" plan (free)
5. Enable Rocket Loader and Auto Minify options

Using a CDN can reduce load times by 40-60% for global visitors by serving content from servers closer to them.

3. Optimize MySQL Database

Hostinger allows you to optimize your MySQL database directly from hPanel:

1. Log in to your Hostinger hPanel
2. Go to "Databases" > "MySQL Databases"
3. Select your database
4. Click on "PhpMyAdmin"
5. Select all tables (click the "Check All" link)
6. From the dropdown menu, select "Optimize table"

Regular database optimization can improve query performance by 15-30%, especially for content-heavy websites.

4. Upgrade to PHP 8.2+

Hostinger supports the latest PHP versions, which offer significant performance improvements:

1. Log in to your Hostinger hPanel
2. Go to "Advanced" > "PHP Configuration"
3. Select PHP 8.2 or higher from the dropdown
4. Click "Save"

PHP 8.2 can be up to 30% faster than PHP 7.4 for WordPress sites.

1. Image Optimization

Images often account for 50-90% of a page's weight. Optimize them by:

• Compress images - Use tools like ShortPixel, Smush, or TinyPNG to reduce file sizes without visible quality loss
• Use WebP format - Convert images to WebP, which is 25-35% smaller than JPEG/PNG
• Implement lazy loading - Only load images when they're about to enter the viewport
• Specify image dimensions - Always include width and height attributes to prevent layout shifts
• Responsive images - Use srcset to serve different image sizes based on device screen size

Example of responsive images with srcset:

<img src="image-800w.jpg"
     srcset="image-400w.jpg 400w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="Responsive image example"
     width="800" height="600"
     loading="lazy">

2. Minimize HTTP Requests

Each resource (CSS, JavaScript, images) requires an HTTP request. Reduce them by:

• Combine CSS files - Merge multiple stylesheets into one
• Combine JavaScript files - Merge scripts where possible
• Use CSS sprites - Combine multiple icons/small images into one image file
• Remove unnecessary plugins - Each plugin often adds multiple resources
• Inline critical CSS - Place essential styles directly in the HTML head

Reducing HTTP requests can improve initial load time by 30-50%.

3. Minify and Compress Resources

Reduce file sizes through minification and compression:

• Minify CSS - Remove whitespace, comments, and unnecessary characters
• Minify JavaScript - Compress code without changing functionality
• Minify HTML - Remove unnecessary spaces and comments
• Enable GZIP compression - Compress resources before sending them to the browser

For Hostinger users, add this to your .htaccess file to enable GZIP compression:

# Enable GZIP compression
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

4. Optimize CSS Delivery

CSS blocks rendering, so optimize its delivery:

• Inline critical CSS - Place above-the-fold styles directly in the HTML head
• Defer non-critical CSS - Load non-essential styles after the page renders
• Remove unused CSS - Eliminate styles that aren't being used on the page

Example of deferring non-critical CSS:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

5. Optimize JavaScript Loading

JavaScript can block rendering and interaction. Optimize it by:

• Defer JavaScript - Load scripts after HTML parsing
• Async loading - Load non-critical scripts asynchronously
• Remove render-blocking scripts - Move scripts from the head to just before the closing body tag
• Use modern JavaScript - ES6+ code is often more compact and efficient

Example of defer and async attributes:

<!-- Deferred loading (executes after parsing) -->
<script src="script.js" defer></script>

<!-- Async loading (loads in parallel, executes immediately) -->
<script src="analytics.js" async></script>

1. Implement Browser Caching

Browser caching stores resources locally, reducing load times for returning visitors. Add this to your .htaccess file:

# Browser caching
<IfModule mod_expires.c>
  ExpiresActive On
  
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  
  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
  
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  
  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

2. Implement Resource Hints

Resource hints tell browsers which resources to prioritize:

• Preload - Load critical resources earlier
• Preconnect - Establish early connections to important origins
• Prefetch - Load resources that will be needed for subsequent pages
• DNS-prefetch - Resolve domain names before resources are requested

Example implementation:

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload critical assets -->
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.webp" as="image">

<!-- DNS-prefetch for third-party domains -->
<link rel="dns-prefetch" href="//www.google-analytics.com">

3. Use a Content Delivery Network (CDN)

A CDN distributes your content across multiple global servers, reducing latency for users worldwide. Hostinger includes Cloudflare integration, but you can also consider:

• Cloudflare - Free tier available, excellent DDoS protection
• BunnyCDN - Affordable pay-as-you-go pricing
• Fastly - Advanced features for enterprise sites
• KeyCDN - Simple, developer-friendly CDN

Using a CDN can reduce global load times by 40-60%.

4. Optimize Web Fonts

Web fonts can significantly impact performance. Optimize them by:

• Use WOFF2 format - 30% smaller than WOFF and 50% smaller than TTF
• Subset fonts - Include only the characters you need
• Limit font weights and styles - Each variant adds to the payload
• Use font-display: swap - Show text with a fallback font while custom fonts load
• Self-host fonts - Avoid third-party requests when possible

Example of optimized font loading:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'),
       url('open-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}