Front-end Performance and Drupal

Having your cake and taking a few bites

Transcript

1. Front-end Performance and Drupal Having your cake and taking a few bites By Drew Bolles
2. Be a web developer
3. HTML, CSS, JavaScript, Browsers, Server Side Stuff (?) More JavaScript Any and all frameworks that deliver stuff to the web are an abstraction of these technologies. When in doubt, or trouble, or fatigue, return to the basics. The web stack
4. Browsers are king
5. Get to know your browsers The only requirements to connect to the web are an internet connection, and a web browser. Browsers are the gates to your sites and apps, and you should really get to know the keepers. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
6. Your browser's job is to render the assets you give it. If your site is slow it is your fault
7. Browser Anatomy Your browser reads the HTML it receives and turns that into the DOM. It reads from top to bottom, and any asset it comes across, it will try to download before continuing. This is why your CSS goes at the top, and your JavaScript at the bottom of the page. This is also why it’s important to minify and aggregate. The less code the browser has to go through, and the least amount of stops along the way*, the better. *in current HTTP protocol
8. Always load responsibly Always serve the least possible amount of code. Favor systems that require you to turn on features, rather than turn off the ones you’re not using. The goal is to only send what is absolutely critical to render the page, and asynchronously load the rest.
9. JS (and Filament Group) to the Rescue Load CSS <link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="path/to/mystylesheet.css"></noscript> To async your <script> tags, simply add the `defer` attribute. <script src=”path/to/script.js” defer></script>
10. Smarter Drupal asset attachment Make sure to only add a CSS or JS asset where needed. Don’t add things used on certain pages to your global assets. With Drupal 8 libraries, this becomes very easy to do. Twig makes it simple to load the library conditionally from the exact level that needs it.
11. Example field template
12. In summation • Smallest amount of code needed • CSS at top, JS at bottom • Minify, uglify, aggregate • Async load assets where possible • Make sure assets are loaded only where needed
13. Webpagetest.org
14. Makes me sound smarter than I am A tool for measuring your site, under varied conditions, with visual reports of your asset waterfall, and the time requirements of each. The most invaluable tool in my performance utility belt. webpagetest.org
15. Chapter Three’s Homepage
16. Insert saying about measuring and cutting Performance is like the blueberries in blueberry muffins. You can’t bake it in after the fact. Performance needs to be a consideration during all phases of the project. Measuring the impact of decisions before they hit the production servers is imperative. Things like performance budgets are key to fighting the continued upward spiral of our web page sizes.
17. How good is good enough? The Dream is 1k speed index (like golf, the lower the better) and under a 1 second start render. This is a very lofty goal, and in the wild anything under 2k speed index is acceptable, but could have a performance sprint done. Speed Index is the average time at which visible parts of the page are displayed. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics /speed-index
18. Images and their effect on the web
19. At what cost The web is “prettier” today than ever before, but it’s also freaking huge. The average site now clocks in at 2.3MB, with images a staggering 1.4MB on average. Holy moly. As web developers, that’s our fault, and if our best excuse is someone paid us then shame on us.
20. Education and minification Often clients are the ones uploading massive hero images, instead of following the guidelines your team meticulously crafted. I hear you. Routinely check your sites, find the bad images, and email somebody. Talk about image sizes in meetings, often, make it a priority. Find a desktop app that works, or a service to automate. Don’t settle for slow. tinypng.com, compressor.io, ImageOptim
21. Not just max-width: 100% A responsive image solution is an absolute must in a modern, performant website. Minification is great, but serving up a 2000 width image to a person on a phone is still evil. Plus, it’s not so bad. <img alt=”My sweet image” src=”path/to/smallest.jpg” srcset=”path/to/medium.jpg 700w, path/to/large.jpg 1200w” /> https://www.html5rocks.com/en/tutorials/responsive/picture-element/
22. And another one <picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> </picture>
23. Responsive images & Drupal Breakpoint and Responsive images are core in 8! Yay! 7 you’ll want to grab the breakpoints and picture contrib modules. They both allow you to define breakpoints, and map image cache sizes to them, generating the <picture> output for you.
24. Drupal’s responsive image settings
25. SVGs are the (present) future
26. It’s all math, man SVGs are code, and your browser likes code, it likes it a lot. It sends code heart emojis. Drupal 8 uses and recognizes SVGs by default. Drupal 8 loves code, too. What should we use SVGs for? Icons, logos, anything that can be cleanly represented as a vector image. The lifestyle photos of the city skyline you’re pretty sure is your city are still better as jpgs.
27. That’s right, SVG icons SVG icons are better than font icons. https://css-tricks.com/icon-fonts-vs-svg/ Smarter peeps than me have said it, but can confirm. The best reason I’ve heard in favor of font icons boils down to developer experience. Don’t choose tools that make yours or your team's life easier over your end-users’.
28. Also, super easy in a build system Gulp task gulp.task('icons', () => { return gulp.src('icons/**/*.svg') .pipe(rename({ prefix: 'icon-' })) .pipe(svgmin()) .pipe(svgstore({ inlineSvg: true })) .pipe(gulp.dest('../')); });
29. Adding to Durps and using Add to your html.html.twig file: <div style="display: none;">{% include active_theme_path() ~ '/assets/icons.svg' %}</div> Then use as so: <svg class=”icon icon-bars”> <use xlink:href=”#icon-bars”></use> </svg>
30. SVG icons tl:dr; 1. They’re code, so they get gzipped 2. Easy to build a SVG sprite of only the icons needed 3. Can be embedded to avoid an HTTP request 4. Relatively simple syntax 5. Complete control over each icon 6. Can do more advanced styling / animations
31. Advanced-ish and Experimental
32. Inling your critical assets Because the browser chokes on any asset it has to download, the absolute fastest way to render a website is to inline the CSS needed to render the in-view page and async load the rest. Sounds weird, and it is a little, but it works. https://www.smashingmagazine.com/2015/08/understanding-critical-css/ https://www.fourkitchens.com/blog/article/use-grunt-and-advagg-inline-critical -css-drupal-7-theme
33. Drew Bolles @bollskis github.com/drewbolles Go make fast stuff