Page Speed Optimisation

(Ryan Archer) #1

I'm following the Page Speed tool here https://www.feedthebot.com/pagespeed/and looking at making tweaks to some of our Squiz Matrix hosted websites to improve UX and performance, hopefully getting improved Google Analytics results as a secondary result.

 

Like I've posted earlier in the forum, I have CSS/JSS minification and combining down with the tools that Squiz Matrix provides but I'm still not out of the woods. The unresolved issues are:

  • Optimise images
  • Gzip compression
  • Enabling "Keep Alive"
  • Browser caching

Browser caching is actually the strange one. I'm fairly sure we have 'caching' on all our sites as whenever I make a change, I have to preview it by appending "_nocache" to the URL path. So I'm not really sure as to why our websites are flunking the cache test. The report talks about putting it into the .htaccess file. This leads me to my next question.

 

We have an SLA with Squiz to manage our servers (which are in-house). How would we be able to perform tweaks to resolve the listed items above? I have been able to do all of the above on our Wordpress CMS websites by editing the .htaccess files. The one that sticks out is still "Optimise Images" even after using a "smush images" wp plugin. What might Squiz Matrix use to optimise/compress images further for web delivery?

(Joel Porgand) #2

Google's tool is better than that one:

 

https://developers.google.com/speed/pagespeed/insights

 

With regards to the browser caching thing - looking at the slq site there are no cache-control headers being set for images that are being served directly by apache (ie. __data urls) - I'd suggest talking to squiz to get them to update your apache config to fix this. 

(Ryan Archer) #3

Cool, yeah I use the Google tool as well. I just find Patrick's website so much easier on the eyes. Interesting thing is that both pages pretty much come up with the same score and the same recommendations.

(Ryan Archer) #4

BUMP to the Squiz Support crew. Should I log this in my.squiz.net portal?

(Marcus Fong) #5

Yes, that would probably be best - or alternatively, contact your Squiz account manager.

(Tbaatar) #6

Also get CDN for all your media assets.

 

Amazon Cloud Front or Rackspace Akami is quite easy to setup.

(Ryan Archer) #7

Mmm CDN might not be what we are looking for in this particular instance. Our sites predominantly service Queensland, Australia and our server is right here in our building @ Brisbane.

Would get better loading times for visitors overseas but not really worth the effort or the cost for our scope of operations. I suppose unless we can CDN all over QLD state but that's a bit of a pipe dream at the moment.

(Tbaatar) #8

Cool. Google Insight will still mark you down.

(Aleks Bochniak) #9

Check out this article with some really good ideas and tips

http://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study

 

We are embarking a redevelopment of our front end codebase with focus on speed and performance. We already have a 'performing' website with static caches, etc - but there's more to be done. 

 

Following a review of where we are at now, and some housekeeping, we will be doing the following tasks:

 

Media query consolidation 
– Look at our current media queries
– List resolutions we are going to design for
 
Responsive behaviour review
- Anything that needs tweaking for a better mobile experience
- ‘Content Choreography’
- Flexbox
- Fat fingers
 
Review main navigation behaviour
 
Review search UI on mobile
- Suggest any changes
 
Styles refactoring
- We need to remove bloat
- Rewrite any classes/styles that are similar
- Minimise
 
Conversion to LESS
- convert to an object orientated way of creating/managing styles
 
Review of our javascript
- Review of all javascript libraries and custom functions
- Remove everything that is obsolete and not required
 
Upgrade of JQuery
- We still use Jquery 1.7.2 from 2012!
- Upgrade to latest version which provides the most browser support
- Update code that uses deprecated functions
 
Upgrade of all other javascript libraries
- Look at upgrading other JS libraries we have in use
 
Prioritise page contents. ie. everything that makes up an AQA web page
- Categorise them as either ‘core’, ‘enhancement’ and ‘everything else’
- Eg. BBC and Guardian modular page contents loading
 
Javascript refactoring
- Check that ‘core’ and ‘enhanced’ JS is optimised
- Rewrite any functions that are similar or not optimised
- Minimise and use native JS
 
JS blocking review
- Ensure we don’t have any blocking JS
- Rewrite any JS that is blocking
 
JS Loading
- Implement better way of loading javascript in a page
- Implement a non-blocking and asynchronous way of loading JS
- On-demand JS loading for everything not ‘core’
 
Implement critical css
- Minimal core styles that are consistent throughout the whole site and required for all pages to display properly
- Implement as embedded
 
Implement critical js
- Similar to critical css, but separate JS that is core to the display of AQA web pages – if any
- Implement as embedded
 
Prevent FOUT (flash of unstyled text). ie. slow loading of web fonts
Web font caching
- Look at way to cache web fonts properly on people’s web browsers - localStorage!
 
Browser caching for static files
- I’m not sure browser caching is utilised effectively
- Why not cache static files that never change forever
 
Remove the cumbersome search ‘subject finder’ drop down widget
- This actually uses up a lot of Matrix resource when loading for the first time
- It’s not used and only causes confusion
- What is the benefit of this, really?
 
Start using ‘compressive images’ technique for displaying JPGs on our web pages 
- We can lower the file size of images greatly with this technique
- Smaller web page footprint – especially homepage
- Look at our process for images
- JPEG save for web settings - grunt it!
 
Simply Matrix page build
- Look at where we can reduce the number of assets and complex assets required to build core pages
- Use _performance mode
 
Responsive images
- Image production workflow
- Progressive jpegs as well as compressive
- Screen sizes that we need to / or want to target
- Where should we use SVG or PNG or JPEG?
- How to auto load the best image for the device being used?
- AQA logo is a good candidate
 

 

(Ryan Archer) #10

Lol thanks Aleks. I read that article two weeks ago.

Very detailed and insightful.

 

Our Interface Designer is currently developing a draft overhaul of all UI/UX for our flagship website. I will forward on your response to him (for the relevant bits).

 

Actually I have been busy since with implementing some of the techniques you mentioned here since I originally posted with some success. Unfortunately much of the optimisation requires quite extensive overhauling (i.e. some websites rely on Jquery library for the menu and responsiveness...ouch! yeah it was done before I got here...) so these kinds of things can be done when I have a 'green' light to take apart the website and build it back up again.

 

Future website builds will definitely be done differently.

 

PS - Just want to know how you got ‘compressive images’ techniques working in Squiz Matrix - I don't know how to do this and one of our websites has quite a lot of fat images on the homepage.

(Tbaatar) #11

Compressive image technique is only really viable solution if your creating a new website. For existing website with lots of images, all of these would need to be re-created / uploaded at double the size with 0% quality.