Search

Nalezeno "loading": 25

An Approach to Lazy Loading Custom Elements


We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance. Inspired by a colleague’s experiments, I recently set about writing a simple auto-loader: Whenever a custom … An Approach to Lazy Loading...

Subsetting Font Awesome to Improve Performance


Font Awesome is an incredibly popular icon library. Unfortunately, it’s somewhat easy to use in a way that results in less-than-ideal performance. By subsetting Font Awesome, we can remove any unused glyphs from the font files it provides. This will … Subsetting Font Awesome to Improve...

Repetitive Typography Animation


An experimental typography animation based on a kinetic type design by Domagoj Štrok where words get duplicated several times. The post Repetitive Typography Animation appeared first on Codrops

Repetitive Typography Animation


An experimental typography animation based on a kinetic type design by Domagoj Štrok where words get duplicated several times. The post Repetitive Typography Animation appeared first on Codrops

How to Show Images on Click


Most images on the web are superfluous. If I might be a jerk for a bit, 99% of them aren’t event that helpful at all (although there are rare exceptions). That’s because images don’t often complement the text they’re … The post How to Show Images on Click appeared first...

A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders


UI components like spinners and skeleton loaders make waiting for a page load less frustrating and might even affect how loading times are perceived when used correctly. They won’t completely prevent users from abandoning the website, but they might encourage … The post A Bare-Bones Approach...

How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy


A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>. Let’s...

Maintaining Performance


Real talk from Dave: I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals…...

Considerations When Choosing Fonts for a Multilingual Website


As a front-end developer working for clients all over the world, I've always struggled to deal with multilingual websites — especially cases where both right-to-left (RTL) and left-to-right (LTR) are used. That said, I’ve learned a few things along the...

Native Image Lazy Loading in Chrome Is Way Too Eager


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...

Lazy load embedded YouTube videos


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...

Get Peak WordPress Performance with Jetpack


The irony of web performance is that the average page weight of a site continues to go up year after year, despite us being more aware of the problem and having more tools at our disposal to fight it than ever. To paraphrase Seinfeld, "we know how to fight page weight issues; we just don't use...

Developing a robust font loading strategy for CSS-Tricks


Zach Leatherman worked closely with Chris to figure out the font loading strategy for this very website you're reading. Zach walks us through the design in this write-up and shares techniques that can be applied to other projects. Spoiler alert: Font loading is a complex and important part of...

Tips for rolling your own lazy loading


You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page. Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page...

A Deep Dive into Native Lazy-Loading for Images and Frames


Today's websites are packed with heavy media assets like images and videos. Images make up around 50% of an average website's traffic. Many of them, however, are never shown to a user because they're placed way below the fold. What’s this thing about images being lazy, you ask? Lazy-loading...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace