Archive for the ‘Wordpress’ 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 »

Hiding WordPress Theme Identity

Tuesday, March 5th, 2024

To prevent your WordPress theme from being detected by sites like “WhatThemeIs” and others, you can take several steps to obscure or hide details about your theme and plugins.

While it’s difficult to make your site completely undetectable without affecting its functionality, you can make it harder for automated tools to identify your theme and plugins.

The following are some methods you can consider.

Minify and Combine CSS and JavaScript Files

Minifying and combining your theme’s CSS and JavaScript files can obscure the source of the files, making it harder for detection tools to identify the theme based on file names or specific style and script patterns.

Rename Theme Folder

Changing the name of your theme’s folder can help obscure its identity. However, be aware that this might need to be redone after theme updates, and it could potentially cause issues with updates and functionality.

Use a Child Theme

Creating and activating a child theme with a unique name provides an additional layer of obfuscation. The child theme can override the main theme’s files and functions, making it less straightforward to identify the parent theme.

Remove or Modify the Theme’s Metadata

The style.css file in your theme directory contains metadata about the theme, including its name, author, and version. Editing this information can help mask the theme’s identity, but be cautious as it may impact theme updates and support.

Use a Security Plugin

Some WordPress security plugins offer features to hide or restrict access to your site’s directories and files, making it harder for automatic detection tools to scan your site for theme and plugin information.

Disable Directory Browsing

Ensure that directory browsing is disabled on your server to prevent unauthorized users from viewing the contents of your directories, which can include theme and plugin folders.

Obscure WordPress Version

Some tools also report the WordPress version, which can be hidden by removing the version number from the site’s head section and other areas.

Custom Developments

Consider custom developing features that you would otherwise use plugins for. This not only hides their existence but can also optimize your site’s performance.

Use a Security Firewall

A web application firewall (WAF) can help block malicious attempts to detect or exploit your site, including automated scans for themes and plugins.

Final Thoughts

It’s important to note that while these steps can help make it more difficult for automated tools to identify your WordPress theme and plugins, they may not provide complete anonymity.

Moreover, some modifications can affect your site’s functionality, performance, or the ability to receive theme and plugin updates.

Always back up your site before making significant changes and consider the trade-offs between security, privacy, and usability.

Personally, I would recommend that you focus on growing your site rather than spending time trying to hide the identity of your WordPress theme.

Tags:
Posted in Wordpress | 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 »

How to Link Full Size Images in WordPress Gutenberg

Wednesday, October 5th, 2022

By default, WordPress (Gutenberg edition) inserts images without allowing to click to a larger size.

Because you need to ensure that page load speed is as quick as possible, we all tend to shrink the image size down to 50 or 75% so this can be a frustrating experience for your readers to not be able to clearly see what you are showing.

INTRO

  • You can make the image clickable (to a larger size) either by choosing “Media File” or “Attachment Page” when adding your image.
  • I believe there is a slight SEO advantage by using attachment page so I prefer to use this method

INSTRUCTIONS

  • STEP # 1 – add image to your WordPress post
  • STEP # 2 – Click on the Hyperlink icon
how-to-make-wordpress-image-clickable-to-larger-size-step-1-add-image-fl
  • STEP # 3 – Click on the “Attachment Page” link
  • STEP # 4 – If you want a larger image to open up in a new window, you can click on the CAPTION section which will open up a mini pop-up with another chain link icon (I do not recommend this method as it tends to clutter user’s screen)
how-to-make-wordpress-image-clickable-to-larger-size-step-3-attach-page-fl
how-to-make-wordpress-image-clickable-to-larger-size-step-4-caption-open-new-window-fl

SUMMARY

That’s it! Of course, if you are using WordPress’ Classic Editor, it can all be done with a bunch of clicks or manual coding.

Posted in Wordpress, wordpress tips | No Comments »

Reviews – DZS Video Gallery WordPress Plugin

Monday, May 14th, 2012

I purchased DZS Video Gallery plugin for WordPress because of its flexible ability to rotate videos and could not find suitable alternatives in WordPress.org/extended/plugins area.

