Search
Just Dropping Some Type Links
3.3.2020
I've had a bunch of tabs open that just so happen to all be related to typography, so I figured I'd give myself the mental release of closing them by blogging them. How's that for a blog post format for ya: whatever random tabs you've had open for far too long.
Times New Roman is popular on...
When CSS Blocks
28.2.2020
Tim Kadlec:
One particular pattern [for loading non-critical CSS] I’ve seen is the preload/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their onload events to change them back to a stylesheet once the browser has them ready.
So you're...
Lazy Object Initialization
17.2.2020
The Firefox DevTools underlying code, which is written with JavaScript and HTML, is a complex application. Due to the complexity and amount of work going on, the DevTools team has done everything they can to load as little as possible. Furthermore the team has a system of lazily importing...
Native Image Lazy Loading in Chrome Is Way Too Eager
5.2.2020
Interesting research from Aaron Peters on <img loading="lazy" ... >:
On my 13 inch macbook, with Dock positioned on the left, the viewport height in Chrome is 786 pixels so images with loading="lazy" that are more than 4x the viewport down the page are eagerly fetched by Chrome...
Bundling JavaScript for Performance: Best Practices
24.1.2020
Performance advice from David Calhoun on how many scripts to load on a page for best performance:
[...] some of your vendor dependencies probably change slower than others. react and react-dom probably change the slowest, and their versions are always paired together, so they...
Adding Dynamic And Async Functionality To JAMstack Sites
2.1.2020
Jason Lengstorf:
Here’s an incomplete list of things that I’ve repeatedly heard people claim the JAMstack can’t handle that it definitely can:
Load data asynchronously
Handle processing files, such as manipulating images
Read from and write to a database
Handle user authentication and protect...
lite-youtube-embed
13.12.2019
A standard copy-and-paste YouTube embed lands on your page as an <iframe> which loads a big ol' pile of other stuff to play that video. But the UX of it is still essentially an image and a play button. Click the play button and the video plays. You can build essentially the same thing with...
scrapestack: An API for Scraping Sites
12.11.2019
(This is a sponsored post.)
Not every site has an API to access data from it. Most don't, in fact. If you need to pull that data, one approach is to "scrape" it. That is, load the page in web browser (that you automate), find what you are looking for in the DOM, and take it.
You can do this...
How to Start With Bitcoin at No Cost
10.11.2019
Getting into the Bitcoin world is by default easy and it doesn’t have to cost you anything. All you need to do to get started is to install a cryptocurrency wallet and load it with some digital cash. The growing crypto community, always enthusiastic about accepting new members, has done a...
Optimizing Images for Users with Slow Network Speeds
7.11.2019
For every website, page load time is a critical factor that can make or break the business. Thanks to the better user experience that comes with a fast-loading webpage, those who focus on page load optimization enjoy better conversion rates, better SEO, better retention, and lower bounce rates.
And...
It’s All In the Head: Managing the Document Head of a React Powered Site With React Helmet
30.10.2019
The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its user interface. This is, after all, where you tell search engines about your website and integrate it with third-party applications like...
ImageKit.io: Image Optimization That Plugs Into Your Infrastructure
24.10.2019
Images are the most efficient means to showcase a product or service on a website. They make up for most of the visual content on our website.
But, the more images a webpage has, the more bandwidth it consumes, affecting the page load speed - a raging factor having a significant impact on not just...
Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest Connections
10.10.2019
In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds are still trying to catch up to others... literally.
Measure the impact of third-party code during page load
Lighthouse, Chrome’s built-in...
Blocking Third-Party Hands from the Cookie Jar
9.10.2019
Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com, I'll get a cookie from css-tricks.com that handles my authentication. But css-tricks.com might also load an image from some other site. A common...
Weekly Platform News: Tracking via Web Storage, First Input Delay, Navigating by Headings
4.10.2019
In this week's roundup, Safari takes on cross-site tracking, the delay between load and user interaction is greater on mobile, and a new survey says headings are a popular way for screen readers to navigate a webpage.
Let's get into the news.
Safari’s tracking prevention limits web storage
Some...
Preloading Pages Just Before They are Needed
27.9.2019
The typical journey for a person browsing a website: view a page, click a link, browser loads new page. That's assuming no funny business like a Single Page App, which still follows that journey, but the browser doesn't load a new page — the client fakes it for the sake of a snappier...
Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox
26.9.2019
In this week's roundup: fighting shifty layouts, some videos might be a bit stalled, and a new way to take screenshots in Firefox.
Let's get into the news!
Identifying the causes of layout shifts during page load
You can now use WebPageTest to capture any layout shifts that occur on your website...
Bitcoin Cash-Powered File Storage Concept Sparks Interest and Debate
7.9.2019
Bitcoin Cash (BCH) proponents were introduced to a new project called the Cashweb protocol on Friday. The blockchain file sharing scheme allows people to store and load arbitrary data to the BCH chain. While the new protocol still has “a long way to go,” the developer decided to share...
Lazy load embedded YouTube videos
20.8.2019
This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.
It still...
Using rel=”preconnect” to establish network connections early and increase performance
20.8.2019
Milica Mihajlija:
Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed...