How to Optimize Landing Page Performance

This step-by-step tutorial shows you how to make your landing pages load lightning-fast for maximum conversions.

What You’ll Learn

By the end of this tutorial, you’ll know how to:

Measure page performance
Optimize images
Minify CSS and JavaScript
Enable caching
Reduce page weight
Fix performance issues
Achieve 90+ PageSpeed score

Time Required: 20-30 minutes
Difficulty: Intermediate
Prerequisites: Published landing page

Why Performance Matters

Impact on Conversions

`
Page Load Time → Conversion Rate
1 second: → 100% baseline
2 seconds: → 94% (-6%)
3 seconds: → 82% (-18%)
4 seconds: → 69% (-31%)
5 seconds: → 55% (-45%)
`

Every second counts!

SEO Benefits

Google ranks faster pages higher
Better mobile search rankings
Lower bounce rates
Higher engagement

User Experience

Professional impression
Reduced frustration
Mobile-friendly
Competitive advantage

Step 1: Measure Current Performance

Use Google PageSpeed Insights

Visit PageSpeed Insights
Enter your landing page URL
Click Analyze
Wait for results (30-60 seconds)

Understand Your Scores

`
Performance Score:
90-100: Excellent ✅
50-89: Needs improvement ⚠️
0-49: Poor ❌

Mobile Score: [Your score]
Desktop Score: [Your score]
`

Key Metrics

Core Web Vitals:

LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

Other Metrics:

FCP (First Contentful Paint): < 1.8s
TTI (Time to Interactive): < 3.8s
TBT (Total Blocking Time): < 200ms
Speed Index: < 3.4s

Record Baseline

Write down your current scores:
`
Before Optimization:

Mobile Performance: __/100
Desktop Performance: __/100
LCP: __ seconds
Page Weight: __ MB

Step 2: Enable ShahiLandin Performance Features

Access Performance Settings

Go to ShahiLandin → Settings
Click Performance tab

Enable Key Features

Check these boxes:

✅ Enable Performance Optimization
✅ Minify CSS
✅ Minify JavaScript
✅ Enable Asset Mirroring
✅ Lazy Load Images
✅ Defer Non-Critical CSS
✅ Remove Query Strings from Static Resources

Configure Caching

Browser Cache Duration: 7 days (default)

Enable Server-Side Caching: ✅ (if available)

Save Changes

Click Save Changes button.

Step 3: Optimize Images

Images are usually the #1 performance bottleneck.

Current Image Audit

Run this in browser console (F12):

`javascript
// Find all images and their sizes
let images = document.querySelectorAll(‘img’);
let totalSize = 0;
images.forEach(img => {
fetch(img.src)
.then(res => res.blob())
.then(blob => {
console.log(img.src, (blob.size / 1024).toFixed(2) + ‘ KB’);
totalSize += blob.size;
});
});
`

Compress Images

Before uploading images to landing page:

Online Tools (Free):

TinyPNG – PNG/JPEG compression
Squoosh – Advanced options
Compressor.io – Lossy/lossless

Desktop Apps:

Windows: FileOptimizer
Mac: ImageOptim
Cross-platform: GIMP

Target sizes:

Hero images: < 200 KB
Section images: < 100 KB
Icons: < 20 KB
Logos: < 30 KB

Use Correct Image Formats

`
JPEG: Photos, complex images
PNG: Logos, icons, transparency
WebP: Modern format (smaller, better quality)
SVG: Icons, logos, simple graphics
`

Convert to WebP

Using online converter or command line:

`bash

Install cwebp (macOS)

brew install webp

Convert image

cwebp input.jpg -q 80 -o output.webp
`

Implement Responsive Images

Use srcset for different screen sizes:

`html

`

Add Lazy Loading

Add loading="lazy" to images below the fold:

`html
Testimonial
`

ShahiLandin can add this automatically if Lazy Load Images is enabled in settings.

Step 4: Minify CSS

Remove Unused CSS

Edit your landing page CSS and remove:

Unused styles
Commented code
Redundant declarations

Before (bloated):
`css
/ Old styles /
.old-button {
background: red;
}

/ Another comment /
.header {
background: #ffffff;
color: #000000;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
`

After (clean):
`css
.header {
background: #fff;
color: #000;
padding: 20px;
}
`

Use Shorthand Properties

`css
/ Before /
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
border-width: 1px;
border-style: solid;
border-color: #000;
}

