Wordpress CDN and site speed

Details
Category: category : Wordpress tips and tricks

Looking to speed up your website? I thought that I would try a self hosted CDN using subdomains + plus other tricks that help using the .htaccess file, note; these will work on non Wordpress sites.

These are the topics:

  • Self hosted CDN for Wordpress
  • Gzip compression using .htaccess
  • Cache control using .htaccess

1. Self hosted CDN using subdomains

I am using the WP Super Cache plugin for Wordpress and followed this article.

Credit: https://www.journaldev.com/1506/how-to-create-own-self-hosted-cdn-for-wordpress

The steps iinvolved are:

  • Create sub domains
  • Edit wp-config.php
  • WP Super Cache settings
  • Fontawesome not working
Creating Sub Domains

Use your cPanel access to your hosted site to create three sub domains. I called them cdn01.example.com, cdn02.example.com and cdn03.example.com.

The subdomains need to be "generic mirrors" of the web root - make sure to have the doc root as "public_html". They also need the correct CNAME entries. On my host (TMD Hosting) as long as I made the doc root "public_html" everything else was automatic and worked.

Cookie less CDN domain

Edit your wp-config.php file in the root of your Wordpress install and add the following code:

define ('COOKIE_DOMAIN','www.yourdomain.com');

This will make sure that the sub domains do not use cookies (not required for static content).

WP super cache settings

Log in to your admin backend in your wordpress site and make the necessary changes to your WP super cahce settings:

I also checked all other recommended settings...

Fontawesome not working

The following code was added to the .htaccess file in the root of the website install:

# EDIT for fontawesome to work on CDN - apache config
<FilesMatch ".(eot|ttf|otf|woff|svg)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

 

2. Gzip compression

The following code was added to the .htaccess file in the root of the website install:
Credit: https://gtmetrix.com/

# EDIT Gzip for compression
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByTypeDEFLATE 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
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

You can test that this has taken efect by using: http://www.whatsmyip.org/http-compression-test/

 

3. Cache control

The following code was added to the .htaccess file in the root of the website install:

# Cache control - 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

There are useful notes here: https://varvy.com/pagespeed/cache-control.html

Source/credits: http://www.joomlablogger.net