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
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:
- Unnecessary JavaScript loading, parsing or execution. This means the main thread is doing more work than it supose to do -> try reducing JS payloads with code splitting, removing unused code and efficiently loading third-party JavaScript
- Inefficient JS statements -> avoid selectors that returns 2000 nodes (e.g. document.querySelectorAll('a') ) and refactor to have a more specific one.
5
3 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
- First Contentful Paint (FCP) - 10% - Time to paint the first text or image
- Time to Interactive (TTI) - 10% - Necessary time for the app to become fully interactive (responding within 50ms from user interaction)
- 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
unexpectedHow to improve:
- Always inclu...
5
6 reads
Short notices
Some of the values are calculated based on
data from the HTTP ArchiveIf you don't have a very specific reason to optimise only one of the metrics, the be...
5
21 reads
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
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
IDEAS CURATED BY
Read & Learn
20x Faster
without
deepstash
with
deepstash
with
deepstash
Personalized microlearning
—
100+ Learning Journeys
—
Access to 200,000+ ideas
—
Access to the mobile app
—
Unlimited idea saving
—
—
Unlimited history
—
—
Unlimited listening to ideas
—
—
Downloading & offline access
—
—
Supercharge your mind with one idea per day
Enter your email and spend 1 minute every day to learn something new.
I agree to receive email updates