background preloader

Performance/Speed/Bottlenecks/Etc | WebDev Topics

Facebook Twitter

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.

Why you should care about CSS page performance

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.

Pagespeed | Google

Making a Fast Website. It’s always been important to make your website fast.

Making a Fast Website

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. Closure Compiler Service. Defer Attribute (Chrome) What do defer and async mean?

Defer Attribute (Chrome)

By default, a <script src=... ></script> tag is evil! The browser must halt parsing the HTML until the script is downloaded and executed (since the script might call document.write(...) or define global variables that later scripts depend on). This means that any images and stylesheets that are after the script tag don't start downloading until after the script has finished downloading and executing. External scripts typically make the Web load much more slowly, which is why NoScript has become so popular. Microsoft introduced defer to solve the problem. HTML5 introduced the async attribute which may execute any time--possibly before the page has finished parsing or even before other defer/async scripts that are still downloading.

After all defer and async scripts have executed, the DOMContentLoaded and load events fire. A brief history of defer and async So what should a web developer use? There's no single rule to follow at this time. Snippet: Best Practices for Speeding Up Your Web Site. The Exceptional Performance team has identified a number of best practices for making web pages fast.

Best Practices for Speeding Up Your Web Site

The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content. JavaScript Performance. Last night I spoke at the San Francisco JavaScript Meetup.

JavaScript Performance

I gave a brand new talk called JavaScript Performance that focuses on script loading and async snippets. The snippet example I chose was the Google Analytics async snippet. The script-loading part of that snippet is only six lines, but a lot of thought and testing went into it. It’s a great prototype to use if you’re creating your own async snippet. I’ll tweet if/when the video of my talk comes out, but in the meantime the slides (Slideshare, pptx) do a good job of relaying the information. There are two new data points from the presentation that I want to call out in this blog post. Impact of JavaScript The presentation starts by suggesting that JavaScript is typically the #1 place to look for making a website faster. I wanted to test the Alexa Top 100 URLs with and without JavaScript. Eliminating the CSS bottleneck. A big part of accelerating websites is eliminating bottlenecks.

Eliminating the CSS bottleneck

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 could still benefit from losing this “stair” in the waterfall. So what can you do about it? I’ll warn up-front that this isn’t trivial to do, but it’s definitely doable if your heart is set on it.

Replace link & style tags with a JavaScript arrayFetch the data for each CSSApply CSS to the pageMaintain the correct orderAvoid FOUC by setting body visibility Update: CSS files consistently block other resources on IE8 and often IE9, but not on Firefox and Opera. 1. First thing to do is to replace your existing link tags with a JavaScript array holding the different links. Which browsers support <script async="async" /> The async support as specified by google is achieved using two parts: using script on your page (the script is supplied by google) to write out a <script> tag to the DOM.that script has async="true" attribute to signal to compatible browsers that it can continue rendering the page.

Which browsers support <script async="async" />

The first part works on browsers without support for <script async.. tags, allowing them to load async with a "hack" (although a pretty solid one), and also allows rendering the page without waiting for ga.js to be retrieved. The second part only affects compatible browsers that understand the async html attribute FF 3.6+ FF for Android All VersionsIE 10+ (starting with preview 2)Chrome 8+ Chrome For Android All versionsSafari 5.0+iOS Safari 5.0+Android Browser 3.0+ (honeycomb on up)Opera 15.0+Opera Mobile 16.0+Opera Mini None (as of 7.0) The "html5 proper" way to specify async is with a <script async src=" FF 4+IE 10+ (preview 2 and up)Chrome 12+Chrome For Android 32+Safari 5.1+No android versions.

Testing/Speed Test/Etc | Webdev