Thanks to some recent changes in browsers, it’s now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors. Barry Polland loves improvements that just work without any effort required of website owners. That is not to ignore the hard work required by the browser developers and standardization teams, of course, but it’s often rolling out to websites that is the real difficulty. The less friction we can add to introduce these improvements, the more likely they will be adopted, and there’s no better friction than none at all!
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…
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…
How can we improve our keyboard-only (KO) and Assistive Technology (AT) user experiences without affecting the experience for anyone else? In this article, we’ll dig into some specific, practical examples including skip links, navigation menus, modal focusing, and user education components. In this article, Aaron Pearlman is going to go over a few of those affordances that can make your KO/AT user experiences better without really changing the experience for anyone else.
Read more…
Are you using many full-sized images on your WordPress site? Take note that this is causing your pages to load slowly. A slow website affects your SEO, increases the bounce rates, and keeps your audience at a distance. There are many ways to speed up your WordPress site, each one complementing the other. In this article, Adelina Țucă will help you learn how to easily optimize all the images on your site (manually or on autopilot) in order to gain better loading times.
Read more…
Do websites created with reactive frameworks get indexed by Google and other search engines? Is it compulsory to set up pre-rendering, as your SEO consultants suggest? Or are they wrong? In this article, Paolo Mioni will talk mostly about Vue.js, since it is the framework he’s used most, and with which he has direct experiences in terms of indexing by the search engines on major projects, but most of what will be covered is valid for other frameworks, too.
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…
Since video files are large, optimizing the video to be as small as possible will lead to faster video delivery, speeding up video start, lowering the number of stalls, and minimizing the effect of the quality of the video delivered. Of course, we need to balance startup speed and stalling with the third metric of quality. In this series of posts on video performance on the web, Doug Sillars takes a closer look at how video is being used today, what we can learn from it, and how to move forward in a way that promotes fast delivery and playback of video content on the web.
Read more…
