Speed matters – we all know that. But do clients, web site owners and managers know about it? Are they convinced that performance is important not only to for providing better user experience but also affects the bottom line? This post gives you the tools (with a downloadable presentation) you can use to “sell” performance to clients and bosses.
This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Some of the tricks are brand new, some are very, very old, IE5.5. old. They all have in common the “fewer or no images” mantra.
Perceived page loading time is just as important as the real loading time. And when it comes to user perception, visible indication of progress is always good. The user gets feedback that something is going on (and in the right direction) and feels much better. Using multiple content flushes allows you to improve both the real and the perceived performance.
Fast processors give us the impression that we can do anything and get away with it. And for small programs it’s true. But writing lots of bad JavaScript can very quickly get into situations where your code begins to crawl. So just like an average driver needs training to drive a race car, we need to master the ins and outs of this language if we’re to keep it running smoothly in large scale applications.
Welcome to the new game show: “Will it reflow?” where we’ll look into a few cases where it’s not so clear if the browser will do a reflow or just a repaint.
DOM access is usually the runtime bottleneck in JavaScript web applications. Let’s see why is that, why DOM is inherently slow and, of course, what to do about it.
What do all these “R” words mean? How does the browser go about displaying your page on the screen, given a chunk of HTML, CSS and possibly JavaScript? When do these processes hurt the user experience and how to speed up?
When trying to quantify the performance of a Web site, we most commonly mean the response time. The two most common methods of gathering response time data are from Field Metrics and Synthetic Measurement. Field Metrics measure response time from real user traffic, and generally rely on JS instrumentation of the pages, or toolbars to […]
JavaScript has a dark side to it that not many people are aware of. It causes the browser to stop everything that it’s doing until the script has been downloaded, parsed and executed. This is in sharp contrast to the other dependencies which get loaded in parallel–limited only by the number of connections the browser […]
So far we’ve looked at having fewer components in the waterfall (meaning less HTTP requests) and also making the components as small as possible. The next task is to make sure that the waterfall is as short as possible – meaning let it fall freely, without interruptions and have the browser download as many components as possible in parallel.
Debunking PNG and PNG8 misconceptions, comparing GIF and PNG filesizes and even a song about PNG with an HTML5/CSS3 video clip
Let’s continue the topic of reducing file sizes started with the previous post and talk about making images smaller. Engineer’s guide to smaller images Just to set the frame of the discussion – this is not about using Photoshop or setting the quality of the JPEGs and so on. I realize that we, web developers, […]
After removing all the extra HTTP requests you possibly can from your waterfall, it’s time to make sure that those that are left are as small as they can be. Not only this makes your pages load faster, but it also helps you save on the bandwidth bill. Your weapons for fighting overweight component include: […]
Looking back at the life of Page 2.0. and all the opportunities for optimization, the posts I’ve put up so far as part of this advent calendar have been mostly around optimizing the waterfall – making it shorter by having fewer components in it. This post will be probably the last in this area of […]
One of Yahoo!’s first batch of performance best practices has always been “Avoid duplicate scripts” (check Steve Souders’ post). Later we added “… and styles”. This is a pretty obvious, kind of a “Duh!” type of recommendation, it’s like saying “Avoid sleep() in your server-side scripts”. But it didn’t come up out of thin air, […]
RSS is a wonderful format to get information from all kind of different sources. It is dead easy to provide, has a predictable (albeit limited) format and is very easy to use. The problem of course is that with the amount of different feeds used in one page its performance goes down. The reason is […]
UPDATE: While this post is an interesting study, the problem it solves turns out to be much simpler. The details are here. In resume: you need a closing separator and it all works fine in IE7/Vista/Win7 Let’s start this post as a dialog: – Data URIs are a way to embed the base64-encoded content of […]
Last night I talked about the benefits of reducing the number of page components and the resulting elimination of HTTP overhead. A little carried away into making the case (because, surprisingly, I still meet people that are not convinced about the benefits) I didn’t talk about some of the drawbacks and pain points associated with […]
Let’s talk a but about waterfall optimization – the first thing that happens in Mr.Page’s life. The best way to optimize and speed up the waterfall is to have less stuff in it. The fewer page components, the faster the page – simple as that. Fewer components vs. component weight The size of the page […]
Measuring time is an important activity in your performance efforts. After all, how else would you know if gzipping your javascripts helped or it didn’t matter, or it slowed you down (because your server is now busier)? You have to measure and monitor what you measure in order to quantify whether or not you’re making […]
There’s a number of performance rules and best practices that every web developer should know. Some of them are really simple and straightforward – like turning on compression for example. It’s so simple it’s a sin not to do it. Actually someone from Google search (Kyle Scholz or Yaron Friedman) said that every extra byte […]
While theoretically you can speed up your site by just blindly following advice from this blog and other sources, it is much better to understand what’s going on on the page and what you’re dealing with. That’s where the tools come in. Some tools give you insight about the network activities going on between the […]
As you’ve probably heard (and maybe all too often), we live in Web 2.0. This may mean different things to differently inclined folks but for us developers it means more rich Ajaxy pages, communicating more frequently with the server, one-page type of apps (think Gmail). Where “the web as she was meant to be” used […]