Real Talk on Front End Performance

Written by Josh Fabean

12. May 2016

Well this session started off with the presenter Josh Koenig singing so you know it’s good. See the session page.

Time is holy and every moment previous! We have been trending in the wrong direction with web performance.

All the wonderful things you do on the backend don’t matter if your site’s front end sucks!

Your server response time does not matter if your user experience is super sucky.

Performance is moving up the stack.

Having websites perform faster means everyone wins and mkaes more money, that is important and stake holders need to know this.

How fast?

All the research says there is a 100ms threshold, 1s theshold & 10s threshold. The 100ms threshold is awesome! It makes people feel like they’re directly interacting with the product. The 1s time theshold is pretty good, it doesn’t break the train of thought. There is then the 10s theshold, is as far as you can go before people just leave, you lost them!

Delays like this

  • 38% increase in heart-rate
  • compraable to watching a horror movie
  • significantly more stress than waiting in line at a store

If this was easy I wouldn’t be here giving this talk to you.

HTTP2 is awesome, but it’s not pixie dust!

You cannot just throw varnish on something and call it good.

REAL TALK! You cannot beat the speed of light. A trip from SF to NY = ~4000km, light is 66% speed in fiber, 42ms round trip, ping time 81ms. So you’re already at your 100ms tipping point just with how fast the internet could be in best case scenario.

Most people are on mobile on crappy internet, and you’re ignoring them!

The average web page is now the size of Doom… What the heck is wrong with people?

30+ images, 15_ scripts, 4+ stylesheets.

Don’t just create an average website, Make the internet great again!

The 1% know this matters. The top 10% of websites aren’t trending back down in file size because they know it’s important.

We are the 99% of websites (most likely) we need to know about this and do the trend too.

Percieved performance is the only performance we should actually care about. If the server is slow, you’re screwed, but most likely it’s your frontend that’s bloated.

The DOM is your dominion, we are responsibilty for what goes down the wire. Don’t let Drupal put 1000 divs!

Need to obtimize your images!

Even when developing locally you should run on 3G for a little while just to know how it works.

Queueing on Chrome means you hit your limit of how many things you could download at the same time.

You cannot beat the speed of light, but you can use a CDN!

HTTP2, it doesn’t resolve us of all of our sins, but it is great!

  • http2
    • http1 is a bunch of back and forth
    • http2 request pipelining and everything just dumps through that.
    • we can now push at the protocol level

BigPipe! Most sites on Drupal 8 will be able to take advantage of the performance increases without having to do too much.

Previously before BigPipe Drupal had to render out the entire page before the user could see it. With BigPipe we can send out the parts that are cached immediately and then send the slow sutff later.

Drupal 7 & the web in general is a jungle out there, so many decisions to make and so few good instructions. Drupal 8 will give us much more to go on, there will be structure. You can stop wasting your time on a bunch of stupid crap.

None of this is free. (paying for things is good, we’re not Bernie supporters here)

Checklist!

  • Set performance goals
  • analyze DOM render waterfall
  • mobile perormance testing
  • inventory and cost page elements
  • target next stable state
  • mesaure change after releases

Get good data & analyze it!

We are all frontend developers!