Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal 8 Lessons From the Field pt 2: Enhancing Front End Drupal Development

240 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Drupal 8 Lessons From the Field pt 2: Enhancing Front End Drupal Development

  1. 1. Pavithra Raman - Solution Architect Ron Northcutt - Senior Solution Architect Enhancing Front End Drupal Development Drupal 8 Lessons From the Field
  2. 2. Agenda – Primary strategy – Specific tactics – Testing & Tools
  3. 3. Primary strategy
  4. 4. Make the page lean – Small – Low downloaded asset size – Fast – Short communication time – Responsive – Right assets for the page and device
  5. 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. 6. All computers wait at the same speed.
  7. 7. Specific tactics
  8. 8. – TTFB & TTLB – Page weight – Image Styles – Responsive image styles – CSS/JS – Server cache layers – Caching – Edge CDN – Purging
  9. 9. 200-500ms “Good” TTFB (Time To First Byte) https://www.rackaid.com/blog/time-to-first-byte/
  10. 10. 1s to 3s “Good” TTLB (Time To Last Byte) https://yoast.com/page-speed-ranking-factor/
  11. 11. Page weight http://www.httparchive.org/interesting.php (October 16th)
  12. 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. 13. Images http://www.httparchive.org/interesting.php (October 16th) 54%
  14. 14. Image styles (core)
  15. 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. 16. Responsive “picture” element (core) https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
  17. 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. 18. Video http://www.httparchive.org/interesting.php (October 16th) 23%
  19. 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. 20. CSS/JS http://www.httparchive.org/interesting.php (October 16th) 16%
  21. 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. 22. Rendered content http://www.httparchive.org/interesting.php (October 16th) 1.5%
  23. 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. 24. Server caching from the outside-in Varnish
  25. 25. Server caching from the outside-in Varnish Memcache
  26. 26. Server caching from the outside-in Varnish Database cache Memcache
  27. 27. Server caching from the outside-in Varnish Regenerate Memcache Database cache
  28. 28. Earth to a satellite and back ~ 300ms Signal around the earth ~ 200ms
  29. 29. When the speed of light is the limitation... Earth to a satellite and back ~ 300ms Signal around the earth ~ 200ms
  30. 30. When the speed of light is the limitation... deliver from the edge.
  31. 31. Edge cache - CDN
  32. 32. Edge cache - CDN
  33. 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. 34. Specific tactics – TTFB & TTLB – Page weight – Image Styles – Responsive image styles – CSS/JS – Server cache layers – Caching – Edge CDN – Purging
  35. 35. Testing & Tools
  36. 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. 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. 38. All computers wait at the same speed.
  39. 39. So, don’t make them wait!
  40. 40. Questions
  41. 41. Thank You

×