/ After /
.box {
margin: 10px 20px;
border: 1px solid #000;
}
`

Remove Redundant Rules

`css
/ Redundant /
.button {
background: blue;
}
.button {
background: red; / This overrides anyway /
}

/ Clean /
.button {
background: red;
}
`

Enable Auto-Minification

ShahiLandin automatically minifies CSS if Minify CSS is enabled in Performance settings.

Manual minification:
Use CSS Minifier

Step 5: Optimize JavaScript

Remove Console Logs

`javascript
// Remove before production
console.log(‘Debug info’);
console.warn(‘Warning’);
console.error(‘Error’);
`

Combine Similar Functions

Before (repetitive):
`javascript
document.querySelector(‘.btn-1’).addEventListener(‘click’, function() {
alert(‘Button 1 clicked’);
});
document.querySelector(‘.btn-2’).addEventListener(‘click’, function() {
alert(‘Button 2 clicked’);
});
document.querySelector(‘.btn-3’).addEventListener(‘click’, function() {
alert(‘Button 3 clicked’);
});
`

After (efficient):
`javascript
document.querySelectorAll(‘[class^=”btn-“]’).forEach(btn => {
btn.addEventListener(‘click’, () => {
alert(btn.textContent + ‘ clicked’);
});
});
`

Defer Non-Critical JavaScript

Add defer to script tags:

`html

Or move scripts to bottom of page (before ).

Enable Auto-Minification

ShahiLandin minifies JavaScript if Minify JavaScript is enabled.

Manual minification:
Use JavaScript Minifier

Step 6: Reduce External Requests

Audit Current Requests

Open DevTools (F12) → Network tab → Refresh page

Count requests:

Images: __
CSS files: __
JavaScript files: __
Fonts: __
Third-party: __

Goal: < 30 total requests

Combine CSS Files

Instead of:
`html`

Combine into single file:
`html`

Inline Critical CSS

For CSS needed immediately:

`html

Then load full CSS asynchronously:

`html `

Remove Unnecessary Third-Party Scripts

Common culprits:

❌ Multiple analytics tools (pick one)
❌ Unused social sharing buttons
❌ Decorative animations/effects
❌ Unused font weights

Example: Loading Google Fonts

Before (loading 6 font weights):
`html `

After (loading 2 weights):
`html `

Savings: 4 HTTP requests removed

Self-Host Critical Resources

Instead of loading jQuery from CDN:
`html

ShahiLandin’s Asset Mirroring feature automatically mirrors external assets locally.

Step 7: Enable Caching

Browser Caching (Automated)

ShahiLandin automatically sets cache headers for:

Images: 7 days
CSS: 7 days
JavaScript: 7 days
Fonts: 30 days

WordPress Caching Plugins

Install a caching plugin for better performance:

WP Super Cache (Free, Easy)

Install from Plugins → Add New
Activate
Settings → WP Super Cache
Caching On (Recommended)
Click Update Status

W3 Total Cache (Free, Advanced)

Install and activate
Performance → General Settings
Enable:

– ✅ Page Cache
– ✅ Minify
– ✅ Browser Cache

Save settings

WP Rocket (Premium, Best)

Purchase and install
Settings → WP Rocket
Everything is auto-configured
Just activate

Recommended: WP Rocket for best results

CDN (Content Delivery Network)

Serve assets from global network.

Cloudflare (Free)

Sign up at cloudflare.com
Add your domain
Update nameservers at domain registrar
Enable:

– Auto Minify (CSS, JS, HTML)
– Brotli compression
– Browser Cache TTL: 4 hours

Wait 24-48 hours for propagation

Other CDN Options:

StackPath: Premium CDN
BunnyCDN: Affordable, fast
KeyCDN: Pay-as-you-go

Step 8: Fix Common Performance Issues

Issue 1: Render-Blocking Resources

Problem: CSS/JS blocks page rendering

Solution: Defer or async load

`html

Issue 2: Large Images

Problem: Hero image is 2 MB

Solution: Compress and use WebP

`html Hero `

Issue 3: Slow Server Response (TTFB)

Problem: Server takes > 600ms to respond

Solutions:

✅ Enable caching plugin
✅ Use better hosting
✅ Enable CDN
✅ Optimize database
✅ Reduce PHP processing

Issue 4: Too Many HTTP Requests

Problem: 100+ requests

Solution: Combine files, remove unused scripts

Issue 5: Cumulative Layout Shift (CLS)

Problem: Content jumps as page loads

Solution: Set dimensions on images/videos

`html

Or use CSS:

`css
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
`

Issue 6: Unused JavaScript

