ﬁrst 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
service we call CTO as a service. • Part of my job was evaluating and proﬁling a lot of applications and products developed by others. I quickly fell in love with performance audits and investigations.
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.
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.
the one in the DevTools, can run in headless mode as well. • Isn’t aﬀected 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.
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 stuﬀ have been taken care of
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.
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.