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:

1. Measure page performance
2. Optimize images
3. Minify CSS and JavaScript
4. Enable caching
5. Reduce page weight
6. Fix performance issues
7. 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


8. Google ranks faster pages higher
9. Better mobile search rankings
10. Lower bounce rates
11. Higher engagement

User Experience


12. Professional impression
13. Reduced frustration
14. Mobile-friendly
15. Competitive advantage

Step 1: Measure Current Performance


Use Google PageSpeed Insights


16. Visit PageSpeed Insights
17. Enter your landing page URL
18. Click Analyze
19. 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:

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

Other Metrics:

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

Record Baseline


Write down your current scores:
`
Before Optimization:

27. Mobile Performance: __/100
28. Desktop Performance: __/100
29. LCP: __ seconds
30. Page Weight: __ MB

`

Step 2: Enable ShahiLandin Performance Features


Access Performance Settings


31. Go to ShahiLandin → Settings
32. 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):


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

Desktop Apps:


36. Windows: FileOptimizer
37. Mac: ImageOptim
38. Cross-platform: GIMP

Target sizes:

39. Hero images: < 200 KB
40. Section images: < 100 KB
41. Icons: < 20 KB
42. 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

`

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:

43. Unused styles
44. Commented code
45. 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:

46. Images: __
47. CSS files: __
48. JavaScript files: __
49. Fonts: __
50. 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:

51. ❌ Multiple analytics tools (pick one)
52. ❌ Unused social sharing buttons
53. ❌ Decorative animations/effects
54. ❌ 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:

55. Images: 7 days
56. CSS: 7 days
57. JavaScript: 7 days
58. Fonts: 30 days

WordPress Caching Plugins


Install a caching plugin for better performance:

WP Super Cache (Free, Easy)


59. Install from Plugins → Add New
60. Activate
61. Settings → WP Super Cache
62. Caching On (Recommended)
63. Click Update Status

W3 Total Cache (Free, Advanced)


64. Install and activate
65. Performance → General Settings
66. Enable:

– ✅ Page Cache
– ✅ Minify
– ✅ Browser Cache

67. Save settings

WP Rocket (Premium, Best)


68. Purchase and install
69. Settings → WP Rocket
70. Everything is auto-configured
71. Just activate

Recommended: WP Rocket for best results

CDN (Content Delivery Network)


Serve assets from global network.

Cloudflare (Free)


72. Sign up at cloudflare.com
73. Add your domain
74. Update nameservers at domain registrar
75. Enable:

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

76. Wait 24-48 hours for propagation

Other CDN Options:


77. StackPath: Premium CDN
78. BunnyCDN: Affordable, fast
79. 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 `

Issue 3: Slow Server Response (TTFB)


Problem: Server takes > 600ms to respond

Solutions:

80. ✅ Enable caching plugin
81. ✅ Use better hosting
82. ✅ Enable CDN
83. ✅ Optimize database
84. ✅ 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:

85. F12 → Toggle device toolbar
86. Test on: iPhone, iPad, Android
87. 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 `

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


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

Real User Monitoring (RUM)


ShahiLandin tracks real performance metrics:

91. ShahiLandin → Statistics
92. View Performance tab
93. See:

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

Weekly Check-In


Every week, run PageSpeed Insights test:

94. Compare to baseline
95. Look for regressions
96. Address new issues

Performance Budget


Set limits and stick to them:

`
Performance Budget:

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

`

Troubleshooting


“Still Slow After Optimization”


Check:

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

Solution: Upgrade hosting or contact support

“Caching Plugin Breaks Page”


Solution:

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

“Images Not Lazy Loading”


Check:

108. Performance → Lazy Load Images enabled?
109. Images have proper markup?
110. JavaScript errors in console?

Solution: Add loading="lazy" manually

“PageSpeed Score Dropped”


Causes:

111. New third-party script added
112. Images not compressed
113. Caching expired
114. Plugin conflict

Solution: Re-run optimization steps

Summary


You’ve learned how to:

115. ✅ Measure performance with PageSpeed Insights
116. ✅ Enable ShahiLandin performance features
117. ✅ Optimize and compress images
118. ✅ Minify CSS and JavaScript
119. ✅ Reduce external HTTP requests
120. ✅ Enable caching (browser, plugin, CDN)
121. ✅ Fix common performance issues
122. ✅ Optimize for mobile
123. ✅ Implement advanced optimizations
124. ✅ Monitor performance continuously

Result: Lightning-fast landing pages that convert better!

Performance Checklist


Before launching any landing page:

125. ✅ All images compressed (< 200 KB each)
126. ✅ CSS minified
127. ✅ JavaScript minified and deferred
128. ✅ Caching plugin installed
129. ✅ Total page weight < 1 MB
130. ✅ Mobile PageSpeed score > 85
131. ✅ Desktop PageSpeed score > 90
132. ✅ LCP < 2.5 seconds
133. ✅ CLS < 0.1
134. ✅ Tested on real mobile device

Related Tutorials


135. How to Create Your First Landing Page
136. How to Import HTML Landing Page
137. Settings & Configuration

—

Need Help? See Performance Issues troubleshooting guide.