Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
rendering

5 Articles
{
,

}
Direct link to the article Rendering Spectrum
client side rendering rendering server side rendering static sites

Rendering Spectrum

Here are the big categories of rendering websites:

  • Client: ship a <div id="root"</div and let a JavaScript template render all of it.
  • Static: pre-render the HTML.
  • Server: let a live server process requests and generate the
…
Avatar of Chris Coyier
Chris Coyier on Nov 25, 2020
Direct link to the article How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
font loading lighthouse rendering

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 …

Avatar of Adrian Bece
Adrian Bece on Dec 6, 2020
Direct link to the article The Fight Against Layout Jank
aspect ratio overflow-anchor rendering

The Fight Against Layout Jank

A web page isn’t locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their size, which typically isn’t known in fluid layouts until they do …

Avatar of Chris Coyier
Chris Coyier on Jul 10, 2019
paint timing api perceived performance performance rendering

Using the Paint Timing API

It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API…

Avatar of Jeremy Wagner
Jeremy Wagner on Aug 21, 2017
performance rendering

Understanding the Critical Rendering Path

Direct Link

Ire Aderinokun:

There are 6 stages to the CRP –

  1. Constructing the DOM Tree
  2. Constructing the CSSOM Tree
  3. Running JavaScript
  4. Creating the Render Tree
  5. Generating the Layout
  6. Painting

I imagine if you’re really getting into performance work, you’ll want a …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 1, 2017
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top