Slide 1
Slide 1 text
Diving deep into
performance Optimization
By Ahmad El-Alfy
Head of software development at Robusta
Slide 2
Slide 2 text
• My name is Ahmad El-Alfy.
• I wrote my first HTML document nearly 20 years ago.
• Development head and front-end developer at
• Facebook Developers Circle Cairo Lead.
• Organizer at EgyptJS
• Web standards and Accessibility fanatic.
@ahmadalfy
Slide 3
Slide 3 text
We’re Hiring
… as usual :)
career@robustastudio.com
Front-end developers
Backend Developers (PHP/Rails)
Quality Control Engineers
Mobile developers
Slide 4
Slide 4 text
A little back story
• We started offering a new service we call CTO as a
service.
• Part of my job was evaluating and profiling a lot of
applications and products developed by others. I quickly
fell in love with performance audits and investigations.
Slide 5
Slide 5 text
Our GOAL Today
Slide 6
Slide 6 text
Agenda
• Setting up performance budget
• Fundamentals to understand performance optimization
• Network inside the browser
• How the browsers work
• Different tools we use to identify problems
• Techniques
Slide 7
Slide 7 text
What is Slow ?
Slide 8
Slide 8 text
We need metrics we can
measure
Slide 9
Slide 9 text
What metrics we can use?
• DOMContentLoaded ?
• window.onload ?
• Frames Per Second ?
• Jank ? Layout Thrashing ?
• First Pain ?
Slide 10
Slide 10 text
Our focus primarily was on how much bytes we are shipping
down the wire and how many requests we are making
Slide 11
Slide 11 text
https://httparchive.org/reports/page-weight?start=2014_01_01&end=2019_01_01&view=list#bytesTotal
Slide 12
Slide 12 text
Let’s examine the user’s journey
Slide 13
Slide 13 text
The RAIL performance goals
Touch to paint
< 100 ms
Touch to move
< 16 ms
Each frame
completes in
< 16 ms
Main thread
JS work
complete
< 50 ms /
chunk
Ready to use
< 1000 ms
https://developers.google.com/web/fundamentals/performance/rail#ux
Slide 14
Slide 14 text
https://www.youtube.com/watch?v=vOvQCPLkPt4&list=LLyUM7lBkQ_dheU-wh6Q8-Gw&index=2&t=0s
Slide 15
Slide 15 text
So now we’ve a budget
Slide 16
Slide 16 text
Let’s talk about how the
browsers work
Slide 17
Slide 17 text
Part 1 - Network
Slide 18
Slide 18 text
HTTP 1.1
• It’s a 20 years old protocol that we’re still using
• It suffers from a lot of problems like latency and
limitations on transfer size and number of requests.
• BUT We were able to overcome that
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Spriting
Slide 21
Slide 21 text
Inlining
.icon1 {
background: url(data:image/png;base64,);
}
.icon2 {
background: url(data:image/png;base64,);
}
Slide 22
Slide 22 text
Concatenation
Slide 23
Slide 23 text
Sharding
Slide 24
Slide 24 text
Welcome HTTP2
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
https://daniel.haxx.se/http2/http2-v1.9.pdf
Multiplexing numerous streams going over a single -TLS-
encrypted- TCP connection.
Slide 27
Slide 27 text
Header compression
Slide 28
Slide 28 text
Prioritization and dependency
Slide 29
Slide 29 text
Server Push
Slide 30
Slide 30 text
Demo
• httpvshttps.com
Slide 31
Slide 31 text
Part 2 - Parsing,
Downloading and Rendering
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
CSS
• While downloading CSS files, rendering in the web page
is completely blocked. This is because of a phenomenon
called “Progressive Rendering”. Without it, you will see
content shifting and changing their style while the assets
are being downloaded.
• Inline CSS is an exception, it will render immediately after
loading.
Slide 36
Slide 36 text
Images
• Images in the HTML is downloaded according to the
specs:
• Images in CSS will be downloaded if it is a part of the
render tree
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Script async / defer
Slide 43
Slide 43 text
Fonts
• Font files will only be downloaded if an element uses a
font that is a part of the render tree and contain text.
• This results in the phenomena we call Flash of Unstyled
Text and Flash of Invisible Text
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Now what are the tools we
can use for auditing?
Slide 46
Slide 46 text
Lighthouse
A relatively new tool that replaced the de facto standard
Page Speed Insights.
Available in Google Chrome under the tab “Audit” in the
DevTools.
You can use it to emulate slower network connection or a
slow CPU.
Available as a command line interface.
Slide 47
Slide 47 text
Bro Tip: use the CLI
• Run much faster than the one in the DevTools, can run in
headless mode as well.
• Isn’t affected by the extensions you have on your Chrome
setup.
• Save the results in an HTML document with the exact
time, date and version of the lighthouse API.
• Can be integrated with your CI.
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
The report
• Images
• Origins
• Render blocking
resources
• Critical path requests
• Text visibility
• Main thread work
• Cache policy
• DOM Size
Slide 51
Slide 51 text
Images
Use the proper image format
Slide 52
Slide 52 text
Images — cont
• Don’t ever use an
animated gif, change it to
a video.
• Gifs consume more memory
from the browser and they
have bigger file size than an
equivalent movie.
Slide 53
Slide 53 text
Images — cont
• Start using WebP NOW
• Relatively new format, invented
by Google. It offers 30%
compression over the other
formats.
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Slide 56
Slide 56 text
Images — cont
• LAZY LOAD EVERYTHING
• It is a term commonly used to describe a technique where
we stop image loading until it is visible in the user’s
viewport.
• It is used heavily in listing to:
• Improve user experience
• Save the bandwidth
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Recommended Tool
Slide 62
Slide 62 text
Images — cont
Serve the appropriate image size to the right browser
Slide 63
Slide 63 text
Images — cont
Get rid of the meta data
Slide 64
Slide 64 text
Origins
Once the browser find a resource located on another origin, it
will attempt to open a TCP connection to that new origin to
retrieve the data.
This technique works by telling the browser ahead that it
needs to connect to the following list of origins so that when
the browser react the request, most of the handshaking, DNS
lookup and the other network stuff have been taken care of
Slide 65
Slide 65 text
Render blocking requests
This is because CSS and JavaScript both block the main
thread while downloading.
The old practice was to move the stylesheet to the top and
move the scripts to the bottom.
The new recommendation is to inline the CSS used for the
critical part (above the fold) and move everything else to the
bottom.
Scripts should also use the attribute defer or async.
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Text visibility
FOIT block the user for sometime till the font is downloaded
or it pass the timeout phase of the font loading.
We can control the behavior of the font using the property
font-display to eliminate the font swapping period and
always use a fallback font.
Slide 68
Slide 68 text
Cache Policy
Having a proper cache policy significantly improve
subsequent visits load.
The problem usually arise from third party scripts that have
short cache lifetime by default (like GTM, GA … etc)
We can always rely on cache busting mechanisms to
invalidate the cache
Slide 69
Slide 69 text
DOM size
Google recommends having less than 1500 DOM node.
Problems usually arise in:
• Huge content websites with significant DOM nodes
• Using inline SVGs
• Serving content for both mobile and desktop and using
display none to hide nodes on any platform
Slide 70
Slide 70 text
Working with videos
• Videos should be lazy loaded as well and should be
properly sized and encoded
• If a video is used for presentation only, test the internet
connection speed and remove it if it isn’t loading
Slide 71
Slide 71 text
let videoLoad = new Promise((resolve) => {
video.addEventListener('canplaythrough', () => {
resolve('can play');
});
});
let videoTimeout = new Promise((resolve) => {
setTimeout(() => {
resolve('The video timed out.');
}, 2000);
});
Promise.race([videoLoad, videoTimeout]).then(data => {
if (data === 'can play') {
video.play();
setTimeout(() => {
video.classList.add('video-loaded');
}, 3000);
} else {
this.cancelLoad(video);
}
});
Slide 72
Slide 72 text
Scrolling and listeners
addEventListener(document, "touchstart", (e) => {
// Whatever
},
{ passive: true }
);
Slide 73
Slide 73 text
Serve JavaScript modules
Slide 74
Slide 74 text
Always use a profiling tool
Slide 75
Slide 75 text
Profiling JavaScript
The performance panel can help you profile your JavaScript
code (identifying the slow parts), detect where the spikes
happen (scripting? painting? layout?)
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
References
• Google Chrome Release Notes.
• Essential Images Optimization, an eBook by Addy
Osmani.
• Web.Dev; huge resource by Google
• Books: High Performance Websites, Even Faster Web
Sites. Both by by Steve Souders
• Web performance made easy (Google I/O '18)
Slide 80
Slide 80 text
No content