It cost just $15 (one site only) so the price was okay, but it was fairly difficult to configure it as a newbie non-coder.  Because I was experiencing the very same problems (blank video screen, no navigation, etc.)  faced by numerous other purchasers (http://codecanyon.net/item/video-gallery-wordpress-plugin-w-youtube-vimeo-/discussion/157782?page=33), and what seems like a lack of support from the seller, I was ready to throw in the towel after couple of hours.

But, as I said before, I could not find suitable alternatives so I decided to give it another try before asking Envato (marketplace administrator) to issue me a refund.

ENVIRONMENT

* WordPress 3.3.1 (self-hosted – NOT part of WordPress.COM)

* Studiopress Genesis Framework (v.1.8.1) with Magazine theme (v.2.0)

* WordPress plugins:

  • Akismet
  • Contact Form 7
  • Dynamic Content Gallery (studiograsshopper.ch)
  • DVZ Video Gallery
  • Google Analytics and XML sitemaps
  • Sociable
  • Social Media Widget

PROBLEM

For the purposes of testing DZS Video Gallery plugin, I created a short Youtube playlist containing 4 videos. Following the author’s instructions, I grabbed the youtube playlist ID and other information and entered into the plugin but no matter which configuration I tried, I was simply getting a black screen in my web page.

SOLUTIONS

#1 – I knew some problems can arise when there is a conflict between plugins.   I figured if there was a conflict, it would have been between the Dynamic Content Gallery and DZS Video Gallery due to javascript resources.  Thankfully, Dynamic Content Gallery plugin came with 2 Javascript Framework methods:  Mootools (default) and jQuery.

My DCG was defaulting to Mootools, so I changed it to jQuery and I saw immediately that DZS video screen was displaying some navigation controls.  Good sign.  I then proceeded to instruct DZS to let Flash Handle Feeds (The very last field before IMPORT – choose “on”) and voila, my video was up and running.

DZS Video Gallery Plugin Review - How to Make It Work 1

Fig.1.1

DZS Video Gallery Plugin Review - How to Make It Work 2

Fig.1.2

DZS Video Gallery Plugin Review - How to Make It Work 3

Fig.1.3

DZS Video Gallery Plugin Review - How to Make It Work 1

Fig.1.4

DZS Video Gallery Plugin Review - How to Make It Work 5

Fig.1.5

DZS Video Gallery Plugin Review - How to Make It Work 5

Fig.1.6

#2 – The second problem I faced was after inserting a logo to my screen.  When I clicked on it, a new browser opened up and went to http://activeden.net/user/ZoomIt?  The author was kind enough to state that I needed to change the URL in the field name called LogoLink located in the gallery.xml file (path:  dzs video gallery –> deploy –> gallery.xml).  Just make sure to change the value to your destination URL for all 4 gallery XML files (gallery.xml, gallery2.xml, gallery3.xml, and gallery4.xml).  If you have cPanel, you can use it’s online editor.  Otherwise, grab a free Notepad++ to make changes and use an FTP client like Filezilla to ftp over new files.

DZS Video Gallery plugin - logoLink value change

CONCLUSION:

As a newbie, this plugin was not easy to configure but if offers functions that other free plugins do not offer at the present time. Do I recommend it?  Yes,  but make sure to bring plenty of patience!

BTW, the plugin still does not rotate videos.

Tags:, , ,
Posted in reviews, software, wordpress tips | No Comments »

How to fix blurry or fuzzy DIYtheme header image

Tuesday, February 7th, 2012

DIYtheme has a nifty feature where it resizes your uploaded header image or logo based on page width (s1+s2+content columns). Unfortunately, that means if your logo is created with 150 dpi or lower, your logo might look fuzzy or blurry.

Rather than battling back and forth with resizing your logo (very frustrating), simply recreate your logo with 300 dpi or higher and save it as a .png file. That will most likely solve the blurry logo issue.

Posted in DIYtheme, hardware | No Comments »