Why Your Site Is Slow:Performance Answers for Your

Clients

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

Making a website

PROBLEM

The website is slow!

Pantheon.io

What a website does

● Sends responses from a server

● over a network

● to be interpreted by a browser

Pantheon.io

Clients and servers

https://en.wikipedia.org/wiki/Client%E2%80%93server_model

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

Server-side

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

PROBLEM

● WHY? - The requested URL is not in Varnish

The HTML response 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

Varnish relies on HTTP headers

Pantheon.io

Drupal core settings

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

New Relic (Now available for all Pantheon sites!)

Pantheon.io

PROBLEM● WHY? - Too many modules

Drupal responds slowly

Pantheon.io

Can you have too many modules?

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:

Network

Pantheon.io

PROBLEM● WHY - Each file requires its own connection

● WHY - We aren’t using HTTP2 yet

Loading assets takes too long

Pantheon.io

HTTP2

https://blog.cloudflare.com/introducing-http2/

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

Content Delivery Network

https://www.fastly.com/network-map

Client-side

Pantheon.io

What’s on the agenda?

Pantheon.io

Look behind the numbers

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

Page rendering

https://pantheon.io/blog/test-website-wraith

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

Pantheon.io

Delete CSS with confidence

https://pantheon.io/blog/test-website-wraith

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

Where is the decision implemented?

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

Fonts!

https://www.zachleat.com/web/comprehensive-webfonts/

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

Responsive Images

https://responsiveimages.org/

Pantheon.io

PROBLEM

● WHY? - Too many third party widgets

The front-end is too slow!

Pantheon.io

Copy/Pasting JS is easy

Pantheon.io

JavaScript share widgets

March 2015: https://jonsuh.com/blog/social-share-links/

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!

Pantheon.io

AMP: Accelerated Mobile Pages

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

Q&A