Month: July 2024

In today’s digital landscape, the speed at which your website loads can make or break user experience. A sluggish site not only frustrates visitors but also impacts your search engine rankings and overall site performance. That’s where BerqWP comes into play. Our plugin is designed to tackle speed optimization challenges head-on, but to fully harness its power, understanding the best practices for configuring it is essential.

In this guide, we’ll walk you through some of the most effective ways to use BerqWP to maximize your WordPress site’s performance. We’ll break down key settings, explain their impact on page speed, and provide actionable tips to ensure that your site runs smoothly and efficiently. Whether you’re a web developer striving for peak performance or a site owner looking to enhance user experience, these best practices will help you get the most out of BerqWP.

1. Disable WebP Images

One of BerqWP’s standout features is its ability to reduce image file sizes by converting them into the WebP format. WebP is an image format developed by Google that offers superior compression and quality compared to traditional formats like JPEG and PNG. By converting your images to WebP, you can significantly cut down on file sizes, which leads to faster page load times and an overall improved user experience.

Potential Downsides: Browser Support

Despite its advantages, WebP is not universally supported across all browsers. While major browsers like Google Chrome, Firefox, and Edge support WebP, others, such as Safari (especially older versions), have historically had limited or no support. This can lead to issues with displaying images correctly for users on unsupported browsers.

To help you visualize the browser support for WebP images, here’s a screenshot from Can I Use, which provides a comprehensive overview of WebP compatibility across different browsers:

Note: The above link will redirect you to the Can I Use website for the most up-to-date information.

When to Disable WebP Images

There are scenarios where disabling WebP images might be beneficial:

1. Broader Compatibility Needs: If a significant portion of your audience uses browsers that do not support WebP, disabling this feature might ensure a more consistent user experience across all devices.

2. Fallback Issues: If you’re experiencing issues with fallback images not displaying correctly, disabling WebP conversion might be a temporary solution until these issues are resolved.

How to Disable WebP in BerqWP:

1. Navigate to the BerqWP settings page in your WordPress dashboard.

2. Click the “Image Optimization” tab.

3. Select the “Disable WebP images” option and save the changes.

2. Switch to “Aggressive” Optimization Mode

BerqWP provides four distinct optimization modes: Basic, Medium, Blaze, and Aggressive. By default, the optimization mode is set to Medium, which strikes a perfect balance between performance and stability, making it suitable for a wide range of websites.

However, for those aiming to achieve top-tier technical SEO and exceptional PageSpeed scores on both mobile and desktop, the “Aggressive” optimization mode is a game-changer. This mode is designed to deliver the highest level of performance by:

1. Loading Crucial Elements Early: It prioritizes the loading of key web page elements, such as the Largest Contentful Paint (LCP) element and critical CSS, right from the initial page load.

2. Deferring Non-Critical Resources: JavaScript and CSS files are delayed until the user interacts with the page, reducing the initial load time and enhancing perceived performance.

With the Aggressive mode, even content-heavy websites on robust servers can easily achieve 90+ PageSpeed scores on both mobile and desktop devices. This mode ensures that your site is not only super-fast but also ready to use as quickly as possible.

For reference, here’s a before and after comparison of a website optimized using the Aggressive mode:

How to Enable Aggressive Optimization Mode

1. Navigate to the BerqWP settings page in your WordPress dashboard.

2. Drag the optimization mode slider to the Aggressive setting.

3. Click the save button to apply the new settings.

Note: When you update the optimization mode, all existing cache will be cleared to ensure that all pages are optimized using the new mode.

3. Prioritize User Experience Over Performance

Achieving a high Google PageSpeed score doesn’t always translate to a better user experience. As anyone experienced in web optimization knows, a site that scores 100/100 on PageSpeed but has broken pages with missing styles often fails to convert users effectively. The primary goal should be to deliver a superior user experience, which is the underlying purpose of PageSpeed metrics.

While BerqWP’s Aggressive optimization mode can help your site achieve 90+ PageSpeed scores on both mobile and desktop, it’s not always the best choice for every scenario. For example, many websites feature a hero section slider that only loads when the browser executes JavaScript. Since the Aggressive mode delays JavaScript until the user interacts with the page, this slider might not load as expected.

In such cases, we recommend using the Medium optimization mode. This mode asynchronously loads CSS and JavaScript files upon the initial page load, without requiring user interaction. It provides an optimal balance between performance and user experience, ensuring that critical components like sliders and interactive elements are loaded and functional right away.

Note: This situation can apply to any above-the-fold content requiring JavaScript to function, except for the mobile menu hamburger icon, which BerqWP handles automatically.

Preload Web Fonts

If your PageSpeed scores are already satisfactory, you can further enhance user experience by enabling font preloading from the BerqWP settings. Preloading web fonts helps prevent the issue of “flash of unstyled text” (FOUT) during the initial page load, ensuring that fonts appear correctly and consistently from the start.

How to Enable Fonts Preloading

1. Navigate to the BerqWP settings page in your WordPress dashboard.

2. Click on the Script Manager tab.

3. Select the “Enable preload font faces” option and then save the changes.

4. Use Relative URLs to Exclude CSS & JavaScript Files

In the BerqWP Script Manager tab, you have the option to exclude specific external CSS and JavaScript files from optimization or delay by adding their URLs. However, it’s best practice to use relative URLs rather than full URLs.

For instance, if you want to exclude the WordPress jQuery file, instead of using the full URL (https://berqier.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1), you should use the relative URL: /wp-includes/js/jquery/jquery.min.js.

Using relative URLs ensures better compatibility with your CDN and avoids potential issues related to URL changes or domain variations.

Conclusion

Optimizing your WordPress site for both speed and user experience is crucial in today’s competitive online landscape. BerqWP offers a range of features and settings designed to help you achieve outstanding performance and enhance user satisfaction. From switching to the “Aggressive” optimization mode to implementing best practices for image handling and script management, each option provides distinct benefits tailored to different needs and scenarios.

By prioritizing user experience and leveraging the powerful tools available in BerqWP, you can ensure that your site not only scores high on PageSpeed but also delivers a seamless and engaging experience for your visitors. Remember to regularly review and adjust your settings based on your site’s performance and user feedback to maintain optimal results.

Whether you’re aiming for top PageSpeed scores or simply seeking to improve your site’s overall performance, BerqWP is equipped to help you achieve your goals effectively. Embrace these best practices, and watch as your website transforms into a high-performing asset that stands out in both speed and user experience.