Archive for the ‘Page Speed’ Category

Caching Level with Cloudflare and Litespeed Plugin

Saturday, March 30th, 2024

If you maintain a website utilizing a self-hosted WordPress setup and have Cloudflare CDN and LiteSpeed Cache plugin, you will want to read this post.

When managing a WordPress website with dyamic content, optimizing page load times is crucial for user experience and SEO. The caching settings in Cloudflare play a significant role in this optimization, particularly for sites using WordPress with plugins like LiteSpeed Cache and integrating Cloudflare for additional performance and security benefits.

Cloudflare

A notable feature within Cloudflare’s settings is the “Caching Level,” aimed at managing the extent of static content caching on your website. Enhanced caching can significantly improve page load times. There are three settings available for this feature:

  • No Query String
  • Ignore Query String
  • Standard

Let’s review which are essential for understanding how your website gets cached and served to your visitors.

No Query String

This option tells Cloudflare to cache your website’s static content (like images, CSS, and JavaScript files) but only for URLs without any query strings. A query string is a part of a URL that comes after a question mark (?) and is used to pass additional parameters. For example, https://example.com/photo.jpg?width=300 has a query string that specifies the width of an image.

It’s most useful for sites where the content of the static files does not change based on query strings. If your baseball site’s static resources don’t vary with different query parameters, this setting can help cache more aggressively.

Ignore Query String

With this setting, Cloudflare caches the static content without considering the query strings at all. This means that a request for https://example.com/photo.jpg?width=300 is treated the same as a request for https://example.com/photo.jpg. Cloudflare serves the same cached content for both URLs.

This option is suitable if your website’s response for a static file doesn’t depend on the query string parameters. For instance, if the image’s width on your baseball site is controlled by CSS rather than the query string, this option could reduce the number of cache misses and speed up the delivery of content.


Standard

This is the default setting and a middle ground between the two extremes. Cloudflare will cache static content based on the combination of the URL and the query string. Different query strings will result in different cached versions of the same URL.

This option is ideal for websites where the content might change based on query string parameters. For a baseball site, if you have dynamic content that changes based on query parameters (like sorting order of player statistics), this setting ensures that users see the correct version of your content.

Cloudflare and Litespeed Integration

When integrating Cloudflare with the LiteSpeed Cache plugin for a WordPress site, ensuring compatibility and optimizing the settings for both services are essential to maximize your website’s performance and SEO.

Here are specific settings and considerations to keep in mind to ensure Cloudflare and LiteSpeed work harmoniously:

Cache Purging

  • LiteSpeed Configuration: Ensure that LiteSpeed is set to automatically purge cached content when it’s updated. This includes posts, pages, and other dynamic content that changes.
  • Cloudflare Configuration: Similarly, configure Cloudflare to purge cached versions of your website when updates are made. You can automate this process by using Cloudflare’s API in conjunction with the LiteSpeed plugin or WordPress hooks.

Cache Exclusion Rules

Both Cloudflare and LiteSpeed allow you to exclude specific URLs or types of content from being cached. It’s important to harmonize these settings to avoid caching dynamic content that should be served fresh (e.g., user profiles or custom responses based on cookies).

CDN Settings

If you’re using Cloudflare as a CDN, ensure that the LiteSpeed Cache settings are correctly configured to acknowledge Cloudflare’s presence. This often means disabling CDN features within LiteSpeed to prevent conflicts or double caching issues.

Optimization Features

LiteSpeed offers various optimization features (such as image optimization, CSS/JS minification, and lazy loading). When these features are enabled in LiteSpeed, ensure that similar settings are not redundantly enabled in Cloudflare, as this can lead to issues such as broken pages or styles.

Browser Cache TTL

Both Cloudflare and LiteSpeed allow you to set Browser Cache TTL (Time To Live), which controls how long the content is cached in the visitor’s browser. Make sure these settings are aligned to prevent caching issues or stale content.

WebP Compatibility

If you’re using LiteSpeed’s feature to serve WebP images for supported browsers, ensure Cloudflare’s “Polish” feature (if used) is configured to respect WebP versions or to avoid converting images that have already been optimized by LiteSpeed.

Edge Caching

