{"id":59,"date":"2025-10-14T13:38:26","date_gmt":"2025-10-14T13:38:26","guid":{"rendered":"https:\/\/docs.digiflash.me\/?post_type=docs&#038;p=59"},"modified":"2025-10-14T13:38:26","modified_gmt":"2025-10-14T13:38:26","slug":"theme-performance-optimization","status":"publish","type":"docs","link":"https:\/\/docs.digiflash.me\/docs\/theme-performance-optimization\/","title":{"rendered":"Theme Performance Optimization"},"content":{"rendered":"\n<p>DigiFlash is built for speed, but optimizing your WordPress installation and server configuration can significantly improve performance. Caching is the most effective way to accelerate your website, reducing server load and delivering content faster to visitors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding Website Caching<\/h2>\n\n\n\n<p>Caching stores static versions of your pages, eliminating the need to regenerate content on every request. Without caching, WordPress processes PHP scripts, queries the database, and assembles HTML for each visitor. With caching, pre-built pages are served instantly.<\/p>\n\n\n\n<p>DigiFlash&#8217;s lightweight architecture benefits greatly from caching because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Block themes generate minimal overhead<\/li>\n\n\n\n<li>Static HTML files load faster than dynamic PHP<\/li>\n\n\n\n<li>Reduced database queries improve server response time<\/li>\n\n\n\n<li>CSS and JavaScript files can be cached separately<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Using WP Rocket for WordPress Caching<\/h2>\n\n\n\n<p>WP Rocket is a premium caching plugin that provides comprehensive performance optimization without complex configuration. It works seamlessly with DigiFlash and requires minimal setup.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installing WP Rocket<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Purchase a license from wp-rocket.me<\/li>\n\n\n\n<li>Download the plugin ZIP file<\/li>\n\n\n\n<li>Navigate to <strong>Plugins > Add New > Upload Plugin<\/strong><\/li>\n\n\n\n<li>Upload and activate WP Rocket<\/li>\n<\/ol>\n\n\n\n<p>WP Rocket automatically enables essential caching features upon activation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page Caching<\/h3>\n\n\n\n<p>WP Rocket creates static HTML files of your pages and serves them to visitors. This is enabled by default after activation.<\/p>\n\n\n\n<p>The plugin automatically clears cache when you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Publish or update posts\/pages<\/li>\n\n\n\n<li>Change theme settings in the Site Editor<\/li>\n\n\n\n<li>Update DigiFlash or plugins<\/li>\n<\/ul>\n\n\n\n<p>You can manually clear cache from <strong>Settings &gt; WP Rocket &gt; Clear Cache<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">File Optimization<\/h3>\n\n\n\n<p>Enable CSS and JavaScript optimization in <strong>Settings &gt; WP Rocket &gt; File Optimization<\/strong>:<\/p>\n\n\n\n<p><strong>CSS Files:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable &#8220;Minify CSS files&#8221; to reduce file size<\/li>\n\n\n\n<li>Enable &#8220;Combine CSS files&#8221; to reduce HTTP requests<\/li>\n\n\n\n<li>Enable &#8220;Optimize CSS delivery&#8221; for render-blocking CSS<\/li>\n<\/ul>\n\n\n\n<p><strong>JavaScript Files:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable &#8220;Minify JavaScript files&#8221;<\/li>\n\n\n\n<li>Enable &#8220;Combine JavaScript files&#8221; (test thoroughly as this can break some plugins)<\/li>\n\n\n\n<li>Enable &#8220;Load JavaScript deferred&#8221; to prevent render blocking<\/li>\n<\/ul>\n\n\n\n<p>DigiFlash&#8217;s minimal CSS and JavaScript benefit from these optimizations without compatibility issues.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Media Optimization<\/h3>\n\n\n\n<p>Configure lazy loading in <strong>Settings &gt; WP Rocket &gt; Media<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable &#8220;Enable for images&#8221; to defer off-screen images<\/li>\n\n\n\n<li>Enable &#8220;Enable for iframes and videos&#8221; for embedded content<\/li>\n\n\n\n<li>Replace YouTube iframes with preview image<\/li>\n<\/ul>\n\n\n\n<p>Lazy loading significantly improves initial page load times, especially on pages with DigiFlash patterns containing multiple images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Database Optimization<\/h3>\n\n\n\n<p>WP Rocket includes database cleanup tools in <strong>Settings &gt; WP Rocket &gt; Database<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clean post revisions (DigiFlash creates revisions during Site Editor work)<\/li>\n\n\n\n<li>Remove auto-drafts<\/li>\n\n\n\n<li>Delete trashed posts<\/li>\n\n\n\n<li>Clean transients<\/li>\n<\/ul>\n\n\n\n<p>Schedule automatic weekly cleanups to maintain database efficiency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CDN Integration<\/h3>\n\n\n\n<p>WP Rocket supports CDN configuration. Enter your CDN URL in <strong>Settings &gt; WP Rocket &gt; CDN<\/strong> to serve static assets from edge servers globally.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementing Cloudflare<\/h2>\n\n\n\n<p>Cloudflare is a content delivery network (CDN) and security service that sits between your server and visitors. It caches content on global edge servers, reducing latency and improving load times worldwide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Up Cloudflare<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a free account at cloudflare.com<\/li>\n\n\n\n<li>Add your domain to Cloudflare<\/li>\n\n\n\n<li>Update your domain&#8217;s nameservers to Cloudflare&#8217;s nameservers (provided during setup)<\/li>\n\n\n\n<li>Wait for DNS propagation (typically 24-48 hours)<\/li>\n<\/ol>\n\n\n\n<p>Once active, Cloudflare automatically caches static assets like images, CSS, and JavaScript files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cloudflare Caching Levels<\/h3>\n\n\n\n<p>Configure caching in <strong>Caching &gt; Configuration<\/strong>:<\/p>\n\n\n\n<p><strong>Standard<\/strong> (default): Caches static files only (images, CSS, JS)<br><strong>Ignore Query String<\/strong>: Treats URLs with query strings as the same file<br><strong>No Query String<\/strong>: Removes query strings before caching<\/p>\n\n\n\n<p>For DigiFlash, use &#8220;Standard&#8221; or &#8220;Ignore Query String&#8221; depending on whether you use query parameters for tracking.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Browser Cache TTL<\/h3>\n\n\n\n<p>Set how long browsers cache files locally in <strong>Caching &gt; Configuration<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minimum: 30 minutes (for frequently updated sites)<\/li>\n\n\n\n<li>Recommended: 4 hours to 1 day (for stable sites)<\/li>\n\n\n\n<li>Maximum: 1 year (for truly static assets)<\/li>\n<\/ul>\n\n\n\n<p>DigiFlash&#8217;s CSS and JavaScript change infrequently, making longer TTL values effective.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Caching HTML with Cloudflare Page Rules<\/h2>\n\n\n\n<p>By default, Cloudflare does not cache HTML pages. Create page rules to cache HTML for maximum performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating an HTML Cache Rule<\/h3>\n\n\n\n<p>Navigate to <strong>Rules &gt; Page Rules<\/strong> and click <strong>Create Page Rule<\/strong>.<\/p>\n\n\n\n<p><strong>Pattern:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yourdomain.com\/*<\/code><\/pre>\n\n\n\n<p>The asterisk matches all pages on your domain.<\/p>\n\n\n\n<p><strong>Settings:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cache Level<\/strong>: Cache Everything<\/li>\n\n\n\n<li><strong>Edge Cache TTL<\/strong>: 2 hours to 1 day (depending on update frequency)<\/li>\n\n\n\n<li><strong>Browser Cache TTL<\/strong>: 4 hours<\/li>\n<\/ul>\n\n\n\n<p>Click <strong>Save and Deploy<\/strong> to activate the rule.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cache Everything Explanation<\/h3>\n\n\n\n<p>&#8220;Cache Everything&#8221; tells Cloudflare to cache HTML pages, not just static assets. This dramatically reduces requests to your WordPress server.<\/p>\n\n\n\n<p>With this rule:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First visitor requests page from your server<\/li>\n\n\n\n<li>Cloudflare caches the HTML response<\/li>\n\n\n\n<li>Subsequent visitors receive cached HTML from Cloudflare&#8217;s edge<\/li>\n\n\n\n<li>Your server handles significantly fewer requests<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Appropriate Cache TTL<\/h3>\n\n\n\n<p>Edge Cache TTL determines how long Cloudflare stores cached pages before checking for updates:<\/p>\n\n\n\n<p><strong>Short TTL (1-2 hours):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Frequently updated content<\/li>\n\n\n\n<li>News sites or blogs<\/li>\n\n\n\n<li>Active e-commerce sites<\/li>\n<\/ul>\n\n\n\n<p><strong>Medium TTL (4-12 hours):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Business websites<\/li>\n\n\n\n<li>Portfolio sites<\/li>\n\n\n\n<li>Most DigiFlash sites<\/li>\n<\/ul>\n\n\n\n<p><strong>Long TTL (1+ days):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Static landing pages<\/li>\n\n\n\n<li>Documentation sites<\/li>\n\n\n\n<li>Infrequently updated content<\/li>\n<\/ul>\n\n\n\n<p>Choose based on your update frequency. DigiFlash sites typically work well with 4-8 hour TTL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bypassing Cache for Admin and Dynamic Pages<\/h3>\n\n\n\n<p>Create additional page rules to exclude dynamic content from caching:<\/p>\n\n\n\n<p><strong>Rule 1: Bypass Admin Area<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pattern: <code>yourdomain.com\/wp-admin\/*<\/code><\/li>\n\n\n\n<li>Setting: Cache Level &#8211; Bypass<\/li>\n<\/ul>\n\n\n\n<p><strong>Rule 2: Bypass Login<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pattern: <code>yourdomain.com\/wp-login.php<\/code><\/li>\n\n\n\n<li>Setting: Cache Level &#8211; Bypass<\/li>\n<\/ul>\n\n\n\n<p><strong>Rule 3: Bypass Cart\/Checkout (if using WooCommerce)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pattern: <code>yourdomain.com\/cart\/*<\/code><\/li>\n\n\n\n<li>Setting: Cache Level &#8211; Bypass<\/li>\n<\/ul>\n\n\n\n<p>Page rules execute in order from top to bottom. Place bypass rules before the &#8220;Cache Everything&#8221; rule.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Purging Cloudflare Cache<\/h3>\n\n\n\n<p>When you update content in DigiFlash&#8217;s Site Editor, purge Cloudflare&#8217;s cache:<\/p>\n\n\n\n<p><strong>Manual Purge:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Caching > Configuration<\/strong><\/li>\n\n\n\n<li>Click <strong>Purge Everything<\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>Automatic Purge:<\/strong> Install the &#8220;Cloudflare&#8221; plugin for WordPress:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Plugins > Add New<\/strong><\/li>\n\n\n\n<li>Search for &#8220;Cloudflare&#8221;<\/li>\n\n\n\n<li>Install and activate the official Cloudflare plugin<\/li>\n\n\n\n<li>Enter your Cloudflare API credentials<\/li>\n\n\n\n<li>Enable &#8220;Automatic Cache Purge&#8221;<\/li>\n<\/ol>\n\n\n\n<p>The plugin clears Cloudflare cache automatically when you publish or update pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Combining WP Rocket and Cloudflare<\/h2>\n\n\n\n<p>Using WP Rocket and Cloudflare together creates a multi-layer caching strategy:<\/p>\n\n\n\n<p><strong>Layer 1: Browser Cache<\/strong> Visitor&#8217;s browser stores files locally<\/p>\n\n\n\n<p><strong>Layer 2: Cloudflare Edge Cache<\/strong> Cloudflare edge servers serve cached content globally<\/p>\n\n\n\n<p><strong>Layer 3: WP Rocket Page Cache<\/strong> WP Rocket serves static HTML if request reaches your server<\/p>\n\n\n\n<p><strong>Layer 4: DigiFlash<\/strong> Fast block theme with minimal overhead as final fallback<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configuring WP Rocket with Cloudflare<\/h3>\n\n\n\n<p>In <strong>Settings &gt; WP Rocket &gt; Add-ons<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable &#8220;Cloudflare&#8221; add-on<\/li>\n\n\n\n<li>Connect your Cloudflare account<\/li>\n\n\n\n<li>Enable automatic cache clearing<\/li>\n<\/ul>\n\n\n\n<p>This ensures WP Rocket purges both local cache and Cloudflare cache when you update content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cache Hierarchy Optimization<\/h3>\n\n\n\n<p>Configure cache durations in descending order:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Browser Cache<\/strong>: 1 day (longest)<\/li>\n\n\n\n<li><strong>Cloudflare Edge Cache<\/strong>: 8 hours (medium)<\/li>\n\n\n\n<li><strong>WP Rocket Cache<\/strong>: Unlimited (refreshes on content update)<\/li>\n<\/ul>\n\n\n\n<p>This hierarchy ensures maximum performance while allowing reasonable content freshness.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Monitoring Performance<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Testing Load Times<\/h3>\n\n\n\n<p>Use these tools to measure improvement:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GTmetrix<\/strong>: Detailed performance analysis<\/li>\n\n\n\n<li><strong>Google PageSpeed Insights<\/strong>: Core Web Vitals scoring<\/li>\n\n\n\n<li><strong>Pingdom Tools<\/strong>: Global speed testing<\/li>\n\n\n\n<li><strong>WebPageTest<\/strong>: Advanced performance metrics<\/li>\n<\/ul>\n\n\n\n<p>Test before and after implementing caching to quantify improvements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Expected Results<\/h3>\n\n\n\n<p>With WP Rocket and Cloudflare properly configured, DigiFlash sites typically achieve:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First Contentful Paint: &lt; 0.5 second<\/li>\n\n\n\n<li>Largest Contentful Paint: &lt; 2 seconds<\/li>\n\n\n\n<li>Time to Interactive: &lt; 3 seconds<\/li>\n\n\n\n<li>Overall page load: &lt; 2 seconds (global average)<\/li>\n<\/ul>\n\n\n\n<p>These metrics satisfy Google&#8217;s Core Web Vitals requirements and provide excellent user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cache Troubleshooting<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Stale Content After Updates<\/h3>\n\n\n\n<p>If visitors see outdated content after publishing changes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Purge WP Rocket cache: <strong>Settings > WP Rocket > Clear Cache<\/strong><\/li>\n\n\n\n<li>Purge Cloudflare cache: <strong>Caching > Purge Everything<\/strong><\/li>\n\n\n\n<li>Clear browser cache using Ctrl+Shift+R (Cmd+Shift+R on Mac)<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Broken Layouts or Missing Styles<\/h3>\n\n\n\n<p>If pages display incorrectly after enabling caching:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Disable &#8220;Combine CSS files&#8221; in WP Rocket<\/li>\n\n\n\n<li>Disable &#8220;Combine JavaScript files&#8221; in WP Rocket<\/li>\n\n\n\n<li>Clear all caches and test again<\/li>\n\n\n\n<li>Re-enable features one at a time to identify the culprit<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Dynamic Content Not Updating<\/h3>\n\n\n\n<p>For user-specific content (logged-in users, shopping carts):<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ensure WP Rocket&#8217;s &#8220;Enable caching for logged-in users&#8221; is disabled<\/li>\n\n\n\n<li>Add cart\/account pages to Cloudflare&#8217;s bypass rules<\/li>\n\n\n\n<li>Use AJAX for dynamic elements that update without page refresh<\/li>\n<\/ol>\n\n\n\n<p>The combination of DigiFlash&#8217;s lightweight architecture, WP Rocket&#8217;s comprehensive caching, and Cloudflare&#8217;s global CDN creates an exceptionally fast website. Most DigiFlash sites with proper caching configuration load in under 1 seconds globally, providing superior user experience and SEO benefits.<\/p>\n","protected":false},"featured_media":0,"template":"","docs_category":[8],"class_list":["post-59","docs","type-docs","status-publish","hentry","docs_category-developer"],"_links":{"self":[{"href":"https:\/\/docs.digiflash.me\/wp-json\/wp\/v2\/docs\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.digiflash.me\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.digiflash.me\/wp-json\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/docs.digiflash.me\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/docs.digiflash.me\/wp-json\/wp\/v2\/docs_category?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}