Andyedinborough/stress-css. Why you should care about CSS page performance. Development: The estimated time to read this article is 5 minutes If there’s one thing I’ve learned over the years as both a user and creator of websites, it’s that performance matters.
Whether it is how fast the page loads or how it behaves once it’s in place, how well that page works has a direct impact on my and other user’s opinions of that website. A website that performs quickly and smoothly feels high-quality and that feeling translates to the brand it represents. Can you imagine someone like BMW having a website that was slow and clunky? However, the mental association isn’t always so direct. As such, it’s important to make sure that our websites perform at their best, both for business reasons and as a matter of professional pride. How to measure page performance.
Making a Fast Website. It’s always been important to make your website fast.
Not only is it obvious visitors are going to prefer it but it’s now well-known that Google uses loading speed as a ranking metric. The initial page load of your website is perhaps the most important. The longer it takes to load the more visitors are going to press back and find an alternative. A slow website is something that could potentially frustrate visitors so it’s important to try and remove it from the equation. Jakob Nielsen is an authority on usability and has studied response times extensively.
Up to 100 milliseconds is perceived as instantaneous response Up to 1 second will be noticed by the user but their thought flow will remain uninterrupted. He makes a point of noting that these numbers haven’t changed over the years. It’s hard to get a page load under 1 second, but it’s the sweet spot people should be aiming for. If you’re still not convinced, there’s some interesting data out there if you dig around. YSlow External JS. Closure Compiler Service. Defer Attribute (Chrome) Best Practices for Speeding Up Your Web Site.
The Exceptional Performance team has identified a number of best practices for making web pages fast.
The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. One way to reduce the number of components in the page is to simplify the page's design. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. CSS Sprites are the preferred method for reducing the number of image requests.
A big part of accelerating websites is eliminating bottlenecks.
Scripts are likely the most discussed bottlenecks, but CSS files are equally bad. CSS files will block all subsequent downloads if there’s a script (internal or external) in between – which is the case on practically any real page. Most sites are affected by this bottleneck. Even extremely fast sites like webpagetest.org could still benefit from losing this “stair” in the waterfall.
Which browsers support <script async="async" />