Performance Enhancements

Performance Enhancments

Enable Gzip (compression):

-Apache (linux): [1]

-IIS (Windows 2008 R2): [2]

  -Windows 2008 R1: IIS Mananger->Sites->example.com->Compression(under IIS heading)->Enable Dynamic content Compression->Apply. No changes to web.config necessary. 

Leverage Browser Caching:

-Apache (Linux): [3]

-IIS (Windows): Add this to web.config:

<configuration> <system.webServer> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/> </staticContent> </system.webServer> </configuration>

Note: It won't be possible to cache some third party resources like Facebook javascript files.

If that addition to web.config doesn't work, add this to .htaccess:

<IfModule mod_expires.c>

FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month "
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"

</IfModule>

Eliminate render-blocking JavaScript and CSS in above-the-fold content:

Add "async" attribute to the "script" tag Example:

<script async src="/js/jquery.min.js"></script>

For Joomla sites, where it may be difficult to find and edit the 'script' tag like this, use the Javascript Async and Defer plugin:

https://extensions.joomla.org/extension/javascript-async-and-defer/

Note: this doesn't do anything to CSS 'link' tags, only JS scripts

For CSS stylesheets, the links have to be manually appended to the document after load using Javascript. This article explains how:

https://www.giftofspeed.com/defer-loading-css/

Optimize Images:

In PageSpeed Tools there is a link at the bottom:

"Download optimized image, JavaScript, and CSS resources for this page."

I haven't tested these fully but here are some options for optimizing images:

Web based converter (limited to 20 at a time): https://imagecompressor.com/

This one is a desktop application and looks like you can do a large number of images at once: FileOptimizer (haven't tested): https://nikkhokkho.sourceforge.io/static.php?page=FileOptimizer

Use video formats for animated content:

Use this site to convert animate gif to .webm: https://ezgif.com/gif-to-webm

Next replace your image html with the following video html where "source" points to the new webm file that was created: <video playsinline autoplay muted loop name="media"><source src="candle.webm" type="video/webm"></video>

Minify HTML:

If it is static HTML you can use a tool like this: [4]

However I haven't found a good way to do this on many pages at once. If using the method above be sure to backup any files you apply this to.

I believe there are plugins for WordPress, Joomla, Ect to minify automatically. Please update if/when you've found solutions for these.

Update from Derek:

jbetolo is a Joomla plugin to minify/optimize HTML/CSS/JS content, compatible with Joomla 2.5

https://extensions.joomla.org/extensions/extension/core-enhancements/performance/jbetolo/

Managed to make significant improvements to a site with this, requires plenty of tinkering and trial-and-error.

JCH Optimize seems to have better reviews but is only compatible with 3.3 and later

https://extensions.joomla.org/extension/jch-optimize/

Didn't try this one yet, though.

Good write up on WordPress plugins for this: [5]

With WordPress I had success using Autoptimize and Async Javascript plugins in combination.

Lazy Loading Helped Quite a Bit.. BJ Lazy Load Plugin for Wordpress