Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (55 sloc) 2.25 KB

Need For Speed: Tips to Optimize Your Website

With Anne Thomas

People don’t often think about site optimization, but it is crucial to keeping visitors on your site.

Why All The Fuss?

  • People want information NOW/can’t wait (case in point: loader bars turn people off)

  • There are business reasons for this!

    • It’s good for business - conversion/sell all the things!

    • Instantaneous response time (to add items to cart)

    • Bounce rates (high bounce rates are bad!)

    • Google likes fast sites

      • MYTH: People are more forgiving of desktop sites than those on mobile. In reality, desktop users are just as impatient as mobile users.

Ground Rules

  • Do no harm to data plans

  • Embrace the new and progressive (e.g. check your site with PHP tools)

  • Listen to your townsfolk and your stats

  • Always be optimizing

Optimization Culprits

  • Huge, full-width images

    • Thing is, conversion is 98% higher with images

    • Tradeoffs needed!

    • PRO TIP: Set a performance budget with your client, e.g. Set expectations as to what can and can’t go on the site in the name of performance

    • Use SVGs and responsive images whenever possible

  • Webfonts

  • Multiple server requests/large files (combine CSS files, don’t separate them)

  • Third-party JS

  • Uncached files (use CDNs to address this)

  • Render-blocking JS/CSS

  • Crummy webhosts

    • <200ms = ideal server response time
  • Page reloads

    • Use AJAX whenever you can to simply target the asset that needs to reload/update (thereby doing away with reloading the ENTIRE site)

Debugging

  • Responsive images (srcset and sizes attribute)

    • WP has implemented responsive images
  • Lazy loading and dynamic content

  • Minify CSS, HTML, and JS

  • AJAX

The Future

  • HTTP/2

  • Client hints

  • Service workers

  • AMP pages

Tools of the Trade

  • Speed Testing (webpagetest, google page speed, vary, GTMetrix, Chrome dev tools)

  • Vocabulary:

    • Speed index

    • Time to first byte

    • Response time vs load time

    • Perception of loading

  • Groups and resources

    • Webperf meetups

    • User testing

    • Lynda.com (free to Toronto Public Library users)

    • Velocity Conference