LiteSpeed’s Edge Cache feature can serve content directly from the edge server network. If you’re using Cloudflare, ensure that the configurations between Cloudflare’s caching and LiteSpeed’s Edge Caching do not conflict, especially regarding cache purging and TTL settings.

Testing and Monitoring

After configuring both Cloudflare and LiteSpeed Cache settings, it’s crucial to test your website’s performance and monitor for any issues. Tools like GTmetrix, Google PageSpeed Insights, or Cloudflare’s analytics can provide insights into how effectively your content is being cached and delivered.

Documentation and Support

Both LiteSpeed and Cloudflare offer extensive documentation and support forums. If you encounter specific issues or need advice on settings, referring to the official documentation or reaching out to support can provide tailored advice for your website’s configuration.

By paying attention to these settings and considerations, you can ensure that Cloudflare and LiteSpeed Cache work together efficiently, improving your WordPress site’s speed, performance, and SEO.

Choosing the Right Option

When it comes to Cloudflare’s caching level, the standard setting is generally the safest choice, ensuring dynamic content changes are respected while still benefiting from caching.

If you’re certain that your site’s static content doesn’t vary with query parameters, or if such variations don’t impact user experience, Ignore Query String could potentially increase cache hits and performance.

No Query String is less commonly used for dynamic sites but could be relevant in specific scenarios where query strings are entirely irrelevant for static resources.

When using Cloudflare in conjunction with other caching mechanisms (like LiteSpeed Cache), ensure your settings are harmonized across platforms to prevent caching conflicts that might affect your site’s performance or behavior. It’s also important to monitor your site’s performance and adjust these settings as necessary to find the optimal configuration for your specific needs and traffic patterns.

Tags:,
Posted in Page Speed | No Comments »

Gzip Setup in WordPress- How to Enable without a Plugin

Friday, March 10th, 2023

Imagine you’re sending a package. Wouldn’t it be great if you could squish it into a smaller box to save on postage? That’s what GZIP does for your website. It squeezes your web files, so they zip across the internet at lightning speed, reaching your audience faster. This isn’t just about speed; it’s about giving your visitors a smooth, slick experience.

What is Gzip?

Gzip stands for “GNU zip.” (“GNU” stands for “GNU’s Not Unix”; it is a recursive acronym and no one knows the actual abbreviation). Gzip is a file compression program launched in 1983 by Richard Stallman to create a completely free and open-source operating system (“public domain software”).

Gzip is widely used by hosting companies to compress and decompress files in the gzip format. Brotli, a data compression algorithm developed by Google, is an alternative to Gzip. Hosting companies enable Gzip and/or Brotli in their servers. Gzip and Brotli can be turned on at the same time, but the server will use one or the other when transmitting data.

Gzip function turned on by hosting companies are used to compress static web pages, so for dynamically generated websites based on WordPress, Gzip feature has to be turned on within WordPress.

How do I know if Gzip is turned on?

Visit this GiftOfSpeed.com/gzip-test page and type in your website address to see if Gzip is turned on.

Just in keep in mind that although your server can use Brotli in combination with GZIP, that does not mean it will use Brotli+GZIP.

How and which compression algorithm will be used depends on a particular website content being pulled and the server configuration.

For example, your server will deliver the content compressed with Gzip to your CDN (i.e. Cloudflare), but your CDN may choose to deliver the content by first decompressing Gzip and the re-compress using Brotli before sending it over to the user. Or your server may send the content using Gzip as-is.

In most cases, if the client (browser) supports both compression algorithm, brotli will be preferred over gzip.

Please note that both are used to compress text files, not binary files like JPEG, PNG, MP4, or other media files (those are compressed by your CDN using different protocols).

How to Turn on Gzip within WordPress

There are two methods to accomplish this:

Which method you choose depends on if you are currently using a caching plug in or not.

Plugin

Most WordPress caching plugins give you the ability to enable Gzip compression.

Below is a list of popular WordPress caching plugins that can turn on Gzip:

  • W3 Total Cache – only if your hosting server is Apache
  • WP Super Cache
  • WP Rocket
  • WP Fastest Cache

You will need to look up their specific instructions to enable Gzip compression.

HTACCESS (Apache or LiteSpeed servers)

If you are already using a caching plugin (I use Litespeed WordPress), you will need to enable Gzip by inserting a small code in the text file called “.htaccess” (the period preceding htaccess denotes the hidden nature of the file).

