FCP - Deepstash
Product Management Essentials

Learn more about computerscience with this collection

Essential product management skills

How to work effectively with cross-functional teams

How to identify and prioritize customer needs

Product Management Essentials

Discover 57 similar ideas in

It takes just

8 mins to read

FCP

Very important for this part is the font load time. For faster load, it can be used the font-display: swap. This will make the site to render the default font and when the loading is done, the font will be changed. Also, you can preload the fonts. 

6

16 reads

MORE IDEAS ON THIS

CLS - part 2

  • Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

More info: 

5

8 reads

More about LCP

This approximates when the main content of the page is visible to the users. 

The elements that are taken into consideration for Largest Contentful Paint: 

  • <img> elements
  • <image> elements inside an ...

5

15 reads

How to improve LCP

Causes: 

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Resource load times
  • Client-side rendering

For improvements, some relevant techniques:

5

11 reads

Speed Index

While anything you do to improve page load speed will improve your Speed Index score, addressing the following should have a particularly big impact:

5

7 reads

The metrics measured

        Name - Weight in score - Summary

  1. First Contentful Paint (FCP) - 10% - Time to paint the first text or image
  2. Time to Interactive (TTI) - 10% - Necessary time for the app to become fully interactive (responding within 50ms from user interaction)
  3. Speed Index (SI)...

6

368 reads

More about TBT

TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The sum is calculated by adding the blocking portion of all 

5

6 reads

TTI

It measures how long it takes a page to become fully interactive. A page is considered fully interactive when:

  • The page displays useful content, which is measured by the  
  • Event handlers are registered for most visible page elements,...

5

16 reads

CLS

CLS is a measure of the largest burst of layout shift scores for every 

unexpected

How to improve:

  • Always inclu...

5

6 reads

How to improve TBT

Try to diagnose the root cause of long tasks, using 

What is causing my long tasks?

In general, the most common causes are:

    5

    3 reads

    Short notices

     Some of the values are calculated based on 

    data from the HTTP Archive

    If you don't have a very specific reason to optimise only one of the metrics, the be...

    5

    21 reads

    TTI - PRPL Pattern

    PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster:

    • Push (or preload) the most important resources.
    • Render the initial route as soon as possible.
    • Pre-cache

    5

    12 reads

    CURATED FROM

    CURATED BY

    teni

    Normal person with peculiar dreams @unkl's protégé @cristianmezei's disciple

    Related collections

    More like this

    Typography (Typesetting etc.)

    Typography means any skills related to typography that a graphic design might use—from picking the right font for a project to really getting in to the nitty-gritty of typesetting with alignment, kerning, and leading.

    Most of these typography-related skills will be used when working in...

    3. Front-load your week

    When planning ahead, put the bigger, harder, more pressing tasks at the start of the week (or day), so you can knock them out first and relax more as the week goes on. Set yourself up for success by front-loading your week.

    This is kind of a version of Eat That Frog , a productivity ...

    React Server Components

    React Server Components allow us to render everything on the server, including the component themselves. This is completely different from SSR which you pre-generate HTML on the server. With these components, there won't be any client-side JS needed => faster rendering. 

    Read & Learn

    20x Faster

    without
    deepstash

    with
    deepstash

    with

    deepstash

    Access to 200,000+ ideas

    Access to the mobile app

    Unlimited idea saving & library

    Unlimited history

    Unlimited listening to ideas

    Downloading & offline access

    Personalized recommendations

    Supercharge your mind with one idea per day

    Enter your email and spend 1 minute every day to learn something new.

    Email

    I agree to receive email updates