Posts Tagged ‘Performance’

We are pleased to present below all posts tagged with ‘Performance’.

Maintainable Code Using White Space For Readability In HTML And CSS

Right up front, I’ll offer some simple advice: In production, your code should be as performance-friendly as possible. This means, Gzip’ing, concatenating and minifying as many assets as possible, thus serving the smallest possible files and the least number of files.

Using White Space For Readability In HTML And CSS

I don’t think anyone would argue that these suggestions aren’t best practices (even if we don’t implement them in every project). Now that we’ve got that out of the way, how can we use white space in development code to ensure that our files are as readable and maintainable as possible?

Read more...

Coding Q&A: CSS Performance, Debugging, Naming Conventions

Howdy folks! Welcome to another round of Smashing Magazine CSS Q&A — the final one, as of now. One more time, we'll answer the best questions which you sent us about CSS.

Coding Q&A: CSS Performance, Debugging, Naming Conventions

It was a great experience to run this Q&A with you - thanks a lot for sharing all your questions with us! We hope we answered them at the best possible, and we'll surely be back with new and exciting Q&A rounds in the future. Enjoy Chris' last round on CSS performance, best practices on CSS class naming, and more!

Read more...

Bandwidth Media Queries? We Don’t Need ’Em!

From time to time, when a discussion is taking place about ways to implement responsive images, someone comes along and says, “Hey, guys! What we really need is a media query that enables us to send high-resolution images to people on a fast connection and low-resolution images to people on a slow connection.” At least early on, a lot of people agreed.

Media query download tests

At first glance, this makes a lot of sense. High-resolution images have a significant performance cost, because they take longer to download. On a slow network connection, that cost can have a negative impact on the user’s experience.

Read more...

Burning Excessive Code The Vanilla Web Diet

Editor's note: This is an introductory article about a book idea to be published by Smashing Magazine with Chris Heilmann. Check out what we propose as an idea — explaining a way to reconsider how we build websites to ensure they are leaner and more future-proof. At the end of the article, we'd ask you to fill out a quick survey to show your interest.

The Vanilla Web Diet

The Web as it is now is suffering from an obesity problem. If you surf the Web on a flaky mobile connection or some hotel wireless, you'll find yourself a lot of times staring at a page or app that doesn't do anything and doesn't tell you what is going on either. The spinner in the tab or the URL bar seems to be the thing that gets the most mileage in browsers.

Read more...

Performance Writing Fast, Memory-Efficient JavaScript

JavaScript engines such as Google’s V8 (Chrome, Node) are specifically designed for the fast execution of large JavaScript applications. As you develop, if you care about memory usage and performance, you should be aware of some of what's going on in your user's browser's JavaScript engine behind the scenes.

Writing Fast, Memory-Efficient JavaScript

Whether it’s V8, SpiderMonkey (Firefox), Carakan (Opera), Chakra (IE) or something else, doing so can help you better optimize your applications. That's not to say one should optimize for a single browser or engine. Never do that. There are many common pitfalls when it comes to writing memory-efficient and fast code, and in this article we’re going to explore some test-proven approaches for writing code that performs better.

Read more...

Analyzing Network Characteristics Using JavaScript And The DOM, Part 1

As Web developers, we have an affinity for developing with JavaScript. Whatever the language used in the back end, JavaScript and the browser are the primary language-platform combination available at the user’s end. It has many uses, ranging from silly to experience-enhancing.

In this article, we’ll look at some methods of manipulating JavaScript to determine various network characteristics from within the browser — characteristics that were previously available only to applications that directly interface with the operating system. Much of this was discovered while building the Boomerang project to measure real user performance.

Read more...

CSS3 vs. CSS: A Speed Benchmark

I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At our company, we've happily been using CSS3 on client websites for over a year now, and I find that implementing many of these properties right now is the most sensible way to build websites.

[fblike]

Until today, all of that was based on an assumption: that I can produce a pixel-perfect Web page with CSS3 quicker than I can with older image-based CSS methods, and that the CSS3 page will load faster, with a smaller overall file size and fewer HTTP requests. As a single use case experiment, I decided to design and code a Web page and add visual enhancements twice: once with CSS3, and a second time using background images sliced directly from the PSD.

Read more...

Speeding Up Your Website’s Database

Website speed has always been a big issue, and it has become even more important since April 2010, when Google decided to use it in search rankings. However, the focus of the discussion is generally on minimizing file sizes, improving server settings and optimizing CSS and Javascript.

Screenshot

[fblike]

The discussion glosses over another important factor: the speed with which your pages are actually put together on your server. Most big modern websites store their information in a database and use a language such as PHP or ASP to extract it, turn it into HTML and send it to the Web browser.

So, even if you get your home page down to 1.5 seconds (Google’s threshold for being considered a “fast” website), you can still frustrate customers if your search page takes too much time to respond, or if the product pages load quickly but the “Customer reviews” delay for several seconds.

Read more...

Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates

The attention span on the Web has been decreasing ever since Google had arrived and changed the rules of the game. Now with millions of results available on any topic imaginable, the window to grab a visitor's attention has decreased significantly (in 2002, the BBC reported it is about 9 seconds). Picture yourself browsing the Web: do you go out of your way to read the text, look at all the graphics, and try to thoroughly understand what the page is about? The answer is most likely to be a straight "no." With bombardment of information from all around, we have become spoiled kids, not paying enough attention to what a Web page wants to tell us.

A/B testing example

We make snap decisions on whether to engage with a website based on whatever we can make out in the first few (milli)seconds. The responsibility for making a good first impression lies with designers and website owners. Given that the window of opportunity to persuade a visitor is really small, most designs (probably including yours) do a sub-optimal job because the designer in you thinks in terms of aesthetics. However, most websites do not exist just to impress visitors. Most websites exist to make a sale. Whether it is to get visitors to subscribe to the blog feed, or to download a trial, every website ultimately exists to make a sale of some kind.

Read more...

The Gradual Disappearance Of Flash Websites

If you want to "go big" visually with a website, delivering complex interaction and a rich experience across a wide range of browsers, Flash is the only way to go. Right? Nope. Given the widespread adoption and advancements of modern browsers and JavaScript libraries, using Flash makes little sense. But it does have its place on the Web, considering the need for progressive enhancement.

Jimmy Carter and Gerald Ford Debating

In the current landscape of technology and accessing the Internet through devices such as picture frames, netbooks, cell phones and televisions, the benefits of Web standards outweigh those of Flash, especially when delivering content to a broad audience on various devices.

Flash is a proprietary product that sits on top of the browser to extend functionality. While Flash may have provided missing functionality for some time, it brings little value to modern browsers. As more and more designers and developers realize the benefits of Web standards and start using some of the features of HTML5 and CSS3, we’ll see fewer Flash-driven websites.

Read more...

↑ Back to top