CategoryPerformance

August 3, 2016 — In this article, Filip Bartos will share his notes about installing and configuring a critical-path performance optimization using Express and Handlebars for an isomorphic React website. This website was developed using React, running on an Express server, and it was going well, but Filip still wasn’t satisfied with a load-blocking CSS bundle. So, he started to think about options for how to implement the critical-path technique on an Express server. Throughout this article, Filip will be using Node.js and Express. Familiarity with them will help you understand the examples. Read more…

May 18, 2016 — Varnishtest can be used to test a cache invalidation method or to reproduce bugs when filing a bug report. To ensure optimal performance from a Varnish Cache deployment, one should integrate Varnishtest into the design. Varnishtest can be used by system administrators in two scenarios: (1) when configuring a Varnish Cache installation, and (2) when writing complex caching policies in the Varnish Configuration Language (VCL) or when tuning Varnish Cache. Code tinkerers who work on extensions written for Varnish Cache (called VMODs) can use Varnishtest to define and test their modules. Read more…

March 15, 2016 — The best designs balance aesthetics and performance by working with mobile in mind from the start. In this article, Danny Bluestone will share the current mobile performance optimization processes he uses at Cyber-Duck. Aim to create a website that can balance aesthetics and performance on mobile, and achieve real conversion metrics. A collaborative, iterative performance optimization process will help you achieve this. Right from the start of the project, build an understanding of the client and server-side factors that determine website performance on mobile. Read more…

February 26, 2016 — What is that preload? What does it do? And how can it help you? Preload gives developers the ability to define custom loading logic without suffering the performance penalty that script-based resource loaders incur. In human terms, it’s a way to tell a browser to start fetching a certain resource, because you as authors know that the browser is going to need that particular resource pretty soon. Read more…

February 16, 2016 — In this article, Rachel Andrew will look at the basics of HTTP2 as they apply to web designers and developers. She’ll explain some of the key features of the new protocol, look at browser and server compatibility, and detail the things you might need to think about as we see more adoption of HTTP2. You will get an overview of what to consider changing in your workflow in the short and long term. Rachel will also include plenty of resources if you want to dig further into the issues raised. Her aim is to give you enough of the background to be able to make good decisions as you plan your move to HTTP2. Read more…

February 15, 2016 — Google announced its own plan to revolutionize mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages, or AMP. While Facebook and Apple have a significant head start on Google, there’s every reason to believe that AMP will catch up quickly. If you’re a developer or a publisher who needs to get up to speed on the why, what and how of Google’s Accelerated Mobile Pages as fast and efficiently as possible, you’re in the right place. Read more…

February 4, 2016 — Smashing Magazine is known for lengthy, comprehensive articles. But what about something different for a change? What about shorter, concise pieces with useful tips that you could easily read over a short coffee break? As an experiment, this is one of the shorter Quick Tips-kind-of articles — shorter posts prepared and edited by our editorial team. Read more…

January 18, 2016 — Developers have no reason not to explore Client Hints. The key benefits are more maintainable responsive image tags, fewer image bytes transferred and, ultimately, happier end users. In this article, Jon Arne Sæterås will focus on how to address responsive images issues, with a little help from the web server and Client Hints, the new way for the browser to request images with specific properties. Read more…

January 13, 2016 — Over the time, OSS has turned into crowd-sourced marketplaces and this big range open source functionality is great, but it also carries big risks. Whenever you are running a stranger’s code inside your applications, you might question yourself “Do you know if these authors understand or care about security?” or “Do you know if they have vulnerabilities?”. In this article, Guy Podjarny will show you a good way to start acknowledging and handling this risk which is to address the known vulnerabilities in your dependencies and Snyk makes it easy for you to find, fix and monitor these vulnerabilities in Node.js. Read more…

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…