Subscribe See my projects
  1. Leverage browser caching and set content type through HTTP header

    September 21, 2014

    This is part of my series on how to optimise website performance to get high page speed scores.

    If you have access to your server, and you’re running Apache, you’ll want to spend some time optimising your Apache configuration. This can be done through the main configuration file (usually called httpd.conf or similar) if you have access, or inside an .htaccess file in your site’s root directory.

    For more information you should have a look at the Apache documentation on configuration .htaccess.

    Disclaimer: Continue at your own risk!

    1. SSH into your server by typing ‘ssh <username>@<domain>’ into a Terminal window. For example, ‘ssh bob@humphreybc.com’.
    2. Find your Apache configuration file or create a new .htaccess file in your site’s root directory

    Now, what to put in the Apache configuration file? There are a few things we want to achieve:

    • Set longer expires headers on cacheable resources
    • Set content type (eg. UTF-8) through HTTP header
    • Force compression for mangled headers

    We could spend a lot of time navigating the syntax forest of Apache configuration, but instead I found it easier to simply use HTML5 Boilerplate’s wonderful server-config setup:

    HTML5 Boilerplate Apache server config on GitHub

    This has the advantage of including a bunch of other common configuration niceties, like better security, cross-origin requests, and some rewrite stuff.

    Go ahead and make a copy of your server configuration or .htaccess file with the cp command. You may need Sudo for these commands.

    cp .htaccess .htaccess-backup

    And now copy and paste the boilerplate configuration into the main file. I find using nano to edit quite pleasant:

    nano .htaccess

    Once that’s done, restart Apache and cross your fingers, hoping nothing has broken:

    service apache2 restart

    Lastly, use Chrome Developer Tool’s Audit and Resources tabs to check that the changes have taken effect by looking at the expiry date for your CSS. The expiry date should be 1 year from now.

  2. Use the Chrome Audit pane to remove unused CSS selectors

    September 20, 2014

    This is part of my series on how to optimise website performance to get high page speed scores.

    Google Chrome comes with an awesome developer console, but a lot of people aren’t aware of the Audit pane which is useful for determining ways to optimise page speed.

    Open the Chrome Developer Tools from the Tools menu under the main Chrome menu in the top right. Click the Audits tab and then Run an audit. Make sure you check ‘Reload Page and Audit on Load’ before clicking Run.

    Under Web Page Performance you’ll be able to see which CSS rules aren’t being used by the page.

  3. Compress and optimise images with ImageOptim

    September 20, 2014

    This is part of my series on how to optimise website performance to get high page speed scores.

    I use a great free tool called ImageOptim to compress images. Basically it strips metadata, unnecessary colour profiles, and more. It works quickly and you simply drag and drop images to optimise them in place.

    Check it out at imageoptim.com

  4. One of our two 2015 Interaction Design Awards submissions from Atlassian, Engaging First Impressions.

    This is the current team I’m on at Atlassian. We are working to drastically improve our user onboarding experience across all major products through a combination of growth experiments and traditional UX research.

    We shot this video, edited, and uploaded to YouTube in 6 hours with storyboarding and script happening the week before.

  5. Improving performance on UX Design Day’s website

    August 25, 2014

    image

    I’ve been working on a refreshed design for uxdesignday.org over the past couple of weekends. As part of this I’ve refactored a lot of code and improved both network and rendering performance significantly. 

    The main conference page for Dunedin now gets a 96% page speed score measured with YSlow, which is just a little less than Google.com. Unfortunately getting to 100% is going to be tough due to some external resources setting a short cache expiry, and my images will never be scaled correctly because the site is responsive for mobile. Oh well! I can live with 96%.

    Over the next few posts, I’ll talk about how I improved performance both in the site code and on the server.

    But first, the structure of the site.

    image

    UX Design Day is a simple responsive site. Straight HTML and JavaScript with jQuery, Stylus for CSS. Everything is compiled and minified locally using Grunt with a few Node.js libraries.

    I have an Ubuntu VPS from prgmr.com with Apache configured to show whatever’s in the /public directory of the repository.

    I’ve segmented the pre-compiled Stylus into multiple files like buttons.styl, layout.styl, header.styl and so on, which are all concatenated together and minified when converted to CSS.

    Grunt also takes jQuery and any extra JS libraries and sticks them into app.min.js along with my JavaScript code for the site.

    Improving performance

    I used Chrome’s Audit tab and GTmetrix to see what I could improve. It wasn’t particularly hard and probably took me about 3 hours all up to achieve a high page speed score.

     In the end I did the following, each of which I’ll explain in future posts.

    • Compressed images
    • Removed unused CSS selectors
    • Set the content type through HTTP header
    • Added expires headers to all file types
    • Added cache validator to resources
    • Specified width and height for images
    • Deferred JavaScript
    • Included jQuery in compiled JS
    • Replaced PNGs with SVG where possible
    • Set up a free CDN

    Stay tuned for more!

  6. Commute to work

    Commute to work

  7. Loading Artist - A webcomic by Gregor Czaykowski

  8. Are we witnessing the emergence of the United States of Australia?

    "Australia can have its cake and eat it too, because a healthy and materially secure population will repay enormous economic dividends. Instead, we’re going further down the US path"

  9. Luna Park during Vivid Sydney

    Luna Park during Vivid Sydney

  10. Stages of feedback

    May 22, 2014

    There are four stages of feedback:

    1. Saying "this is shit".

    2. Saying “this is shit and here are some reasons why I think it’s shit.”

    3. Saying “this is shit. Here are the reasons why I think it’s shit, and here are a few potential solutions I thought of.”

    4. Saying “this is shit. Here are the reasons why I think it’s shit and here are a few potential solutions. I’ve explored them for you.”

    I don’t expect many people to reach stage 4, especially if you are giving feedback on something outside your domain knowledge. For example, a developer giving feedback to the HR team.

    If you’re giving feedback within your domain, I expect people to reach stage 3 most of the time. For example, a designer giving feedback to another designer.

    I always expect everyone to reach stage 2 regardless, and I expect no one to only reach stage 1.

    Next time you give feedback try to always reach for stage 2, and if it’s worth your time, aim higher.

  11. 5 Reasons You Should and Should Not Test With 5 Users: Measuring Usability

  12. Dorris McComics

  13. An overnight trip to the blue mountains a few weekends ago.

  14. Nifty Chrome flags in Canary

    May 17, 2014

    I installed Chrome Canary on OS X and found a few nifty optional flags. To enable or disable flags, type chrome://flags in the address bar.

    There are a few cool new features available. My favourite would have to be the scroll prediction, fast tab close, and the new profile management and profile switcher.

    Enable scroll prediction

    Predicts the finger’s future position during scrolls allowing time to render the frame before the finger is there. 

    Enable new profile management system

    Enables the new profile management system, including profile sign-out and the new avatar menu UI. 

    Enable fast user switching in the avatar menu

    Enables fast switching between users in the avatar menu. 

    Enable the new avatar menu

    Enables the new avatar menu. When combined with new-profile-management, it simply shows the new profile management avatar menu. Otherwise it shows a redesigned avatar menu with the same functionality as the old one, plus a tutorial card at the top prompting the user to try out the new profile management UI. 

    Show Autofill predictions

    Annotates web forms with Autofill field type predictions as placeholder text. 

    Enable Download Resumption

    Allow downloads that have been interrupted to be continued or restarted, using the Resume context menu item. 

    Enable the new Translate UX

    Enable the new Translate bubble UX is offered instead of the infobar. 

    Enable fast tab/window close

    Enables fast tab/window closing - runs a tab’s onunload js handler independently of the GUI. 

  15. Lovely day in McMahons Point. View from lunch at The Point Deli.

    Lovely day in McMahons Point. View from lunch at The Point Deli.