It may prove to be a very stupid idea, but this article is my attempt to talk reasonably about a topic that has so far spawned 100% unreasonable flamewar-filled bikeshed discussions. A lengthy, yet highly informative, and very in-depth article on why exactly JS-heavy web apps run slow on mobiles. Goes into depth on garbage …
Tag Archives: performance
Jake Archibald – Rendering without lumpy bits
Right, we’ve got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we’re done, we’ll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more …
Continue reading “Jake Archibald – Rendering without lumpy bits”
“We’ve been conditioned for web apps to suck.”
There is no single explanation [for why people choose a native app over a web based version]. The reason browser apps lose this fight is because of a raft of small things. It’s death by a thousand cuts. Tiny Little Knives → (via cameronmoll) Related: It’s not a web app. It’s an app you install …
Continue reading ““We’ve been conditioned for web apps to suck.””
One Less JPG
Update 2017: By now it’s clear that an equal amount of JS-bytes and JPG-bytes are not the same. The JS still needs to be evaluated and executed, which also comes as a cost. People often build beautiful sites with multiple easy-to-use JavaScript libraries. Then, when it comes to addressing frontend performance, suddenly those libraries are …
Browser Repaint Performance
To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance. The H shortcut within the Developer Tools sure comes in handy! DevTools: Visually Re-engineering CSS For …
Visualize Repaints in Firefox
Browserdiet
And what if we got together a bunch of experts who work on large sites to create a definitive front-end performance guide That’s exactly what we’ve done! And we’ll guide you in this battle to create even faster sites. Patting myself on the back as the tips mentioned are exactly those mentioned in my own …
Implementing Off-Canvas Navigation For A Responsive Website
Not only a good example on how to do it, but also an example on how to do it right: enhance progressively, don’t over-rely on jQuery, and trick your browser into using hardware acceleration where possible Implementing Off-Canvas Navigation For A Responsive Website → Not convinced or 100% about hardware acceleration? Be sure to watch …
Continue reading “Implementing Off-Canvas Navigation For A Responsive Website”
2D transform’s translate() vs absolute positioning: performance evaluation
sitespeed.io
Sitespeed.io is an open source tool that helps you analyze and optimize your website speed and performance based on performance best practices. It will collect data from multiple pages on your website (crawling from a startpoint), analyze the pages using performance best practices rules, and output the result as a couple of HTML-files. Run ./sitespeed.io …