wow
How NextJS can improve Largest Contentful Paint
NextJS is free and ready for use in our codebase // LCP is the #1 page speed performance metric
Go!
Index
What is NextJS?
What is Largest Contentful Paint?
For your brain!
BONUS
LCP as a racing analogy
Why does our LCP strategy need to change?
How NextJS can help us
Real Driveway examples of LCP
What is NextJS?
NextJS is a free React framework that makes it super easy to write code in a performant and SEO friendly way. Plus, it's ALREADY available in our codebase! It's also used by companies like TikTok, Twitch, Netflix, Hulu, WaPo and tons more
What is the Largest Contentful Paint?
Why is it important?*
Represents users percieved load speed
Fast LCP reassures the user the page is useful
Data suggests improving load speed improves user experience
The Homepage LCP element is the image in the hero. It takes about 14 seconds to load, so it's LCP speed is 14s.
What is it?
LCP Element: largest text or image in the "top fold"
LCP Speed: the amount of time it takes to render LCP element
*sayeth google
Design decisions affect performance
LCP Element: Text
1. If an LCP element is an image, or a piece of text that requires a custom font, LCP speed is slower, because users have to make extra server requests to download them. 2. The larger the image, the longer the download, the slower the LCP
Oh also, LCP element can change across breakpoints
LCP Element: Image
Mobile
Desktop
What is our current LCP Strategy?
Client Side Rendering (CSR), meaning our users devices do all the work.
1. User visits page, makes a request to our server
2. Server responds with initial html
4. Server responds with the Javascript
3. Paint the initial HTML which is a loading spinner. The HTML includes a request to download Javascript which will eventually render the LCP element. . . so go fetch that!
5a. If your LCP element is an image or text with custom font, download that
5. Now process the Javascript and render some HTML
Users Device
Server
6. Now you can Paint the LCP Element
Why is this a big deal?
Let’s imagine someone who takes the bus to work every day.
Today is their lucky day! They just got a promotion.
Now that they’re making more money, they can afford to buy a car instead of taking the bus.
On the way back home on the bus, they pull out their phone and start looking for a car to buy and they stumble onto driveway.com . . .
Because their Internet Connection Is poor . . .
It takes them 1 second to download the initial HTML
It takes them 7 seconds to download all the Javascript
Because their phone is 8 years old . . .
It takes their phone 3 seconds to process the Javascript
This also happens on newer devices!
It takes their phone 1 second to paint the LCP element
Combined, that's over 10 seconds they had to wait!
In less than 10 seconds, Usain Bolt won the 100-meter gold medal (9.58 seconds)
In less than 10 seconds, Yiheng Wang, a 9-year-old cubing prodigy from China, could solve a Rubik's cube THREE TIMES IN A ROW
In less than 10 seconds, Krishan Kumar, who holds the record for performing the most high kicks in 10 seconds, could perform 16 high kicks
What about the rest of our users?
+8.4%
+8.3%
+32%
Bounce rate increases with load time
Conversion rates increase as load time decreases
Even just 0.1 second helps bounce rate
+ info
+ info
+ info
Speed improvement of just 0.1 second for an informational page decreased bounce rate by 8.3% source: google
Exact numbers can be disputed,
but the trend that performance improves experience is undenaible
A 0.1 second improvement of mobile site speed increases conversion rates by 8.4% source: google
The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds. source: google
NextJS can help fix this
SSG (Static Site Generation): Create page on build SSR (Server Side Rendering): Create page on user request
CSR, SSR, SSG Examples at Driveway
3.5s LCP
Homepage SSR
Homepage CSR
14s LCP
LCP time calculated on my computer, may not indicate actual user experience. Look at the trend of LCP, not the specifc numbers :)
FAQ Question SSG
2.7s LCP
And now, an analogy about racing
Static Site Generated (SSG)
I am Naruto! I am famous for how fast I run!
- - - - - - - - - - - - - - - - - Time it takes to paint the LCP element - - - - - - - - - - - - - - - - - >
HTML is delivered immediately with LCP element ready to be painted*
* If your LCP element relies on an image or font, that will need to be downloaded first
Example: FAQ Pages, 2.7 second LCP
Static Site Generation (SSG)
Our servers do 90% of the work before the user even visits
0. Before we release new code, the server pre-builds the HTML, generating an accurate version of the page
1. User visits page, makes a request to our server
2. Server responds immediately with pre-built html
3. Paint the pre-built HTML
3a. If your LCP element is an image or text with custom font, download that from the server
4. Now you can Paint the HTML that contains the LCP Element
Server
Users Device
SSG is great for landing pages. e.g. - Homepage, Sell Landing Page, Vehicle Category Pages, etc.
Server Side Rendered (SSR)
I am fast at running, but I need to stretch first!
After a user requests the page, the server takes time to pre-render the HTML (aka ”stretch”)
Example: Homepage, 3.5 second LCP
Server Side Rendering (SSR)
Our servers do 90% of the work as soon as the user visits
1. User visits page, makes a request to our server
2. Server pre-renders and responds with HTML
3. Paint the pre-built HTML
3a. If your LCP element is an image or text with custom font, download that from the server
4. Now you can Paint the HTML that contains the LCP Element
Server
SSR is great for pages that could change from one request to the next.e.g. - VDP, SRP, Cart, etc.
Users Device
Client Side Rendered (CSR)
You’re no longer running a race. You’re going backpacking.
4) It finally downloads the javascript required to paint the LCP element, and paints it (aka “climbs up the cliff to finish the race”)
2) Then, it needs to unpack the javascript and execute it (aka “climb down the cliff”)
3) It discovers it needs to download even MORE javascript (aka “sleep in the tent”)
1) The initial HTML is empty and needs to download Javascript before any meaningful HTML is rendered. (aka “drink its coffee”)
Example: Homepage, 14 second LCP
Client Side Rendering (CSR)
Client Side Rendering (CSR), meaning our users devices do all the work.
1. User visits page, makes a request to our server
2. Server responds with initial html
4. Server responds with the Javascript
3. Paint the initial HTML which is a loading spinner. The HTML includes a request to download Javascript which will eventually render the LCP element. . . so go fetch that!
5a. If your LCP element is an image or text with custom font, download that
5. Now process the Javascript and render some HTML
Users Device
Server
6. Now you can Paint the LCP Element
Lets start racing, and stop backpacking
Let's use the technology we already have access to to dramatically improve user experience
Relevant data
50%
of our brain is involved in the processing of visual stimulus.
Timeline
20XX
20XX
20XX
Impress
Plan
Design
20XX
20XX
Structure
Communicate
20XX
Plan
Timeline
20XX
Structure
You can briefly describe what the timeline of your presentation consists of and state the milestones achieved verbally so that no one falls asleep.
20XX
Design
20XX
Communicate
+ info
20XX
Impress
Timeline
20XX
Plan
20XX
Structure
You can briefly describe what the timeline of your presentation consists of and state the milestones achieved verbally so that noone falls asleep.
20XX
Design
20XX
Communicate
20XX
Impress
20XX
Plan
20XX
Structure
Animation adds value to our content by helping us to capture attention, prioritize ideas, and make sure our audience remembers the content.
20XX
Design
20XX
Communicate
20XX
Impress
Graphs are very shareable so they are ideal for social media and, as if that wasn’t enough: they usually generate quality traffic for the content we create.
10%
Graphic + text
Use this space to briefly describe your graph and its evolution.
Graphic + text
Graphs are very shareable so they are ideal for social media and, as if that wasn’t enough: they usually generate quality traffic for the content we create.
+ info
Table + text
Showing enthusiasm, smiling, and maintaining eye contact with your audience can be your best allies when it comes to telling stories that excite and capture the audience's interest: 'The eyes, chico. They never lie'. This will help you connect with your audience. Knock their socks off!
Table + text
Showing enthusiasm, smiling, and maintaining eye contact with your audience can be your best allies when it comes to telling stories that excite and capture the audience's interest: 'The eyes, chico. They never lie'. This will help you connect with your audience. Knock their socks off!
3.Social beings
1.We are visual beings
We can understand images from millions of years ago, even from other cultures.
We need to interact with one another. We learn in a collaborative way.
2.Narrative beings
4.Digital beings
We tell thousands and thousands of stories. ⅔ of our conversations are stories.
We avoid being part of the content overload in the digital world.
Insert a video
Multimedia content is essential in a presentation, to really wow your audience. What’s more, this way you can summarize the content and entertain your audience.
Text + icons
Although you shouldn’t overuse bullet points, icons and diagrams can be your best allies when telling stories. You’ll hold the attention of your audience and the information will be imprinted in their brains.
Generate experiences with your content
Measure results and experiment.
It’s got the Wow effect. Very Wow.
Make sure your audience remembers the message
It’s ordered, hierarchical, and structured
Activate and surprise your audience
Audio
If your content is interactive, it’s engaging.
Surprise your audience with additional info.
The tone is usually formal and the vocabulary technical, so bear this in mind when drafting.
Here you can include a relevant fact to highlight.
It is essential to check everything thoroughly. Don’t let any typos slip through!
Embedded content
Map
Social Network
Music
Interactive question
A great presentation ...
Conclusions
- Is clear and structured
- Tells stories hierarchically
- Connects with your audience
- Matches the fonts to the topic
- Includes images and entertains
- Shows data in graphs
- Uses timelines
- Is animated and interactive
- Excites the brain
- Does not use bullet points to excess
Describe the problem you’re going to resolve and, above all, the reason why your idea is interesting
‘Your content is good, but it’ll engage much more if it’s interactive.’
- Genially
Super!
We love data
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
NextJS & LCP
darren bridenbeck
Created on July 5, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Practical Presentation
View
Smart Presentation
View
Essential Presentation
View
Akihabara Presentation
View
Pastel Color Presentation
View
Modern Presentation
View
Relaxing Presentation
Explore all templates
Transcript
wow
How NextJS can improve Largest Contentful Paint
NextJS is free and ready for use in our codebase // LCP is the #1 page speed performance metric
Go!
Index
What is NextJS?
What is Largest Contentful Paint?
For your brain!
BONUS
LCP as a racing analogy
Why does our LCP strategy need to change?
How NextJS can help us
Real Driveway examples of LCP
What is NextJS?
NextJS is a free React framework that makes it super easy to write code in a performant and SEO friendly way. Plus, it's ALREADY available in our codebase! It's also used by companies like TikTok, Twitch, Netflix, Hulu, WaPo and tons more
What is the Largest Contentful Paint?
Why is it important?*
Represents users percieved load speed
Fast LCP reassures the user the page is useful
Data suggests improving load speed improves user experience
The Homepage LCP element is the image in the hero. It takes about 14 seconds to load, so it's LCP speed is 14s.
What is it?
LCP Element: largest text or image in the "top fold"
LCP Speed: the amount of time it takes to render LCP element
*sayeth google
Design decisions affect performance
LCP Element: Text
1. If an LCP element is an image, or a piece of text that requires a custom font, LCP speed is slower, because users have to make extra server requests to download them. 2. The larger the image, the longer the download, the slower the LCP
Oh also, LCP element can change across breakpoints
LCP Element: Image
Mobile
Desktop
What is our current LCP Strategy?
Client Side Rendering (CSR), meaning our users devices do all the work.
1. User visits page, makes a request to our server
2. Server responds with initial html
4. Server responds with the Javascript
3. Paint the initial HTML which is a loading spinner. The HTML includes a request to download Javascript which will eventually render the LCP element. . . so go fetch that!
5a. If your LCP element is an image or text with custom font, download that
5. Now process the Javascript and render some HTML
Users Device
Server
6. Now you can Paint the LCP Element
Why is this a big deal?
Let’s imagine someone who takes the bus to work every day.
Today is their lucky day! They just got a promotion.
Now that they’re making more money, they can afford to buy a car instead of taking the bus.
On the way back home on the bus, they pull out their phone and start looking for a car to buy and they stumble onto driveway.com . . .
Because their Internet Connection Is poor . . .
It takes them 1 second to download the initial HTML
It takes them 7 seconds to download all the Javascript
Because their phone is 8 years old . . .
It takes their phone 3 seconds to process the Javascript
This also happens on newer devices!
It takes their phone 1 second to paint the LCP element
Combined, that's over 10 seconds they had to wait!
In less than 10 seconds, Usain Bolt won the 100-meter gold medal (9.58 seconds)
In less than 10 seconds, Yiheng Wang, a 9-year-old cubing prodigy from China, could solve a Rubik's cube THREE TIMES IN A ROW
In less than 10 seconds, Krishan Kumar, who holds the record for performing the most high kicks in 10 seconds, could perform 16 high kicks
What about the rest of our users?
+8.4%
+8.3%
+32%
Bounce rate increases with load time
Conversion rates increase as load time decreases
Even just 0.1 second helps bounce rate
+ info
+ info
+ info
Speed improvement of just 0.1 second for an informational page decreased bounce rate by 8.3% source: google
Exact numbers can be disputed,
but the trend that performance improves experience is undenaible
A 0.1 second improvement of mobile site speed increases conversion rates by 8.4% source: google
The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds. source: google
NextJS can help fix this
SSG (Static Site Generation): Create page on build SSR (Server Side Rendering): Create page on user request
CSR, SSR, SSG Examples at Driveway
3.5s LCP
Homepage SSR
Homepage CSR
14s LCP
LCP time calculated on my computer, may not indicate actual user experience. Look at the trend of LCP, not the specifc numbers :)
FAQ Question SSG
2.7s LCP
And now, an analogy about racing
Static Site Generated (SSG)
I am Naruto! I am famous for how fast I run!
- - - - - - - - - - - - - - - - - Time it takes to paint the LCP element - - - - - - - - - - - - - - - - - >
HTML is delivered immediately with LCP element ready to be painted* * If your LCP element relies on an image or font, that will need to be downloaded first
Example: FAQ Pages, 2.7 second LCP
Static Site Generation (SSG)
Our servers do 90% of the work before the user even visits
0. Before we release new code, the server pre-builds the HTML, generating an accurate version of the page
1. User visits page, makes a request to our server
2. Server responds immediately with pre-built html
3. Paint the pre-built HTML
3a. If your LCP element is an image or text with custom font, download that from the server
4. Now you can Paint the HTML that contains the LCP Element
Server
Users Device
SSG is great for landing pages. e.g. - Homepage, Sell Landing Page, Vehicle Category Pages, etc.
Server Side Rendered (SSR)
I am fast at running, but I need to stretch first!
After a user requests the page, the server takes time to pre-render the HTML (aka ”stretch”)
Example: Homepage, 3.5 second LCP
Server Side Rendering (SSR)
Our servers do 90% of the work as soon as the user visits
1. User visits page, makes a request to our server
2. Server pre-renders and responds with HTML
3. Paint the pre-built HTML
3a. If your LCP element is an image or text with custom font, download that from the server
4. Now you can Paint the HTML that contains the LCP Element
Server
SSR is great for pages that could change from one request to the next.e.g. - VDP, SRP, Cart, etc.
Users Device
Client Side Rendered (CSR)
You’re no longer running a race. You’re going backpacking.
4) It finally downloads the javascript required to paint the LCP element, and paints it (aka “climbs up the cliff to finish the race”)
2) Then, it needs to unpack the javascript and execute it (aka “climb down the cliff”)
3) It discovers it needs to download even MORE javascript (aka “sleep in the tent”)
1) The initial HTML is empty and needs to download Javascript before any meaningful HTML is rendered. (aka “drink its coffee”)
Example: Homepage, 14 second LCP
Client Side Rendering (CSR)
Client Side Rendering (CSR), meaning our users devices do all the work.
1. User visits page, makes a request to our server
2. Server responds with initial html
4. Server responds with the Javascript
3. Paint the initial HTML which is a loading spinner. The HTML includes a request to download Javascript which will eventually render the LCP element. . . so go fetch that!
5a. If your LCP element is an image or text with custom font, download that
5. Now process the Javascript and render some HTML
Users Device
Server
6. Now you can Paint the LCP Element
Lets start racing, and stop backpacking
Let's use the technology we already have access to to dramatically improve user experience
Relevant data
50%
of our brain is involved in the processing of visual stimulus.
Timeline
20XX
20XX
20XX
Impress
Plan
Design
20XX
20XX
Structure
Communicate
20XX
Plan
Timeline
20XX
Structure
You can briefly describe what the timeline of your presentation consists of and state the milestones achieved verbally so that no one falls asleep.
20XX
Design
20XX
Communicate
+ info
20XX
Impress
Timeline
20XX
Plan
20XX
Structure
You can briefly describe what the timeline of your presentation consists of and state the milestones achieved verbally so that noone falls asleep.
20XX
Design
20XX
Communicate
20XX
Impress
20XX
Plan
20XX
Structure
Animation adds value to our content by helping us to capture attention, prioritize ideas, and make sure our audience remembers the content.
20XX
Design
20XX
Communicate
20XX
Impress
Graphs are very shareable so they are ideal for social media and, as if that wasn’t enough: they usually generate quality traffic for the content we create.
10%
Graphic + text
Use this space to briefly describe your graph and its evolution.
Graphic + text
Graphs are very shareable so they are ideal for social media and, as if that wasn’t enough: they usually generate quality traffic for the content we create.
+ info
Table + text
Showing enthusiasm, smiling, and maintaining eye contact with your audience can be your best allies when it comes to telling stories that excite and capture the audience's interest: 'The eyes, chico. They never lie'. This will help you connect with your audience. Knock their socks off!
Table + text
Showing enthusiasm, smiling, and maintaining eye contact with your audience can be your best allies when it comes to telling stories that excite and capture the audience's interest: 'The eyes, chico. They never lie'. This will help you connect with your audience. Knock their socks off!
3.Social beings
1.We are visual beings
We can understand images from millions of years ago, even from other cultures.
We need to interact with one another. We learn in a collaborative way.
2.Narrative beings
4.Digital beings
We tell thousands and thousands of stories. ⅔ of our conversations are stories.
We avoid being part of the content overload in the digital world.
Insert a video
Multimedia content is essential in a presentation, to really wow your audience. What’s more, this way you can summarize the content and entertain your audience.
Text + icons
Although you shouldn’t overuse bullet points, icons and diagrams can be your best allies when telling stories. You’ll hold the attention of your audience and the information will be imprinted in their brains.
Generate experiences with your content
Measure results and experiment.
It’s got the Wow effect. Very Wow.
Make sure your audience remembers the message
It’s ordered, hierarchical, and structured
Activate and surprise your audience
Audio
If your content is interactive, it’s engaging.
Surprise your audience with additional info.
The tone is usually formal and the vocabulary technical, so bear this in mind when drafting.
Here you can include a relevant fact to highlight.
It is essential to check everything thoroughly. Don’t let any typos slip through!
Embedded content
Map
Social Network
Music
Interactive question
A great presentation ...
Conclusions
Describe the problem you’re going to resolve and, above all, the reason why your idea is interesting
‘Your content is good, but it’ll engage much more if it’s interactive.’
- Genially
Super!
We love data
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.