The document discusses reasons why websites can be slow and provides solutions to common performance issues. It covers server-side issues like slow response times from the server, lack of caching, and too many modules slowing down the server. Network-related causes like too many separate file requests and lack of HTTPS or CDN are addressed. Client-side problems like slow rendering times, large amounts of CSS and JavaScript, blocking scripts, and unnecessary third-party widgets slowing down page loads are also summarized. Specific techniques to improve performance like HTTP/2, responsive images, optimizing fonts and assets, and using frameworks like AMP are recommended.

1. Why Your Site Is Slow:
Performance Answers for Your
Clients

2. Pantheon.io
Hi, I’m Steve Persch
● Agency and Community Engineer
● @stevector and Twitter, Github, D.O
● @DrupalHaikus on Twitter

3. 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

4. Pantheon.io
Making a website

5. PROBLEM

6. The website
is slow!

8. Pantheon.io
What a website does
● Sends responses from a server
● over a network
● to be interpreted by a browser

9. Pantheon.io
Clients and servers
https://en.wikipedia.org/wiki/Client%E2%80%93server_model

10. Pantheon.io
What we’re covering
● Server-side
● Network
● Client-side
● The underlying ‘why’
Key architectural points related to speed:

11. Pantheon.io
What a website does
More abstractly:
● Converses with a client
● Informs the world about an organization

12. Server-side

13. 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

14. Pantheon.io
PROBLEM
● WHY? - The requested URL is not in Varnish
The HTML response is too slow

15. Pantheon.io
What does Varnish do?
http://book.varnish-software.com/4.0/chapters/HTTP.html

16. Pantheon.io
PROBLEM
● WHY? - The requested URL is not in Varnish
● WHY? - Check the HTTP Headers
The HTML response is too slow

17. Pantheon.io
Varnish relies on HTTP headers

18. Pantheon.io
Drupal core settings

19. 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

20. 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?

21. 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?

22. Pantheon.io
New Relic
(Now available for all Pantheon sites!)

23. Pantheon.io
PROBLEM
● WHY? - Too many modules
Drupal responds slowly

24. Pantheon.io
Can you have too many modules?

25. Pantheon.io
PROBLEM
● WHY? - Too many modules
● WHY? - Overlapping/duplicate modules
● WHY? - Lack of clarity/history among team
Drupal responds slowly

26. 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?

27. 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

28. 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:

29. Network

30. Pantheon.io
PROBLEM
● WHY - Each file requires its own connection
● WHY - We aren’t using HTTP2 yet
Loading assets takes too long

31. Pantheon.io
HTTP2
https://blog.cloudflare.com/introducing-http2/

32. 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

33. Pantheon.io
PROBLEM
● WHY - They are too far away
● And - The speed of light is only so fast
Loading assets takes too long

34. Pantheon.io
Content Delivery Network
https://www.fastly.com/network-map

35. Client-side

36. Pantheon.io
What’s on the agenda?

37. Pantheon.io
Look behind the numbers

38. 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

39. Pantheon.io
Rendering paths
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en

40. Pantheon.io
Rendering paths
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en

41. 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

42. Pantheon.io
Page rendering
https://pantheon.io/blog/test-website-wraith

43. 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

44. Pantheon.io
Delete CSS with confidence
https://pantheon.io/blog/test-website-wraith

45. 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/

46. Pantheon.io
/**
* 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?

47. Pantheon.io
/**
* Attach libraries to relevant render arrays.
*/
function custom_preprocess_node(&$variables) {
&$variables[‘#attached’][‘library’][] = ‘nameof/lib’;
}
Attach libraries to render arrays

48. 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)

49. Pantheon.io
Where is the decision implemented?

50. 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!

51. Pantheon.io
Fonts!
https://www.zachleat.com/web/comprehensive-webfonts/

52. 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!

53. Pantheon.io
Responsive Images
https://responsiveimages.org/

54. Pantheon.io
PROBLEM
● WHY? - Too many third party widgets
The front-end is too slow!

55. Pantheon.io
Copy/Pasting JS is easy

56. Pantheon.io
JavaScript share widgets
March 2015: https://jonsuh.com/blog/social-share-links/

57. Pantheon.io
PROBLEM
● WHY? - Too many third party widgets
● WHY? - No one feels responsible for them
The front-end is too slow!

58. 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!

59. 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!

60. Pantheon.io
AMP: Accelerated Mobile Pages

61. Organizations which design systems … are constrained to
produce designs which are copies of the communication
structures of these organizations.”
― Melvin Conway (Conway’s Law)

62. 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

63. 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

64. Q&A