How to improve site performance (Using WP Rocket)

Website performance directly impacts user experience, conversion rates, and Google Core Web Vitals. Porto is engineered as a performance-focused WordPress theme, but achieving excellent speed scores requires the right configuration, clean content structure, and a properly tuned cache layer.

This guide explains how to build a fast Porto-powered website, combining Porto’s native optimization features with WP Rocket, one of the most reliable WordPress caching plugins.

The goal is not only high PageSpeed scores, but real-world performance: fast first load, smooth scrolling, and responsive interactions.

Before enabling any optimization features, make sure your site structure is clean and intentional.

Best Practices Before Optimization

• Replace all demo images and content with your real assets
• Remove unused pages, posts, blocks, templates, and products
• Avoid excessive animations, carousels, sliders, and nested elements
• Use Porto builders (Block Builder, Single Builder, Archive Builder) instead of third-party layout plugins whenever possible

Performance optimization should always start after your content structure is finalized. Measuring speed on demo content gives misleading results.

Porto Theme provides a dedicated Speed Optimize → Performance panel designed to reduce CSS, JavaScript, image weight, and unused assets generated by the theme and supported plugins. These options work together with caching plugins such as WP Rocket and should be configured only after your site structure and content are finalized.

⚠️ Important
Porto speed optimization settings should be configured after site development is completed.
Enabling optimization too early may remove required styles or scripts for features that are added later.

Navigate to WordPress Dashboard → Porto → Speed Optimize → Performance. This page is divided into five tabs

• WPBakery & Shortcodes
• Revolution Slider
• Performance
• Other Minify
• Advanced

Each tab controls a specific performance layer.

Purpose

Optimize WPBakery Page Builder and Porto shortcodes by removing unused shortcode styles and assets.

How It Works

• Porto scans your site content and lists unused WPBakery and Porto shortcodes
• When checked, all CSS and JS related to those shortcodes are removed
• This can reduce hundreds of kilobytes from frontend assets

Best Practice (Very Important)

• Perform this step only after all pages, templates, headers, footers, and blocks are finalized
• If you later use a removed shortcode, you must re-enable it and recompile
• Always review the list carefully before saving

Recommended Workflow

1. Finish site development completely
2. Visit this tab
3. Review unused shortcodes list
4. Uncheck any shortcode you may need later
5. Save and compile
6. Clear cache and test key pages

Purpose

Prevent Revolution Slider CSS and JS from loading on pages that do not use sliders.

Built-in Option

• Optimize Revolution Slider

How It Works

• Automatically detects pages without Revolution Slider
• Prevents global loading of heavy slider assets
• Reduces render-blocking resources and JS execution time

This tab controls core WordPress, image, font, and loading behavior.

WordPress Image Settings

⚠️ Always use Regenerate Thumbnails after changing these values.

Lazy Loading Options

Preload Icon Fonts and Images

Preloading helps browsers fetch important assets early, improving perceived load time.

Built-in icon preload options

• Porto Icons
• Font Awesome 6 Solid
• Font Awesome 6 Regular
• Font Awesome 6 Brands
• Simple Line Icons

You can also preload custom resources

https://example.com/logo.png
https://example.com/fonts/custom.woff2

Homepage-only preload example

https://example.com/hero-banner.png -oh

Font Face Rendering

Font Display: Swap

• Ensures text remains visible during font loading
• Prevents FOIT (Flash of Invisible Text)
• Improves LCP and PageSpeed scores

This section controls CSS/JS minification and selective resource loading.

Core Optimization Options

WordPress & Plugin Cleanup

Plugin-Specific Resource Loading

Disable Unused Content Types

You can disable unused Porto post types

• Portfolio
• Member
• Event
• FAQ

This

• Reduces server response time
• Prevents unnecessary thumbnail generation

After changing, use Regenerate Thumbnails to remove unused image files.

Disable Unused Template Builders

Disable builders you do not use

• Block
• Header
• Footer
• Single Product
• Product Archive
• Archive
• Single
• Post Type

This reduces backend overhead and frontend assets.

Advanced Optimize Options

