Performance Optimization

  1. General Optimization
  2. Custom Development Theme
  3. Builder Based Theme

General

  • Back-Up Before Optimization
    • Check Compatibility & Update
      • WP
      • Plugins
      • Themes
  • Database Cleanup
      • Revision Clear
      • Use plugins like WP-Optimize or WP-Sweep to clean up and optimize your WordPress database
  • Installed Plugins Checks
      • Check Plugin and remove unnecessary ones.
        • Ex. Only One for Form Integration
        • Ex. One For Cache Options
        • After Deactivation Plugin – Site Check – Production Testing
  • Enable Caching
      • Utilize caching Free plugins like WP Super Cache, W3 Total Cache, and Paid like WP Rocket to generate static HTML files and reduce server load.
      • Minify CSS and JavaScript files to reduce file sizes and decrease loading times.
      • Concatenate multiple CSS and JavaScript files into a single file to reduce the number of HTTP requests. – Optional
      • Configure caching settings based on your site’s needs and test for compatibility with other plugins.
  • Optimize Image
      • Compress images to reduce file sizes without sacrificing quality.
        • Smush, Tiny PNG
      • Choose JPEG/WebP instead of PNG
      • Use lazy loading to defer off-screen images and improve initial page load times. ( Never Lazy Load Images above fold Screen )
      • Serve scaled images to fit the dimensions required by your site’s layout.
    • Utilize Content Delivery Networks (CDNs):
      • Integrate a CDN like Cloudflare or Amazon CloudFront to distribute static content and reduce latency for global visitors.
      • Configure CDN settings to cache static assets and optimize delivery performance.
  • Optimize Server Configuration:
      • Optimize PHP and MySQL Configuration:
        • PHP Compatibility + Version Update
        • MySQL Compatibility + Version Update
        • Adjust PHP memory limits, execution time limits, and MySQL query cache size based on your site’s requirements and traffic levels.
      • Ensure your server configuration is optimized for WordPress by adjusting PHP settings, server caching, and gzip compression.
      • Consider using a hosting provider with optimized server configurations for WordPress sites.
      • Server RAM + SSD (Load Monitor) – Requirement
  • Implement Browser Caching:
      • Configure browser caching headers to instruct browsers to cache static assets like images, CSS, and JavaScript files.
      • Set expiration times for cached assets to reduce the number of HTTP requests for returning visitors.
  • Monitor Performance Metrics:
      • Use tools like New Relic, Pingdom, or Google PageSpeed Insights to monitor performance metrics and identify areas for improvement.
      • Monitor server response times, page load times, and resource utilization to optimize performance.
  • Load Only Necessary Assets:
    • Ensure that only the assets required for each specific page are loaded. For example, if the home page uses a Slick slider, load the Slick slider library there, but avoid loading it on pages like “About Us” if it’s not used.
    • Call Plugin related CSS and JS only on Home or Landing pages.(If applicable)
      • Eg. SmashBaloon Insta Feeds Plugin, Contact Form etc

Custom Development Theme Guidelines

  • Leverage Transient API for Efficient Data Fetching:
      • Use the Transient API to cache and fetch page settings data in a single query, where applicable, to improve performance.
  • Manage Conditional Assets:
      • Write and manage CSS/js files conditionally to ensure only the necessary styles are loaded on each page, reducing unnecessary CSS bloat.
  • Preload Critical Assets:
      • Preload critical assets such as images, CSS, JavaScript, and fonts to improve initial load performance and render the most important parts of the page faster.
  • Optimize Image Tags:
      • Add loading=”lazy” and decoding=”async” attributes to image tags in off-screen sections to defer loading of images until they are needed.
  • Minimize HTML Tags in Tab Sections: ( Recommend if Large content or Many Tabs available )
      • Reduce the number of HTML tags used in tab sections. For tabs, only generate the HTML for the first (active) tab initially. The content for other tabs should be generated using AJAX or JavaScript as needed.
  • Inline Background Images:
      • Use the background-image CSS property inline, rather than in external CSS files, to reduce additional HTTP requests.
  • Load Scripts on User Interaction: (Only for those who run only in the background like Contact Validation – never for Slick as it has front layout interaction )
    • Defer loading certain scripts, such as CF7 script.js and CookieBanner, until user interaction or when they are actually needed.

Builder Based Theme

  • Limit the Use of Plugins:
      • Deactivate or remove unnecessary plugins to reduce overhead and potential conflicts (Once confirmed with Senior).
      • Choose lightweight and well-coded plugins for essential functionality.
  • Optimize Image Loading:
      • Compress images to reduce file sizes without sacrificing quality.
      • Use lazy loading to defer off-screen images and improve initial page load times.
      • Serve scaled images to fit the dimensions required by your site’s layout.
  • Minify CSS and JavaScript Files:
    • Minify CSS and JavaScript files to reduce file sizes and decrease loading times.
    • Concatenate multiple CSS and JavaScript files into a single file to reduce the number of HTTP requests.
    • Call Plugin related CSS and JS only on required pages