by Thomas Lattimore

Front-end Rapport #6

Making RWD sites load fast as heck

Speedy web pages can be tough to build, and many factors come into play. This great read by Scott Jehl covers ways we can improve Front-end performance. It offers insights on how to add page assets, ways to measure page weight, and other useful tips.

Our take

Some studies say as much as 80–90% of page load time happens on the client side. If we build pages with an eye towards more efficient browser rendering, the impact on overall performance can be dramatic. The most valuable parts of Scott's article are the tools. Humans can't quantify what we perceive in milliseconds, and we don’t think in terms of bytes. Using automated utilities to measure these units accurately can help us get a more accurate picture of real world performance, and catch changes that make things better or worse. These subtle improvements make projects more efficient and delightful for users. As our requirements with responsive web design become more complex, prioritizing performance becomes even more important.

CSS Triggers

Sometimes it can be tough to figure out what actually occurs in the browser when various CSS properties are used. Thankfully, Paul Lewis has written a tool that can decipher what CSS properties trigger layout, paint, or composite actions in the browser. By understanding these better we can make real improvements to Front-end performance.

Vim for Front-end Coding

Some say that Vim is the most extensible text editor available, but it can be intimidating to get up to speed with this application. Among other things, it requires UNIX experience that's more commonly associated with Back-end Developers and SysAdmins than Front-End devs. In his article, Ben Frain shares great tips on how to get comfortable with Vim as your editor of choice.

Full-width pinned layouts with flexbox

Complex layouts can be difficult, given the limited set of CSS properties most browsers support. Thankfully, the Flexbox layout model is beginning to get enough traction to be a viable option for some projects. In this article, Zoe Gillenwater shares an example of a complex “pinned” layout. She shows off two approaches: the display: table property, and the more elegant Flexbox solution that's catching on.

What Happened Recently

  • IE11 mobile now supports -webkit prefixes — via @stopsatgreen
  • The Responsive Images Community Group (RICG) are facing a name change as work shifts from the successful <picture> implementation to other responsive solutions (element queries). —@respimg
  • Marcos Caceres made a proposal to add a "<picture> + <source> generator" for Firefox Developer Tools — @marcosc
  • CSS outlines in Firefox expand to cover overflowing text —@simevidas
  • A call was made for companies to fund Ruby Sass performance improvements. —@nex3

Daily News

Craving more? Subscribe to our Flipboard mag for daily updates or sign up for our newsletter below.

Front-end Rapport

Enter your email address

powered by TinyLetter