How This Works with WP Rocket

• Porto handles theme-level optimization
• WP Rocket handles caching, CDN, database, and delivery
• Avoid duplicating minification or delay features across both tools

Images are one of the biggest performance bottlenecks on WooCommerce websites and the most common cause of blurry product thumbnails. In Porto-based sites, image quality depends on three different layers working together:

1. WooCommerce image settings
2. WordPress media image sizes
3. Porto widget image size priorities

If any of these are misconfigured, WooCommerce will load the closest available image size, which often results in upscaled or blurry images.

This step explains how to fix image blurring and improve performance correctly.

WooCommerce generates the core product image sizes used across shop-related pages.

Go to Appearance → Customize → WooCommerce → Product Images , You will find

Key Notes

• These values define the base image sizes generated by WooCommerce
• Larger values improve sharpness on large screens
• Overly large sizes increase file size and slow down the site

Recommended Practice

• Match widths to your actual shop layout
• Avoid “future-proof” oversized values
• Always regenerate thumbnails after changes

⚠️ These settings are especially important for WooCommerce shop demos and archive layouts.

Post images (blog, archives, blocks) use WordPress media sizes.

Go to Dashboard → Settings → Media and Configure

• Thumbnail size
• Medium size
• Large size

Use cases

• Blog posts
• Blog archives
• Post grids
• Gutenberg blocks

These sizes are independent from WooCommerce but still affect overall image quality and loading behavior.

Porto widgets have higher priority than WooCommerce image settings.

If a Porto widget specifies an image size

• WooCommerce settings are ignored
• Porto will load the closest matching image size generated by WooCommerce

This applies to widgets such as

• Porto Posts Grid
• Porto Archive Posts Grid
• Porto Products
• Porto Carousel
• Porto Blog elements

Common Cause of Blurry Images

• WooCommerce image width is large
• Porto widget image size is set too small
• WordPress loads a smaller image and stretches it

What to Check

• Edit the Porto widget
• Review the Image Size option
• Ensure it matches or exceeds the visual display size

Porto always chooses the nearest available image size, not necessarily the WooCommerce one.

Correct dimensions alone do not guarantee performance. Uncompressed images can still be slow and heavy.

Before uploading any images

Recommended Tool

• TinyPNG - https://tinypng.com

Why Compress Images?

• Reduces image size by 50–80%
• Maintains visual quality
• Ideal for WooCommerce products and blog images

Recommended File Sizes

⚠️ Caching, lazy load, and CDN do not reduce image file size — compression must happen first.

Any change to:

• WooCommerce image sizes
• WordPress media sizes
• Porto widget image size strategy

Requires thumbnail regeneration.

Recommended Plugin

• Regenerate Thumbnails

Steps

1. Install and activate the plugin
2. Run thumbnail regeneration

3. Clear

   • WP Rocket cache
   • WooCommerce transients
   • Browser cache

Regeneration recreates sizes but does not compress images — compression must be done beforehand.

• Porto fully supports WebP
• WebP reduces image size by 20–40%
• Works well with WP Rocket and CDNs

If enabled

• Verify fallback support for Safari/older browsers
• Test product and shop pages carefully

Always follow this order

1. Compress images (TinyPNG or similar)
2. Upload images
3. Configure WooCommerce Product Images
4. Configure WordPress Media sizes
5. Verify Porto widget image sizes
6. Regenerate thumbnails
7. Clear cache and CDN

Skipping any step may result in

• Blurry images
• Large page weight
• Poor Core Web Vitals

WP Rocket is a powerful caching and performance optimization plugin that improves loading times, reduces server load, and solves many common speed issues. When used together with Porto’s native optimizations, it delivers excellent Core Web Vitals and real-world performance.

WP Rocket automatically enables baseline caching and compression features, and allows fine-grained control over CSS/JS, media, CDN, database, and advanced performance rules.

1. Purchase and download WP Rocket from the official site - https://wp-rocket.me
2. In your WordPress dashboard, upload and install the plugin in Plugins → Add New → Upload Plugin
3. Activate WP Rocket

