CategoryPerformance

December 21, 2015 — Single-page applications tend to take the form of runtimes, JavaScript executables deployed like popup shops into vacant  elements. In this article, Heydon Pickering will introduce a solution for architecting progressive single-page applications using little more than a couple of CSS tricks, less than 0.5 KB of JavaScript and, importantly, some static HTML. It is not a perfect or complete solution, but it testifies to the notion that performant, robust and indexable single-page applications are achievable: You can embrace web standards while reaping the benefits of sharing data and functionality between different interface screens on a single web page. Read more…

December 10, 2015 — User reaction to a wait online is no different from that in the offline world. Studies based on the analysis of more than a thousand cases identify 14 distinct types of waiting situations on the web. Being dependent on your users’ loyalty, you cannot leave them facing a passive wait. In this final part, Denys Mishunov discusses pure passive waiting on the web, how you can deal with it and what can be done to keep user satisfaction high even when the service cannot be delivered fast enough. In addition to the studies on waiting online, your analysis will employ the psychology of waiting lines, customer satisfaction and other tools applicable to offline waiting. Read more…

November 28, 2015 — The “P” in P versus NP stands for polynomial time. That just means we can predict the maximum amount of time it will take to solve the problem. You may have never heard of P versus NP, but in this article, Zack Grossbart will walk you through it, show you how it works and explain why it matters. There’s a little math, but don’t worry; it’s all pretty easy. P versus NP is a mathematical question masquerading as a philosophical one. It describes the difference between solving a problem and knowing whether you’ve solved it. Read more…

November 11, 2015 — Any experienced traveler will tell you that some companies do it better than others. To find out, let’s take a closer look at a few airline websites from around the world. With this article, we start exploring various industries and study the current state of front-end, UX and performance of relatively complex websites. First up are airline websites. Some sections of the article were written by the editorial team. We’d love to hear your flights booking experience in the comments to this article! Along the way, Joshua Johnson will discover the critical steps of booking air travel and how they’re presented by different companies. Read more…

November 10, 2015 — When we shop for a theme, do we get what’s on the tin? Some themes aren’t as fast as what is advertised on the demo websites. When running small tests on themes for other CMS’, like Joomla, Philip Blomsterberg had the same findings. The theme he started out with seemed very good, offering speeds that were quite good, especially for a news website or portal. He tested the theme with demo content; however, regardless of how hard he tried, speeds and scores never reached those on the vendor’s website. This led him to believe that theme vendors sometimes set up demos to make their websites appear faster than they really are. Read more…

October 24, 2015 — 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…

October 2, 2015 — 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…

August 13, 2015 — 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…

June 25, 2015 — 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…

May 18, 2015 — 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…