Pavithra Raman - Solution Architect

Ron Northcutt - Senior Solution Architect

Enhancing Front End Drupal Development

Drupal 8 Lessons From the Field

Agenda

– Primary strategy

– Specific tactics

– Testing & Tools

Primary strategy

Make the page lean

– Small

– Low downloaded asset size

– Fast

– Short communication time

– Responsive

– Right assets for the page and device

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

All computers wait at

the same speed.

Specific tactics

– TTFB & TTLB

– Page weight

– Image Styles

– Responsive image styles

– CSS/JS

– Server cache layers

– Caching

– Edge CDN

– Purging

200-500ms“Good” TTFB (Time To First Byte)

https://www.rackaid.com/blog/time-to-first-byte/

1s to 3s“Good” TTLB (Time To Last Byte)

https://yoast.com/page-speed-ranking-factor/

Page weight

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

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!

Images

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

54%

Image styles (core)

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>

Responsive “picture” element (core)

https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015

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

Video

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

23%

Don’tVideo assets should be served from a 3rd party that optimizes

streaming video delivery for fluctuating connection speeds.

ie: YouTube, Vimeo, Brightcove, etc.

CSS/JS

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

16%

CSS/JS - aggregation and compression

Core aggregation

1. Reduce the #

of files

2. Reduce the size

of files

3. “Lazy load”

files per page

Rendered content

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

1.5%

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

Server caching from the outside-in

Varnish

Server caching from the outside-in

Varnish

Memcache

Server caching from the outside-in

Varnish

Database cache

Memcache

Server caching from the outside-in

Varnish

Regenerate

Memcache

Database cache

Earth to a satellite and back ~ 300ms

Signal around the earth ~ 200ms

When the speed of light is the limitation...

Earth to a satellite and back ~ 300ms

Signal around the earth ~ 200ms

When the speed of light is the limitation...

deliver from the edge.

Edge cache - CDN

Edge cache - CDN

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

Specific tactics

– TTFB & TTLB

– Page weight

– Image Styles

– Responsive image styles

– CSS/JS

– Server cache layers

– Caching

– Edge CDN

– Purging

Testing & Tools

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

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

All computers wait at

the same speed.

So, don’t make

them wait!

Questions

Thank You