<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>
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Drupal 8 Lessons From the Field pt 2: Enhancing Front End Drupal Development
1. Pavithra Raman - Solution Architect
Ron Northcutt - Senior Solution Architect
Enhancing Front End Drupal
Development
Drupal 8 Lessons From the Field
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
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.
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
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
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