Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Performance’.

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

Guide To Using WebP Images Today: A Case Study

They say a picture is worth a thousand words. But online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a web page’s total size on average. Given this, image optimization is key, especially considering that many users will abandon a request if it doesn’t load within a few seconds.

WebP Images And Performance

The problem with image optimization is that we want to keep file sizes small without sacrificing quality. Past attempts to create file types that optimize images better than the standard JPEG, PNG and GIF formats have been unsuccessful.

Read more...

Introducing RAIL: A User-Centric Model For Performance

There’s no shortage of performance advice, is there? The elephant in the room is the fact that it’s challenging to interpret: Everything comes with caveats and disclaimers, and sometimes one piece of advice can seem to actively contradict another. Phrases like “The DOM is slow” or “Always use CSS animations” make for great headlines, but the truth is often far more nuanced.

RAIL Performance Model

Take something like loading time, the most common performance topic by far. The problem with loading time is that some people measure Speed Index, others go after first paint, and still others use body.onload, DOMContentLoaded or perhaps some other event. It’s rarely consistent. When it comes to other ways to measure performance, you’ve probably seen enough JavaScript benchmarks to last a lifetime. You may have also heard that 60 FPS matters. But when? All the time? Seems unrealistic.

Read more...

Understanding Critical CSS

The web is slow, yet there are a few simple strategies to make websites faster. One of them is inlining critical CSS into the <head> of your pages, yet how exactly do you do it if your site contains hundreds of pages, or even worse, hundreds of different templates? You can't do it manually. Dean Hume explains an easy way to get it done. If you're a seasoned web developer, you might find the article obvious and self-explanatory, but it's a good piece to show to your clients and junior developers for sure. — Ed.

Understanding Critical CSS

Delivering a fast, smooth web experience is an important part of building websites today. Most of the time, we develop websites without understanding what the browser is actually doing under the hood. How exactly does the browser render our web pages from the HTML, CSS and JavaScript that we create? How can we use this knowledge to speed up the rendering of our web pages?

Read more...

Efficient Image Resizing With ImageMagick

Responsive images have been keeping us on our toes for quite some time, and now that they are getting traction in browsers, they come with a scary problem: the need to efficiently resize all our image assets. The way responsive images work is that an appropriately sized image is sent to each user — small versions for users on small screens, big versions for users on big screens.

Super-Efficient Image Resizing With ImageMagick

It’s fantastic for web performance, but we have to face the grim reality that serving different sizes of images to different users means that we first need to create all of those different files, and that can be a huge pain.

Read more...

A Better Way To Design For Retina In Photoshop

Recently, I had a project in which I needed to produce high-fidelity screens for a tablet. I was to present these screens on the device and also produce a clickable prototype. They needed to be pixel-perfect. The timeline was tight (as always), so I went with my go-to tool, Photoshop. I’ve been using it for over 10 years, and it gives me the fastest high-quality output.

A Better Way To Design For Retina In Photoshop

Are you designing at “Retina” resolution in Photoshop? If the answer is yes, then this article is for you. I will walk you through the problems I faced in creating Retina mockups to be displayed on a tablet device. I will then explain a way to work that is easier and gives you better performance. This is about my experience with Photoshop, but it could be applied to Illustrator and other software.

Read more...

Controlling The Cache: Using Edge Side Includes In Varnish

I’m a firm believer that the best way to optimize for fast-loading mobile sites is to optimize for everyone. We don’t know when someone is on a non-mobile device but tethered to their phone, or just on awful Wi-Fi.

Controlling The Cache: Using Edge Side Includes In Varnish

In a previous article for Smashing Magazine I explained how you can speed up your websites by serving dynamic pages from a reverse proxy like Varnish. If you are new to Varnish then that article is the place to start as I'll be diving straight into configuration details here. In this article I’ll explain how you can benefit from using Varnish even when there are parts of your pages that can’t be cached for long periods, using Edge Side Includes.

Read more...

Redefining Lazy Loading With Lazy Load XT

Lazy loading is a common software design pattern that defers the initialization of objects until they are needed. Lazy loading images started to become popular on the web back in 2007, when Mika Tuupola drew inspiration from the YUI ImageLoader utility and released a jQuery plugin. Since then, it’s become a popular technique to optimize page loading and the user experience. In this article I will discuss why we should and shouldn't use Lazy Load, and how to implement it.

Redefining Lazy Loading With Lazy Load XT

Images make up over 60% of an average page’s size, according to HTTP Archive. Images on a web page would be rendered once they are available. Without lazy loading, this could lead to a lot of data traffic that is not immediately necessary (such as images outside of the viewport) and longer waiting times. The problem? Visitors are not patient at all. By lazy loading, images outside of the viewport are loaded only when they would be visible to the user, thus saving valuable data and time.

Read more...

Enabling Multiscreen Tracking With Google Analytics

We are increasingly using responsive design, responsive design with server-side components (RESS), adaptive design and combinations thereof to provide great high-performance multiscreen experiences. However, analytics implementations often miss information that is important to understanding how a website is being used on different devices.

Enabling Multiscreen Tracking With Google Analytics

For example, a website that varies the navigation layout based on screen size or user preferences might provide different user flows through the website depending on the layout being used. By enhancing Google Analytics, you’ll be able to identify and optimize under-performing layouts and screen sizes to improve performance on any device.

Read more...

What Every App Developer Should Know About Android

In today’s fast-paced mobile market, consumers have no patience for mobile apps that compromise their experience. “Crashes” and “Not working” are the most common feedback on Google Play for unstable or sluggish apps (including games). Those comments and ratings make hundreds of millions of potential downloaders skip those lousy apps. Sounds harsh, but that’s the way it is.

What Every App Developer Should Know About Android

An app succeeds not by chance. It is the result of the right decisions made at the right time. The most successful mobile app developers understand the importance of performance, quality and robustness across the array of mobile devices that their customers use.

Read more...

↑ Back to top