hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

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

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.

It's time for a new challenge! Are you ready?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 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:

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 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 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 Strategies6” 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 CSS7 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 Worker8. Also be sure to check out her “Pragmatist’s Guide to Service Workers9,” 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 content10 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 HTTPS11 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 Push12 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 them13.
  • Brotli/Zopfli Compression
    Do you already use Brotli or Zopfli compression? The lossless data format Brotli14 appears to be more effective than Gzip and Deflate, while Zopfli15 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 hints16 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 optimized17.
  • Responsive Images
    Eric Portis wrote up how to get responsive images right18 — with picture and srcset.
  • Caching
    If you need a little refresher on caching, Ilya Grigorik19 and Jake Archibald20 have got you covered.
  • Optimizing For First Meaningful Paint
    First Meaningful Paint21 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.22 We’re already looking forward to your submissions and to hearing your optimization stories!

(il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
  2. 2 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/6901b_performance-challenge-800w-opt.png
  3. 3 https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
  4. 4 https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
  5. 5 https://smashingconf.com/
  6. 6 https://www.zachleat.com/web/comprehensive-webfonts/
  7. 7 https://www.smashingmagazine.com/2015/08/understanding-critical-css/
  8. 8 https://www.smashingmagazine.com/2016/02/making-a-service-worker/
  9. 9 https://github.com/lyzadanger/pragmatist-service-worker
  10. 10 https://blog.dareboost.com/en/2017/03/third-party-content-performance-security/
  11. 11 https://www.smashingmagazine.com/2017/06/guide-switching-http-https/
  12. 12 https://www.smashingmagazine.com/2017/04/guide-http2-server-push/
  13. 13 https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/
  14. 14 https://github.com/google/brotli
  15. 15 https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/
  16. 16 https://w3c.github.io/resource-hints/
  17. 17 https://istlsfastyet.com/
  18. 18 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
  19. 19 https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en
  20. 20 https://jakearchibald.com/2016/caching-best-practices/
  21. 21 https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint
  22. 22 https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/

↑ Back to top

Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2017/10/front-end-performance-challenge/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.