Performance

Wednesday 7 September, 2016

Image by Andrew Newbury, The Jesus and Marychain at The Croxton Bandroom

There’s never enough.  Performance.  Speed.  Optimisation.  I recently became reacquainted with the dark and mysterious arts of hosted website optimisation eeking out as much additional performance as possible from my end. This reminds me of the days when I optimised DOS systems then NetWare and Windows NT servers squeezing out every last drop of performance I could get. Back then it was advantageous if you knew about cache and memory optimisation, stripe and cluster sizes and it was mandatory to have profiled the application to get any decent increase in performance. We’re more limited these days without reaching into a wallet for content distribution services, dedicated virtual servers and enhanced server configs, I joked in the past that a certain operating system manufacturer released new versions of their flagship product to “soak” up the excess CPU cycles offered by the latest processors, harsh, I know, but with a tinge of truth. True optimisation and knowledge of these dark arts is disappearing often in favour of the “simpler” approach of throwing money usually in the form of enhanced hardware at the “problem”.

 

However, for my hosted website, gains have been achieved by judicious use of the .htaccess file, minifying CSS and compiling JavaScript into unreadable goo 🙂 After a not inconsiderable effort I’ve managed to increase the Google pagespeed from 42/100 to 76/100 for mobile and 51/100 to 90/100 for desktop. Not perfect but the next increases will be had by hacking into the content management system or moving to a high performance server and here the laws of diminishing returns apply: know when to stop optimising, one of the hardest lessons to learn. I’m also rather pleased with the mobile user experience ranking of 98/100 which I owe to judicious use of the Divi content management system which allows customised options for desktop, tablet and mobile clients. Not straightforward but optimising for mobile use is critical as far more web traffic originates from handheld devices today. What? You don’t know how much? That’s critical to success: know your market, know your consumers/customers and know which devices they’ll employ to consume your content from, where they are located, what screen sizes they have, how often they access your site and what they do when they are there. And also know where they originate from. Google Analytics provides insane amounts of data but it’s not like divining chicken entrails, OK, it’s not far from it: there’s almost too much information so you need to know what to spend time analysing and what can be set aside. This isn’t a post on GA but I can’t help sharing some data from this site, there is far, far more available but I found these interesting:

So how do you actually do it? How do you increase performance? There are two options: become an expert yourself or hire one in. There’s no rocket science to this you either have the inclination and capability or you bring in someone who already has, not unlike a great deal of things in life, to outsource or to insource, a sourcing decision.

Oh, and the .htaccess file? For those who are interested here’s my current incarnation, please do not simply copy this because if you do it will very likely break things and then you’ll get to own all the pieces or else if it does perchance work and not cause visitations from the dearly departed, you’ll never understand what the constructs mean and what they do. I owe a great deal to the electronic resources of the ‘net and the many and varied forums which the sacred brethren inhabit.

The “before” file:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /www.exponentiallydigital.com/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /www.exponentiallydigital.com/index.php [L]
</IfModule>
# END WordPress

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css?|js|php|pl|xml)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/atom+xml.*
mod_gzip_item_include mime ^application/*javascript.*
mod_gzip_item_include mime ^application/json.*
mod_gzip_item_include mime ^application/ld+json.*
mod_gzip_item_include mime ^application/manifest+json.*
mod_gzip_item_include mime ^application/rdf+xml.*
mod_gzip_item_include mime ^application/rss+xml.*
mod_gzip_item_include mime ^application/schema+json.*
mod_gzip_item_include mime ^application/vnd.geo+json.*
mod_gzip_item_include mime ^application/vnd.ms-fontobject.*
mod_gzip_item_include mime ^application/x-font-ttf.*
mod_gzip_item_include mime ^application/x-httpd-fastphp.*
mod_gzip_item_include mime ^application/x-httpd-php.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^application/x-web-app-manifest+json.*
mod_gzip_item_include mime ^application/xhtml+xml.*
mod_gzip_item_include mime ^application/xml.*
mod_gzip_item_include mime ^font/eot.*
mod_gzip_item_include mime ^font/opentype.*
mod_gzip_item_include mime ^font/ttf.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

and the “after” file:

<IfModule pagespeed_module>
 ModPageSpeed on
 ModPagespeedRewriteLevel CoreFilters
 ModPagespeedEnableFilters prioritize_critical_css
 ModPagespeedEnableFilters defer_javascript
 ModPagespeedEnableFilters sprite_images
 ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
 ModPagespeedEnableFilters collapse_whitespace,remove_comments
</ifModule>
<IfModule mod_mime.c>
 AddType text/css .css
 AddType text/x-component .htc
 AddType application/x-javascript .js
 AddType application/javascript .js2
 AddType text/javascript .js3
 AddType text/x-js .js4
</IfModule>
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css A31536000
 ExpiresByType text/x-component A31536000
 ExpiresByType application/x-javascript A31536000
 ExpiresByType application/javascript A31536000
 ExpiresByType text/javascript A31536000
 ExpiresByType text/x-js A31536000
 ExpiresDefault "access 2 days"
</IfModule>
<IfModule mod_deflate.c>
 <IfModule mod_headers.c>
  Header append Vary User-Agent env=!dont-vary
 </IfModule>
 AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript / 
 application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml / 
 text/plain text/xsd text/xsl text/xml image/x-icon application/json
 <IfModule mod_mime.c>
  # DEFLATE by extension
  AddOutputFilter DEFLATE js css htm html xml
 </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
 <IfModule mod_headers.c>
  Header set Pragma "public"
  Header append Cache-Control "public"
  Header set X-Powered-By "Arc NineOhNine"
 </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ| / 
 TXT|XSD|XSL|XML)$">
 <IfModule mod_headers.c>
  Header set Pragma "public"
  Header set Cache-Control "max-age=3600, public"
  Header set X-Powered-By "Arc NineOhNine"
 </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip| / 
 ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb| /
 odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif| /
 tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP| / 
 CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT| /
 MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT| /
 PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|WOFF|XLA|XLS|XLSX| /
 XLT|XLW|ZIP)$">
 <IfModule mod_headers.c>
  Header set Pragma "public"
  Header set Cache-Control "max-age=31536000, public"
  Header set X-Powered-By "Arc NineOhNine"
 </IfModule>
</FilesMatch>
<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /www.exponentiallydigital.com/
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
</IfModule>

 

Sure this isn’t my “day” job and hasn’t been for a very, very long time, it’s more of a hobby which I like to keep active in and being able to extend myself from my mind, my thoughts, through my limbs and out via electrons to the cyberworld. One day, not too far from now we’ll master the human bio/electrical interface and then the game will change again; today we start the walk into the savannah, leaving the comfort of the trees behind, what will our future hold? I think performance will still be a requirement, even then 😀

[who noticed the “if” “then” “else” ‘joke’ in this article?]