Why Your Site is Slow: Performance Answers for Your Clients
•
2 likes•1,023 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Why Your Site is Slow: Performance Answers for Your Clients
Similar to Why Your Site is Slow: Performance Answers for Your Clients (20)
More from Pantheon
More from Pantheon (12)
Recently uploaded
Recently uploaded (20)
Why Your Site is Slow: Performance Answers for Your Clients
- 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
- 5. PROBLEM
- 8. Pantheon.io What a website does ● Sends responses from a server ● over a network ● to be interpreted by a browser
- 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
- 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
- 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
- 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
- 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
- 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!
- 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!
- 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