Running Local Storage Cache is generally recommended when using plugins like Elementor with WordPress on Azure. Elementor, as a page builder, produces dynamic and resource-heavy pages that can benefit significantly from caching to improve load times, reduce server load, and provide a smoother user experience. Here’s why Local Storage Cache is beneficial with Elementor and some tips for setting it up:

Why Local Storage Cache Works Well with Elementor

1. Reduces Load from Heavy Assets:
   • Elementor adds custom styles, scripts, and widgets to your pages, which increases the size and complexity of each page. Caching these assets locally allows for quicker load times, as the content is served directly from local storage instead of being dynamically generated every time.
2. Minimizes Repeated Rendering:
   • Elementor’s content is dynamically rendered, meaning WordPress and PHP have to generate HTML on each request. Caching stores this HTML in advance so that future requests can serve it directly without backend processing, significantly reducing the load on your servers.
3. Improves User Experience for Visitors:
   • Cached Elementor pages, particularly on high-traffic sites, mean quicker load times for users. This is essential for keeping visitors engaged and reducing bounce rates, especially since Elementor pages are often visual and content-rich.

Best Practices for Running Local Storage Cache with Elementor

1. Use a Caching Plugin Compatible with Elementor:
   • Plugins like W3 Total Cache, WP Super Cache, or LiteSpeed Cache (if your Azure setup supports it) can be configured to cache Elementor’s output and assets. Elementor is compatible with most popular caching plugins, and these plugins will typically cache the static HTML, CSS, and JavaScript generated by Elementor.
2. Clear Cache on Content Updates:
   • Whenever you update or publish new content with Elementor, clear the cache to ensure changes are reflected immediately. Many caching plugins offer an “automatic cache purge” option on post updates, which can help ensure that your cached content stays current.
3. Optimize Cache Settings for Elementor Assets:
   • CSS and JavaScript: Elementor generates custom CSS and JavaScript for each page. Configure your caching plugin to minify and combine these files if possible to reduce load times.
   • Image and Media Caching: Use caching for Elementor’s media elements, like images and videos, to reduce load times. Leveraging Azure Blob Storage for these assets, in combination with Local Storage Cache, is ideal for optimal performance.
4. Use Browser Caching for Repeated Visitors:
   • For assets that don’t change often (like images, CSS, and JavaScript), enable browser caching. This way, visitors only need to load these assets once, and subsequent visits will pull them from the user’s own cache, speeding up the experience.
5. Consider a CDN if Using Elementor with Media-Heavy Pages:
   • Elementor pages with numerous media assets can benefit from an Azure CDN. A CDN will cache and deliver static content from servers closer to the user’s location, reducing latency and load times for visitors across different regions.

Additional Considerations

• Cache Duration: Set an appropriate cache duration. Elementor-driven sites that are frequently updated may need shorter cache durations to prevent outdated content. However, if the content remains mostly static, a longer cache duration can improve performance further.
• Use Staging Environments for Testing:
  • When caching is enabled, changes in Elementor might not reflect immediately. Test your cache settings in a staging environment to ensure that content updates display as expected without excessive cache purges.

Summary

Local Storage Cache is beneficial for Elementor-powered sites on Azure because it addresses the increased load Elementor adds. Properly configured caching will enhance speed, reduce load, and improve user experience, particularly on pages with visual and interactive content. When combined with good caching practices (like browser caching, cache clearing on updates, and possibly a CDN), you’ll get a well-optimized setup that maximizes Elementor’s potential without sacrificing performance.

The post Recommended to run Local Storage Cache appeared first on Kloudstack Hosting.

When starting development on your WordPress site with our pre-configured stack, it comes with a set of preloaded plugins, including W3 Total Cache. This caching plugin is pre-configured to optimize performance right out of the box. However, depending on your specific needs, especially when using the Elementor page builder plugin, you may need to make a few adjustments to ensure everything works smoothly.

In this post, we’ll guide you through the key configurations you should keep in mind when working with Elementor and W3 Total Cache.

Why Update the W3 Total Cache Configuration?

By default, W3 Total Cache is set to handle general optimization tasks like caching, minification, and CDN integration. However, Elementor generates custom CSS files for its pages and widgets, which are stored in a specific folder structure within your WordPress site. If these files are not properly included in your caching and CDN settings, you might run into issues like missing styles or delays in loading page elements.

Where Elementor Stores Custom CSS Files

When you create a page or edit content using Elementor, it generates several custom CSS files, which are saved in the following directory:

/wp-content/uploads/elementor/css/

These files need to be handled correctly by W3 Total Cache to ensure they are served quickly to visitors. There are two options for managing these CSS files in W3 Total Cache: including them in the CDN Custom File List or excluding them in the Rejected Files List to load from local storage.

Adding Elementor’s Custom CSS Files to the CDN Custom File List

At KloudStack, we use an integrated Blob Storage container with W3 Total Cache for serving static files via a Content Delivery Network (CDN). This setup is optimized for high-performance websites, but you’ll need to ensure Elementor’s custom CSS files are included in the CDN.

To do this, follow these steps to add the correct file paths to the Custom File List in W3 Total Cache:

1. Go to your WordPress dashboard and navigate to Performance > General Settings.
2. Scroll down to the CDN section, click on Advanced Settings and locate the Custom File List input field.
   
   Screenshot
   
   
3. Add the following lines to include Elementor’s custom CSS files:

{wp_content_dir}/uploads/elementor/**/*<br>{wp_content_dir}/uploads/elementor/css/**/*.* <br>{wp_content_dir}/uploads/elementor/custom/css/**/*.*<br>

4. Click Host Custom Files to upload the files to the Blob Storage container.

This ensures that all Elementor custom CSS files are uploaded to the CDN for fast, efficient delivery to your site visitors.

Loading CSS Files from Local Storage for Development

During development, especially when you’re in the staging phase, it can be beneficial to load Elementor’s custom CSS files from local storage rather than the CDN. This helps speed up the development process by reducing CDN calls and ensuring immediate changes are visible.

To set this up:

1. In the W3 Total Cache settings, go to Performance > General Settings.
2. Scroll down to the CDN section, click on Advanced Settings and find the Rejected Files input field.
   
   Sceenshot
   
   
3. Add the following lines to reject Elementor’s custom CSS files from being cached or served via CDN:

{wp_content_dir}/uploads/elementor/**/*<br>{wp_content_dir}/uploads/elementor/css/**/*.* <br>{wp_content_dir}/uploads/elementor/custom/css/**/*.*<br>

By doing this, Elementor’s CSS files will load directly from the local storage of your web server, ensuring that any updates made during development are reflected instantly without CDN delays.

Best Practices for Development vs. Production

When working in a staging environment:

• It’s generally best to load Elementor CSS files from local storage during development for faster iterations.
• Use the Rejected Files approach during this phase.

When your site is ready for production:

• Be sure to revert the files to be handled by the CDN for optimal performance.
• Add the CSS files to the CDN Custom File List to ensure they are distributed efficiently through your Blob Storage container.

Conclusion

Setting up W3 Total Cache and Elementor properly is crucial for ensuring a smooth development and production experience. While our pre-configured stack takes care of many optimizations, adjusting the handling of Elementor’s custom CSS files can make a big difference, especially as your site grows. Follow these steps to ensure you’re getting the best performance and development workflow for your WordPress site.

If you need further assistance or have any questions, feel free to reach out to our support team.

The post How to Set Up W3 Total Cache & Elementor Web Builder Plugin for Your Development Stack appeared first on Kloudstack Hosting.