Step #1a– You need check to make sure that Gzip is supported by your server. To do that, type the following into a notepad

<?php phpinfo(); ?>

Step #1b – Save the file as “test.php” (without the quotes)

Step #2 – Up[load the test.php file (how?)inside the /public-html/wp-content folder of your site:

Step #3 – Open up a browser and type in your website address followed by test.php

https://yourwebsitename.com/test.php

Step #4 – Your website should return something like the following screen. The resulting page is about 3 pages long so press CTRL+F and type in “gzip” to find Gzip.

Step #5 – With that confirmation, we can move on and edit .htaccess file. Before doing anything else, make sure to create a backup copy (cPanel has a COPY function)

Step #6 – Double click on the .htaccess folder (cPanel only) to edit the file. Copy the following code into your .htaccess file and and paste it at the end.

# BEGIN GZIP Compression JavaScript, Text, HTML, CSS, XML and fonts

<IfModule LiteSpeed>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

# END GZIP Compression

It is important to NOT paste the above in between any dynamically generated codes.

Once complete, go to Pingdom tool to test your site.

HTACCESS (NGINX server)

Although the majority of hosting companies use Apache/LiteSpeed servers, if your hosting company uses NGINIX, you will have to enable Gzip using a different method by adding this code into the nginx.conf file:

gzip on;

gzip_disable "MSIE [1-6]\.(?!.*SV1)";

gzip_vary on;

gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

The Gotchas

  • Not all files compress well. Images and videos? They’re already compressed. Squeezing them more won’t do much.
  • Beware of the browser compatibility. Older browsers might not play nice with GZIP. But, let’s face it, they’re like the internet’s dinosaurs.
  • After you’ve cast your GZIP spell, test your website. Tools like GTmetrix or Google PageSpeed Insights can show you how well your site is performing post-compression.

Conclusion

Enabling GZIP Compression is like giving your website a turbo boost. It’s one of those small changes that can have a big impact on your site’s performance,

Please note: messing with an htaccess file can break your website so make sure to have a backup copy!

Reference Links

Posted in Page Speed, Wordpress | No Comments »

Website Grading Tools

Thursday, March 9th, 2023

You can uses these free tools to measure and improve your WordPress website:

Website Speed Test

SiteDescriptionLink
Gift of Speed (Page Speed)Free page speed audit of your websiteDirect link to GiftOfSpeed.com Page Speed
Google PageSpeed InsightsAnalyzes the website and provides suggestions to improve its speed and user experienceDirect link to Google PageSpeed Insights
GTmetrixAnalyzes your website’s speed and provides detailed reports on page load time, page size, and other performance metricsDirect link to GTmetrix
PingdomTest your website’s speed and uptime, and it also provides performance insights and recommendations;Direct link to Pingdom Tools
UpTrends Speed Testlimited free toolDirect link UpTrends
Web Page TestTest your website’s speed from different locations and browsers, and it also provides detailed performance reportsDirect link to WebPageTest.org
Website GraderHubSpot owned speed testing toolDirect link to Websitegrader.com
YSlowAnalyzes web pages and provides suggestions for improving their performance.Chrome browser extension only

Other Tools

SiteDescLink
CLS Debugger (Google)Cumulative Layout Shift detectordirect link to CLS Debugger
Cloudflare Speed TestRun tests with synthetic data to identify opportunities to improve performance; need to create a FREE account and access via dashboard
DareboostAnalyzes your website’s speed and provides insights on how to optimize it for better performanceNOT FREE
Gift of SpeedCheck for Gzip and Brotli compression;direct link to GiftOfSpeed.com Gzip / Brotli Test
Google AnalyticsGoogle Analytics can help you identify which pages on your website are slow and which ones are causing high bounce rates
K6 (formerly Load Impact)Simulate high traffic loads on your website to identify performance issues and bottlenecks; 50 free cloud testing per accountdirect link to K6.io Load Testing
Kraken.io
Optimizes images by compressing them without reducing their quality, reducing page load times; 100MB free		direct link to Kraken.io
Site24x7Performance Monitoring Solution for DevOps and IT Operations.;direct link to Site24x7 free tools

Reference Links

Posted in Page Speed, Wordpress | No Comments »