4. WP Rocket will automatically enable several baseline optimizations, including

   • Page cache (desktop + mobile)
   • Browser caching
   • GZIP compression
   • Preload and prefetch hints
     (See WP Rocket documentation for default features.)

Go to Settings → WP Rocket → File Optimization

These settings control CSS and JavaScript handling.

5.2.1 Minify CSS/JS

• CSS Minify: Reduces CSS file size by stripping whitespace/comments
  WP Rocket docs: Minify CSS files
• JavaScript Minify: Reduces JS file size

These are safe first steps — they shrink files and reduce download time.

5.2.2 Load JavaScript Deferred

• Defers JS loading until after initial HTML/CSS is parsed
  This reduces render-blocking resources.

5.2.3 Delay JavaScript Execution

• Delays JS until user interaction, improving Largest Contentful Paint (LCP)
• If needed, add exceptions under Excluded JavaScript Files (e.g., theme or builder scripts)

WP Rocket docs recommend testing after enabling, and using exclusions when needed.

Go to Settings → WP Rocket → Media

5.3.1 LazyLoad for Images

• Loads images only when visible in viewport
  Helps reduce initial page weight.

5.3.2 CSS Background Images LazyLoad

• WP Rocket also lazyloads CSS background images (defers background images not immediately seen)

5.3.3 LazyLoad for Iframes & Videos

• Defers video/iframe loading until needed
• Replaces YouTube embeds with preview images

Tip: Test iframes after enabling — lazyload can affect scripts in embedded players.

Go to Settings → WP Rocket → Preload

• Preload Cache: Forces early cache creation
• Preload Links: Preloads links on hover for faster navigation

These settings improve perceived speed and make cache more effective on first load.

Go to Settings → WP Rocket → CDN

WP Rocket supports CDN integration for popular providers (e.g., KeyCDN, RocketCDN).
Documentation: Using WP Rocket with a CDN

1. Enable Content Delivery Network
2. Enter your CDN URL (provided by your CDN service)
3. Save and clear cache

This ensures CSS/JS/image assets are served from fast, geographically distributed servers.

Go to Settings → WP Rocket → Advanced Rules

Useful in complex sites

• Never cache URLs — e.g., cart, checkout, wishlist
• Never cache cookies or user agents
• Always purge URLs on update

Advanced rules help you protect dynamic pages while caching everything else.

Go to Settings → WP Rocket → Database / Heartbeat

• Database Cleanup: Removes revision/post drafts or transients
• Heartbeat Control: Reduces admin-side REST calls

These reduce database overhead, improving backend and frontend performance.

After configuring all options

• Click Clear WP Rocket Cache
• Optionally use Preload Cache

This ensures the site loads optimized assets on every visit.

A Content Delivery Network (CDN) improves loading times for visitors around the world.

What CDN Does

• Serves images, CSS, JS from nearby servers
• Reduces server load
• Improves Time to First Byte (TTFB)

CDN Setup with WP Rocket

• Enable CDN in WP Rocket settings
• Add your CDN URL
• Clear cache and verify asset URLs

Porto works seamlessly with most CDNs without additional configuration.

Render-Blocking Resources

• Disable unused Gutenberg styles
• Avoid duplicated Google Fonts
• Use Porto’s typography settings to manage fonts centrally

Reduce Unused JavaScript

• Remove unused plugins
• Avoid globally loading sliders or heavy libraries
• Use Porto native elements instead of third-party widgets

Reduce Initial Server Response Time

• Ensure caching is enabled
• Avoid excessive database queries
• Use optimized hosting

Performance is not a one-time task.

Recommended Routine

• Clear cache after major updates
• Test performance monthly
• Audit plugins regularly
• Monitor Core Web Vitals in Google Search Console

Porto is built with performance in mind, but the best results come from:

• Clean content structure
• Proper use of Porto’s native optimization features
• A well-configured caching layer like WP Rocket

When optimized correctly, Porto websites consistently achieve:

• Fast real-world loading times
• Excellent Core Web Vitals
• Stable layouts and smooth interactions

This approach prioritizes long-term performance, not just short-term PageSpeed scores.