Not too long ago, front-end performance was a mere afterthought. Something that was postponed to the end of a project and that didn’t go much beyond minification, asset optimization, and maybe a few adjustments on the server’s config file. But things have changed. We have become more conscious of the impact performance has on the user experience, and the tools and techniques that help us cater for snappy experiences have improved and are widely supported now as well.
Time to roll up your sleeves and make use of these possibilities! A while ago, we challenged your coding skills in the CSS Grid Challenge, now we have something new to tickle your brains: The Front-End Performance Challenge. A perfect opportunity to apply everything you’ve learned about Service Workers, HTTP/2, Brotli and Zopfli, resource hint and other optimization techniques in one project. And, of course, there’ll be a smashing prize waiting for one lucky winner in the end.
The Challenge
Show off the performance of your site or your project — use everything you can to make your website perform blazingly fast! Please note that the final visual appearance should be identical before and after (font loading might differ and reflows are acceptable but should be kept to a minimum). You can use this checklist as a guideline and dive into performance optimization for everything from image assets and web fonts delivery to HTTP/2 and Service Workers.
The deadline is the 24th of November, 2017.
Here are a few things you can do to enhance your chances of winning:
- Optimize as much as you can: We’ll be looking into Lighthouse and WebPageTest as well as the complexity of the site you’re working on.
- You don’t have to optimize a personal blog: The more advanced the project is, the better chances of winning you have.
- The most critical metrics are the first meaningful paint and the time to interactive.
So, What Can You Win?
After the deadline has ended, we’ll award a smashing prize to one lucky winner. It has to do with web performance, but see for yourself:
- A roundtrip flight to London,
- Full accommodation in a fancy hotel,
- A ticket to SmashingConf London 2018, a new front-end, performance-focused conference, taking place Feb 7–8, 2018,
- A Smashing workshop of your choice.
Join In!
Ready to take on the challenge? We’d love to see how you’ll tackle it!
What You Need To Deliver
- Performance results before and after (using WebPageTest and Lighthouse).
- A brief description/strategy of the work you did.
Once you have everything together, please send us your entry to challenge@smashingmagazine.com. The deadline is the 24th of November. The winner will be announced on the 4th of December, 2017.
Resources To Get Started
Last but not least, here are some resources to kick-start your performance optimization endeavor. Have fun!
- Improving Web Fonts Delivery
Zach Leatherman’s “Comprehensive Guide To Font Loading Strategies” explains the ins and outs of approaches such as FOUT with a Class and Critical FOFT. - Improving CSS Delivery
Dean Hume summarized an easy way to inline critical CSS into the<head>of your pages, even when your site contains different templates. - Getting Started With Service Workers
Lyza Danger Gardner wrote up her gotchas and the bugs she ran into when making a Service Worker. Also be sure to check out her “Pragmatist’s Guide to Service Workers,” a GitHub repository with Service Worker code examples. - Dealing With Third-Party Scripts
Damien Jubeau shares useful tips and techniques to deal with third-party content such as social network widgets, advertising and tracking scripts, and explains their impact on performance. - Moving To HTTP/2
HTTPS is a must for websites. Vladislav Denishev’s complete guide to switching from HTTP to HTTPS helps you master the transition. - HTTP/2 Server Push
Server Push allows you to send site assets to the user before they’ve even asked for them. Jeremy Wagner’s comprehensive guide to Server Push explains everything from how it works to the problems it solves. - Progressive Web App
Progressive Web Apps can replace all of the functions of native apps and websites at once. Ada Rose Edwards summarized do’s and don’ts on how to make them. - Brotli/Zopfli Compression
Do you already use Brotli or Zopfli compression? The lossless data format Brotli appears to be more effective than Gzip and Deflate, while Zopfli is a good solution for resources that don’t change much and are designed to be compressed once and downloaded many times. - Resource Hints
Resource hints are a good way to warm up the connection and speed up delivery, saving time ondns-prefetch,preconnect,prefetch,prerenderandpreload. - CDNs Supporting HTTP/2
Concerns over performance have long been a common excuse to avoid security obligations. In reality, TLS has only one performance problem: It’s not used widely enough. Everything else can be optimized. - Responsive Images
Eric Portis wrote up how to get responsive images right — with<picture>andsrcset. - Caching
If you need a little refresher on caching, Ilya Grigorik and Jake Archibald have got you covered. - Optimizing For First Meaningful Paint
First Meaningful Paint is the paint after which the biggest above-the-fold layout change has happened. The lower its score, the faster that the page appears to display its primary content.
With all of this, you should be well-equipped for the challenge. Need a checklist? Here we go. We’re already looking forward to your submissions and to hearing your optimization stories!
(il)