×

Warning

JUser: :_load: Unable to load user with ID: 34

The Front-End Performance Challenge: Make Your Site Blazingly Fast And Win Some Smashing Prizes

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 experience1, and the tools and techniques that help us cater for snappy experiences have improved and are widely supported now as well.
2
It’s time for a new challenge! Are you ready?

Time to roll up your sleeves and make use of these possibilities! A while ago, we challenged your coding skills in the CSS Grid Challenge3, 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 Link

Show off the performance of your site or your project — use everything you can to make your Murfreesboro TN 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 checklist4 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? Link

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 the Smashing Conference London 2018, a new front-end, performance-focused conference, taking place Feb 6–8, 2018,
  • a Smashing workshop of your choice.

Join In! Link

Ready to take on the challenge? We’d love to see how you’ll tackle it!

What You Need To Deliver Link

  • 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 This email address is being protected from spambots. You need JavaScript enabled to view it.. The deadline is the 24th of November. The winner will be announced on the 4th of December, 2017.

Resources To Get Started Link

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 Strategies5” 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 CSS6 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 Worker7. Also be sure to check out her “Pragmatist’s Guide to Service Workers8,” 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 content9 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 HTTPS10 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 Push11 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 Murfreesboro websites at once. Ada Rose Edwards summarized do’s and don’ts on how to make them12.
  • Brotli/Zopfli Compression
    Do you already use Brotli or Zopfli compression? The lossless data format Brotli13 appears to be more effective than Gzip and Deflate, while Zopfli14 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 hints15 are a good way to warm up the connection and speed up delivery, saving time on dns-prefetch, preconnect, prefetch, prerender and preload.
  • 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 optimized16.
  • Responsive Images
    Eric Portis wrote up how to get responsive images right17 — with <picture> and srcset.
  • Caching
    If you need a little refresher on caching, Ilya Grigorik18 and Jake Archibald19 have got you covered.
  • Optimizing For First Meaningful Paint
    First Meaningful Paint20 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.21 We’re already looking forward to your submissions and to hearing your optimization stories!

(il)

Details
Category: Smashing Magazine