The typical website stack has gotten complex, involving many tools and technologies, and requiring automation to handle its deployment adequately. By automating all the tasks to execute, you will not dread doing the deployment, indeed you may not be even aware of it. In this article, Leonardo Losoviz will take a closer look at Buddy, one of the most comprehensive tools for automating website deployments.
Read more…
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data. JPEG files, for which lazy loading is mostly used, have the possibility, according to the specification, to store the data contained in them in such a way that first the coarse and then the detailed image contents are displayed. Instead of having the image built up from top to bottom during loading, a blurred image can be displayed very quickly, which gradually becomes sharper and sharper.
Read more…
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, Luke Harrison will explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation. He will then touch upon some existing solution for removing it from stylesheets.
Read more…
In this series Chris Ashton attempts to use the web under various constraints, representing a given demographic of user. Data can be prohibitively expensive, especially in developing countries. Reducing the data footprint of your website goes hand in hand with improving frontend performance. It is the single most reliable thing you can do to speed up your site. In this article, Chris puts himself in the shoes of someone on a tight data budget and offers practical tips for reducing our websites’ data footprint.
Read more…
Let’s say that you wish to compile a list of the Oscar winners for best picture, along with their director, starring actors, release date, and run time. Using Google, you can see there are several sites that will list these movies by name, and maybe some additional information, but generally you’ll have to follow through with links to capture all the information you want. Scrapy is a popular open-source Python framework for writing scalable web scrapers. In this tutorial, Daniel Ni will take you step by step through using Scrapy to gather a list of Oscar-winning movies from Wikipedia.
Read more…
Web developers know what they’re doing in terms of optimizing a website for page speed, but is it enough in Google’s eyes? When it comes to mobile loading speeds, your website can always be faster. And if you’ve implemented all of the caching, minification and other optimizations you possibly can, it’s time for the web designer to step in and get creative. As a writer, Suzanne Scacca takes care of the on-page optimizations while the developer she hands content over to does the technical SEO stuff. Web designers and developers can easily tackle the parts of speed optimization that are in each of their wheelhouses.
Read more…
Like all good things, Google Fonts do come with a cost. Each font carries a weight that the web browser needs to download before they can be displayed. Google Fonts are easy to implement, but they can have a big impact on your page load times. With the correct setup, the additional load time isn’t noticeable. However, get it wrong and your users could be waiting up to a few seconds before any text is displayed. In this article, Danny Cooper will explore how we can load them in the most optimal way.
Read more…
In this article, you’ll learn how you can progressively replace your JavaScript-driven lazy loading with its native alternative — thanks to hybrid lazy loading.
Read more…
Many performance optimizations can be made when we can predict what users might do before they actually do it. Resource Hints are a simple but effective way that web developers can help the browser to stay one step ahead of the user and keep pages fast. Think of them as a way for the developer to tell the browser about what’s likely to happen in the future so that the browser can factor that into its choices for how it loads resources. In this article Drew McLellan will take a look at the main types of Resource Hints and when and where we can use them in our pages.
Read more…
Exploiting a security flaw is often about getting multiple small pieces to line up. Every bit of JavaScript you add to a site is a potential way in for a hacker. This is doubly true if that JavaScript is hosted by someone else, such as on a public CDN. Subresource Integrity is a browser feature you can use to make sure that the code being used is exactly what you intended. In this article, Drew McLellan will take a look at what SRI is, how it can help protect you, and how you can start using it in your own projects, not just for files hosted on CDNs.
Read more…
