Links tagged: performance
Progressive Image Rendering
Stephan Lavavej has a great page outlining the difference between fancy interlacing and plain old progressive rendering:
There are four ways to transmit an image over the Internet. Over a fast connection there won't be any apparent difference, but over a modem connection the difference is stunningly obvious. Choosing the right way can make your connection seem much faster than it really is.
Wait until every bit of image data has been sucked through the modem before displaying the whole image. So blindingly dumb that not even Internet Explorer does it.
Display image data as it is received, resulting in a top-down filling in of the image. One variant -- the one that everyone has seen -- of JPEG does this. This is noninterlaced display, and both GIF and PNG are capable of it as well. Non-interlaced images are smaller than interlaced images.
Use a one-dimensional interlacing scheme. This is how GIF interlacing works. Every eighth horizontal line is transmitted in the first "pass", filling up the dimensions of the image in 1/8th of the time that the entire image will take to download. The next pass transmits every fourth line, making the image less distorted. The next pass transmits every second line, making the image even less distorted, and the fourth and final pass transmits the remaining lines.
Use a two-dimensional interlacing scheme. This is how PNG interlacing works. Instead of four passes through the image, PNG makes seven passes. In 1/64 of the time that the whole image will take to display, one pass is already completed, showing the image in a very rough manner. Successive passes fill in more information, never distorting the pixels by more than a factor of two to one.
Here's a demo of simple progressive as-received rendering:
And here's a demo of the superior PNG style two-dimensional interlaced rendering:
You don't get this for free, of course -- turning this feature on adds about 20% to the size of PNG images, and about 10% to the size of JPEG and GIF images. Whether this improved rendering behavior is worth the bandwidth cost I leave as an exercise to the reader.
I am not aware of any browsers that actually bilinearly interpolate the low-resolution incremental images, as shown in the sample screenshots on Stefan's page. But that would be really cool! Why doesn't Firefox add this?
This Just In: Internet Makes Books Obsolete
UI Follies, Volume III
Written by Jeff Atwood
Indoor enthusiast. Co-founder of Stack Overflow and Discourse. Disclaimer: I have no idea what I'm talking about. Find me here: http://twitter.com/codinghorror
August 7th 2017
ImageOptim — better Save for Web
Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.
August 7th 2017
Trick users into thinking your site's faster than it is | Creative Bloq
Before getting to the psychological part of performance optimisation, let's answer one question: what is web performance? For the majority of frontend developers, the answer would cover things like page response time, speed of animations, load times.
July 19th 2017
Secrets of High Performing Teams: Science Edition • Jez Humble - YouTube
This presentation was recorded at GOTO Copenhagen 2016
July 7th 2017
Optimising the front end for the browser
Recently my whole team got a chance to spend some time spiking out our proposed upgrade to our codebase, potentially using React. This really got me thinking about how we should build our front end. Pretty quickly I realised that the browser would be a large factor in our approach and equally large bottleneck in our knowledge.
June 28th 2017
The State of Online Retail Performance
While almost half of all consumers browse via their
phones, only 1 in 5 complete transactions on mobile
• Optimal load times for peak conversions ranged from
1.8 to 2.7 seconds across device types (page 6).
• Just a 100-millisecond delay in load time hurt
conversion rates by up to 7% (page 7).
• Bounce rates were highest among mobile shoppers and
lowest among those using tablets (page 9).
• Optimal load times for lowest bounce rates ranged
from 700ms to 1.2s across all device types (page 10).
• A two-second delay in load time hurt bounce rates
by up to 103% (page 10).
• Pages with the lowest bounce rates had start render
times ranging from 0.9 to 1.5 seconds (page 12).
• A two-second delay correlated with up to a 51%
decrease in session length (page 14).
June 28th 2017
Performance Tooling Today
Perf-tooling is a collection of powerful resources which will help you to improve your workflow and to deliver better and faster websites.
May 18th 2017
Aerotwist - Don't Guess it, Test it!
I recently was invited to give a talk at Spotify in Stockholm, Sweden to the local developer community. My talk centered around performance, since that’s the topic that fills my days at Google, specifically site and application performance.
May 15th 2017
WebPageTest is an incredibly useful resource for any web developer, but the information it provides becomes much more powerful when monitored regularly, rather than at isolated events. SpeedTracker runs on top of WebPageTest and makes periodic performance tests on your website and shows a visualisation of how the various performance metrics evolve over time.
May 9th 2017
Tarantool - Get your data in RAM. Get compute close to data. Enjoy the performance.
Get your data in RAM. Get compute close to data. Enjoy the performance.
May 4th 2017