Pantheon.io
Hi, I’m Steve Persch
● Agency and Community Engineer
● @stevector and Twitter, Github, D.O
● @DrupalHaikus on Twitter
Pantheon.io
Marc Drummond
● Front-end Developer at Lullabot
● Co-maintainer of Drupal core’s
Breakpoint and Responsive Image
modules
● Worked with fellow Lullabots to develop
the Drupal AMP module and theme
● @MarcDrummond Twitter
● mdrummond on drupal.org
Pantheon.io
What a website does
● Sends responses from a server
● over a network
● to be interpreted by a browser
Pantheon.io
What we’re covering
● Server-side
● Network
● Client-side
● The underlying ‘why’
Key architectural points related to speed:
Pantheon.io
What a website does
More abstractly:
● Converses with a client
● Informs the world about an organization
Pantheon.io
PROBLEM
● WHY? - The server is not responding with
HTML fast enough
● WHY? - (Web 1.0 answer) There is a limit to
how fast a .html file is read off a hard disk
The website is too slow
Pantheon.io
What does Varnish do?
http://book.varnish-software.com/4.0/chapters/HTTP.html
Pantheon.io
PROBLEM
● WHY? - The requested URL is not in Varnish
● WHY? - Check the HTTP Headers
The HTML response is too slow
Pantheon.io
PROBLEM
● WHY? - The site has no reverse-proxy or CDN
● WHY? - It is running on custom servers
● AND - No internal expertise
● WHY? - internal politics
The HTML response is too slow
Pantheon.io
Solved problems
● At what number of sites is it cost effective to manage
your own Varnish config?
● What decisions will make your site faster and your
team faster?
Pantheon.io
PROBLEM● Too many files, too many modules
● Too many queries, slow queries
● Too much memory is used, too many nodes
● Too many function calls, too many calls to the
same function
Drupal responds slowly - why?
Pantheon.io
PROBLEM● WHY? - Too many modules
● WHY? - Overlapping/duplicate modules
● WHY? - Lack of clarity/history among team
Drupal responds slowly
Pantheon.io
Treat “slow” like a bug
● Do you have tests for the module’s functionality?
● Can you look through your git history?
● Project management tickets?
● Developer documentation on modules?
Pantheon.io
PROBLEM● WHY - “Slow” was not defined upfront.
● WHY - The team building the site struggles to
define many requirements in advance.
○ User personas, acceptance criteria, behavioral testing / unit testing strategies.
Server responds slowly
Pantheon.io
For any part of your site
● Is it secure?
● Is it accessible?
● Does it behave as expect?
● Who uses it?
● How fast should it execute?
How do you know:
Pantheon.io
PROBLEM● WHY - Each file requires its own connection
● WHY - We aren’t using HTTP2 yet
Loading assets takes too long
Pantheon.io
PROBLEM● WHY - Each file requires its own connection
● WHY - We aren’t using HTTP2 yet
● WHY - We aren’t using HTTPS
● AND - We aren’t using a CDN
Loading assets takes too long
Pantheon.io
PROBLEM● WHY - They are too far away
● And - The speed of light is only so fast
Loading assets takes too long
Pantheon.io
PROBLEM● WHY? - The browser takes too long to paint
● WHY? - We have not optimized our render path
● AND now it’s time to learn about browser
rendering
The front-end is too slow
Pantheon.io
Rendering paths
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en
Pantheon.io
Rendering paths
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
whenever the parser encounters a script it has to stop and
execute it before it can continue parsing the HTML… avoid and
minimize the use of blocking JavaScript, especially external
scripts that must be fetched before they can be executed.”
―Google developer documentation
https://developers.google.com/speed/docs/insights/BlockingJS
Pantheon.io
PROBLEM● WHY? - The CSS takes too long to load
● WHY? - The site has too much CSS
● WHY? - Unused CSS rules
● WHY? - We are afraid to edit our CSS
● WHY? - We don’t have a CSS system
The front-end is too slow
Tricks like trying to load a bunch of stuff in parallel, or aggressive
caching, might seem like appealing shortcuts, but nothing
replaces just auditing the code and making it need less ‘stuff.’”
― Craig Silverstein
Forgo JS Packaging? Not so Fast
http://calendar.perfplanet.com/2015/forgo-js-packaging-not-so-fast/
Pantheon.io46
/** * Add JS to every page. Used only on home page. */function custom_js_adder_init() { drupal_add_js(‘has_not_been_audited_since_2011.js’);}
Do you know where your JS is coming from?
Pantheon.io47
/** * Attach libraries to relevant render arrays. */function custom_preprocess_node(&$variables) { &$variables[‘#attached’][‘library’][] = ‘nameof/lib’;}
Attach libraries to render arrays
Pantheon.io
When you have a lot of JS/CSS files...
● Serve all individually
○ Each cached separately
○ Lots of HTTP request
● Package all CSS/JS per web page
○ 1 HTTP request
○ Poor caching
● Split the difference (Drupal core)
Pantheon.io
PROBLEM
● WHY? - Fonts are blocking your page load
● WHY? - We have not optimized our font
rendering strategies using current
techniques.
The front-end is too slow!
Pantheon.io
PROBLEM
● WHY? - We’re loading higher resolutions of
images than necessary
● WHY? - One image file for all breakpoints is
not enough
The front-end is too slow!
Pantheon.io
PROBLEM
● WHY? - Too many third party widgets
● WHY? - No one feels responsible for them
The front-end is too slow!
Pantheon.io
PROBLEM
● WHY? - Too many third party widgets
● WHY? - Two sets of analytics tracker codes
● WHY? - Two groups of people analyze traffic
who don’t share any tools.
The front-end is too slow!
Pantheon.io
PROBLEM
● WHY? - Three ad networks
● And - two tracking tools
● And - two sharing tools
● So - Reset the table with AMP
The front-end is too slow!
Organizations which design systems … are constrained to
produce designs which are copies of the communication
structures of these organizations.”
― Melvin Conway (Conway’s Law)
Pantheon.io
When you’re in a meeting do you...
● Add agenda items ad-hoc
● Have factions who ignore each other
● Interrupt each other
● Repeat topics from previous meetings
● Start the meeting late
Pantheon.io
You are moving in the right direction when...
● You can describe how the website is built
● You can track changes over time
● You estimate the performance impact of a feature
● You start projects with performance limits
● decisions make your site AND team faster
● When performance is a boring topic