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. The problem with image optimization is that we want to keep file sizes small without sacrificing quality. WebP is an image format that was created in 2010 and is currently being developed by Google. This format delivers lossless and lossy compression for images. Several big names are campaigning for WebP, most notably Google, Facebook and eBay.
Read more…
RAIL is a model for breaking down a user’s experience into key actions. It provides a structure for thinking about performance, so that designers and developers can reliably target the highest-impact work. The RAIL model is a lens to look at a user’s experience with a website or app as a journey comprising individual interactions. Once you know each interaction’s area, you will know what the user will perceive and, therefore, what your goals are. Sometimes it takes extra effort, but if you’re kind to the user, they’ll be good to you.
Read more…
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? Google’s PageSpeed Insights tool can be very helpful when trying to profile a web page and find areas for improvement. You simply enter the URL of the page that you want to test, and the tool provides you with a list of performance suggestions. Fortunately, the solution to this problem is simpler than it seems! The answer lies in the way that the CSS and JavaScript are loaded in your web page.
Read more…
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. As designers and developers, we have an enormous amount of power to shape how the web works. One of the biggest impacts we can have is to make our websites more performant, which will improve our users’ experiences and even make our content available to whole new markets. Cutting image weight is a relatively simple and hugely impactful way to increase performance, and I hope the information outlined above helps you make a difference to your users.
Read more…
Are you designing at “Retina” resolution in Photoshop? In this article, Murdoch Carpenter will walk you through the problems he faced in creating Retina mockups to be displayed on a tablet device. He will then explain a way to work that is easier and gives you better performance. This is about Murdoch’s experience with Photoshop, but it could be applied to Illustrator and other software. Throughout this article, he will use the @2x and @3x notation. These represent the Retina buckets for iOS. A great example is the app’s icons.
Read more…
ESI works in a similar way to other methods of including fragments in your pages, such as Server Side Includes (SSI) or PHP include statements, but it has been designed for reverse proxies like Varnish that sit in front of a web server and cache content. In this article Rachel Andrew will 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…
The total size of media elements on the average web page is increasing constantly. Yet, especially on mobile devices, performance bottlenecks remain, which stem from bandwidth issues, widely varying network latency, and limitations on memory and the CPU. You need solutions for better and faster browsing experiences that work across all devices and browsers. In this article Denis Ryabov & Ugur Kaner will discuss why they should and shouldn’t use Lazy Load, and how to implement it.
Read more…
In this article, James Rosewell outlines common challenges and how to configure Google’s new Universal Analytics to efficiently overcome them, using features such as custom dimensions, enhanced link tracking and server-side data feeds. Universal Analytics is a powerful tool, and it is prepared for a world in which designers get a single report of all interactions, including for websites, native applications and real-world events. Happy analyzing!
Read more…
“Crashes” and “Not working” are the most common feedback on Google Play for unstable or sluggish apps. Lousy apps. Those comments and ratings make hundreds of millions of potential downloaders skip those apps. Sounds harsh, but that’s the way it is. The most successful mobile app developers understand the importance of performance, quality and robustness across the array of mobile devices that their customers use. But you must know that an app can behave differently on a variety mobile devices, even ones running the same OS version and identical hardware components.
Read more…
Eight years is a long time on the web, yet for us it really doesn’t feel like a long journey at all. We’d love to share a few things that we’ve learned over the last years about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. In this article you will find a little story about the things that happened on this little website over the last year. Thanks for keeping us reading throughout all these years. It means a lot. You are quite smashing indeed. You should know that.
Read more…
