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/
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.
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.
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.
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
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.
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
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/
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.
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’.
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
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