Problem: Loading libraries you don’t use

Solution: Remove or replace with vanilla JS

Before (using jQuery for simple task):
`javascript
$(document).ready(function() {
$(‘.button’).click(function() {
alert(‘Clicked’);
});
});
`

After (vanilla JS):
`javascript
document.querySelector(‘.button’).addEventListener(‘click’, () => {
alert(‘Clicked’);
});
`

Step 9: Mobile Optimization

Viewport Meta Tag

Ensure this is in your HTML :

`html

`

Mobile-First CSS

Write CSS for mobile first, then scale up:

`css
/ Mobile first (default) /
.container {
padding: 20px;
}

/ Tablet and up /
@media (min-width: 768px) {
.container {
padding: 40px;
}
}

/ Desktop /
@media (min-width: 1024px) {
.container {
padding: 60px;
}
}
`

Touch-Friendly Elements

Make buttons easy to tap:

`css
.button {
min-height: 44px; / Apple’s recommended minimum /
padding: 12px 24px;
font-size: 16px; / Prevents zoom on iOS /
}
`

Test on Real Devices

Use Chrome DevTools:

F12 → Toggle device toolbar
Test on: iPhone, iPad, Android
Check performance, layout, interactions

Step 10: Advanced Optimizations

Preload Critical Assets

`html

DNS Prefetch for External Domains

`html `

Use Modern Image Formats

Serve WebP with JPEG fallback:

`html Fallback `

Code Splitting

Load JavaScript only when needed:

`javascript
// Load heavy chart library only when user clicks “View Stats”
document.querySelector(‘#view-stats’).addEventListener(‘click’, async () => {
const { Chart } = await import(‘./chart.js’);
new Chart(data);
});
`

Enable Gzip/Brotli Compression

Add to .htaccess (Apache):

`apache

Enable Gzip

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json

Enable Brotli (if available)

AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript

`

Or use Cloudflare (auto-enabled).

Database Optimization

Run these WP-CLI commands:

`bash

Optimize database tables

wp db optimize

Clean up revisions

wp post delete $(wp post list –post_type=’revision’ –format=ids)

Clean up transients

wp transient delete –all
`

Or use plugin: WP-Optimize

Step 11: Monitor Performance

Set Up Continuous Monitoring

Google Search Console

Verify site ownership
Go to Core Web Vitals report
Monitor LCP, FID, CLS over time

Real User Monitoring (RUM)

ShahiLandin tracks real performance metrics:

ShahiLandin → Statistics
View Performance tab
See:

– Average load time
– LCP by device
– Page size trends

Weekly Check-In

Every week, run PageSpeed Insights test:

Compare to baseline
Look for regressions
Address new issues

Performance Budget

Set limits and stick to them:

`
Performance Budget:

Page Weight: < 1 MB
Total Requests: < 30
Load Time (Mobile): < 3s
PageSpeed Score: > 90

Troubleshooting

“Still Slow After Optimization”

Check:

Hosting quality (shared hosting is slow)
Large unoptimized images still present?
Caching plugin active?
CDN configured correctly?
Database bloated with revisions?

Solution: Upgrade hosting or contact support

“Caching Plugin Breaks Page”

Solution:

Exclude ShahiLandin pages from cache
WP Super Cache → Advanced → Add to rejected URIs: /landing-page/

“Images Not Lazy Loading”

Check:

Performance → Lazy Load Images enabled?
Images have proper markup?
JavaScript errors in console?

Solution: Add loading="lazy" manually

“PageSpeed Score Dropped”

Causes:

New third-party script added
Images not compressed
Caching expired
Plugin conflict

Solution: Re-run optimization steps

Summary

You’ve learned how to:

✅ Measure performance with PageSpeed Insights
✅ Enable ShahiLandin performance features
✅ Optimize and compress images
✅ Minify CSS and JavaScript
✅ Reduce external HTTP requests
✅ Enable caching (browser, plugin, CDN)
✅ Fix common performance issues
✅ Optimize for mobile
✅ Implement advanced optimizations
✅ Monitor performance continuously

Result: Lightning-fast landing pages that convert better!

Performance Checklist

Before launching any landing page:

✅ All images compressed (< 200 KB each)
✅ CSS minified
✅ JavaScript minified and deferred
✅ Caching plugin installed
✅ Total page weight < 1 MB
✅ Mobile PageSpeed score > 85
✅ Desktop PageSpeed score > 90
✅ LCP < 2.5 seconds
✅ CLS < 0.1
✅ Tested on real mobile device