<p>In today’s fast paced world, the speed of digital experiences is important. <strong>Organizations with slow websites risk customer disloyalty, cart abandonment and bad SEO scores</strong>. Overall, it’s a poor user experience. You can insulate yourself from the risks of a slow site by optimizing your frontend - and anything that affects the end users’ experiences on the site: from updating and storing content, processing data, commerce checkout process.</p> <p>In <a href="https://www.acquia.com/resources/webinars/drupal-8-lessons-field-what-continuous-delivery-and-why-its-important" target="_blank">part one</a> of “Drupal 8 Lessons from the Field”, we covered a developer’s journey and strategies to optimize project delivery using CD/CI techniques and tools. In part 2 of “Drupal 8 Lessons from the Field”, we’ll share our experiences tuning up and enhancing frontend and backend Drupal applications.</p> <p>In this session, you’ll <strong>learn about the frontend i.e. the presentation layer on Drupal and some of the best practices for it</strong>. Drupal’s frontend (AKA presentation layer), is very flexible - enabled by amazing templating engines and content reuse. Still, teams responsible for the front end need to ensure that the page displays are well cached, fast rendering and look good not just for human consumption but also to machines and AI tools that power disability assisting programs as well search engine bots that are trying to index your site.</p> <p>We shall cover some of the best practices like:</p> <ul> <li>TTFB - Time to First Byte</li> <li>Page Weight</li> <li>Image / Media Optimization, including lazy loading</li> <li>CSS/JS Aggregation/Compression</li> <li>Frontend caching - Varnish</li> <li>Using a CDN</li> <li>Clean templates </li> <li>Content theming and display styles</li> <li>Improving content reuse</li> <li>Acquia Lightning</li></ul>

1. Pavithra Raman - Solution Architect
Ron Northcutt - Senior Solution Architect
Enhancing Front End Drupal
Development
Drupal 8 Lessons From the Field

2. Agenda
– Primary strategy
– Specific tactics
– Testing & Tools

3. Primary strategy

4. Make the page lean
– Small
– Low downloaded asset size
– Fast
– Short communication time
– Responsive
– Right assets for the page and device

5. Fight the good fight, but compromise
Designer Developer
?
● Client side performance
● Larger assets
● Videos and media
● Make it app-like
● Goal: Visually attractive
and engaging experience
● Server side performance
● Compressed assets
● Content generation
● Reduce response time
● Goal: Cacheable and
scalable content/asset
delivery

6. All computers wait at
the same speed.

7. Specific tactics

8. – TTFB & TTLB
– Page weight
– Image Styles
– Responsive image styles
– CSS/JS
– Server cache layers
– Caching
– Edge CDN
– Purging

9. 200-500ms
“Good” TTFB (Time To First Byte)
https://www.rackaid.com/blog/time-to-first-byte/

10. 1s to 3s
“Good” TTLB (Time To Last Byte)
https://yoast.com/page-speed-ranking-factor/

11. Page weight
http://www.httparchive.org/interesting.php (October 16th)

12. Page weight
http://www.httparchive.org/interesting.php (October 16th)
Average LTE
speed is 5-
12Mbps
This page would
take 2-5 seconds
to download!

13. Images
http://www.httparchive.org/interesting.php (October 16th)
54%

14. Image styles (core)

15. Responsive “picture” element (core)
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
<img srcset="default.jpg"
alt="My image in one size">
<picture>
<source srcset="smaller.jpg"
media="(max-width: 480px)">
<source srcset="medium.jpg">
media="(max-width: 768px)">
<img srcset="default.jpg"
alt="My image in different sizes">
</picture>

16. Responsive “picture” element (core)
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015

17. Bonus! Image compression!
ImageAPI Optimize (alpha)
– GD library
– Lossless optimization
– Works with any toolkit (GD or
Imagemagick)
– Pluggable optimization tools
https://www.drupal.org/project/imageapi_optimize

18. Video
http://www.httparchive.org/interesting.php (October 16th)
23%

19. Don’t
Video assets should be served from a 3rd party that optimizes
streaming video delivery for fluctuating connection speeds.
ie: YouTube, Vimeo, Brightcove, etc.

20. CSS/JS
http://www.httparchive.org/interesting.php (October 16th)
16%

21. CSS/JS - aggregation and compression
Core aggregation
1. Reduce the #
of files
2. Reduce the size
of files
3. “Lazy load”
files per page

22. Rendered content
http://www.httparchive.org/interesting.php (October 16th)
1.5%

23. Generating the content takes time...
… so do it once and save
it until it needs to be
redone.
That’s caching.
Render cache (core)
– Page cache
– Dynamic page cache
– Views cache
– Block cache

24. Server caching from the outside-in
Varnish

25. Server caching from the outside-in
Varnish
Memcache

26. Server caching from the outside-in
Varnish
Database cache
Memcache

27. Server caching from the outside-in
Varnish
Regenerate
Memcache
Database cache

28. Earth to a satellite and back ~ 300ms
Signal around the earth ~ 200ms

29. When the speed of light is the limitation...
Earth to a satellite and back ~ 300ms
Signal around the earth ~ 200ms

30. When the speed of light is the limitation...
deliver from the edge.

31. Edge cache - CDN

32. Edge cache - CDN

33. Purge module
“The purge module facilitates cleaning external caching
systems, reverse proxies and CDNs as content actually
changes.
This allows external caching layers to keep unchanged
content cached infinitely, making content delivery more
efficient, resilient and better guarded against traffic
spikes.”
https://www.drupal.org/project/purge

34. Specific tactics
– TTFB & TTLB
– Page weight
– Image Styles
– Responsive image styles
– CSS/JS
– Server cache layers
– Caching
– Edge CDN
– Purging

35. Testing & Tools

36. Testing
Here are some tools that can be used to test front-end performance:
● YSlow profiles pages and offers recommendations for speeding them up.
● Network tab of Firebug/Chrome/Safari/Opera devtools.
● Learn to read waterfall charts from Strangeloop Networks.
● WebPageTest.org offers front-end performance testing from various locations
worldwide in the browser of your choice.
● gtmetrix.com & loads.in also offer front-end performance testing.
● jdrop.org allows you to collect data on mobile devices and analyze it on a bigger
computer using JavaScript-powered storage of test results.
● PageSpeed Insights offers website performance insights and provides
recommendations to improve page speed on all devices.
https://www.drupal.org/docs/8/mobile/front-end-performance

37. Tools
Here is a list of tools that can help you achieve the strategies above:
● Use PageSpeed Insights to get the list of recommendations for your
website.
● Compress theme assets with image compressor software like tinypng,
tinyjpg or compressjpeg.
● Distribute your assets with CDN networks like Acquia Cloud Edge.
● Use Chrome devtools Audits tab to check what CSS is not being used on
the current page.
https://www.drupal.org/docs/8/mobile/front-end-performance

38. All computers wait at
the same speed.

39. So, don’t make
them wait!

40. Questions

41. Thank You