Advanced Site Speed Optimization: Images, Custom Fonts, CRP | Lesson 30/34 | SEMrush Academy

You will get advice on how to optimize your website performance and implement HTTPS and HTTP/2.
Watch the full course for free:

0:11 Changes that happened in the last year
0:36 Metrics introduced by the Google Chrome team
1:19 Example
1:58 Chrome Performance Observer
2:49 Google Tag Manager
3:15 First Input Delay or FID
3:56 Critical rendering path optimization
4:37 CSS object model
5:27 Github’s Critical tool

✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹
You might find it useful:
Tune up your website’s internal linking with the Site Audit tool:

Learn how to use SEMrush Site Audit in our free course:
✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹

One of the great things that happened in the last year is that we moved from having one single metric like the score from Google’s PageSpeed Insights to something way more complex, but also more reflective of how page loading feels to a real user. So the idea is to translate different stages and user experiences into multi-performance metrics.

The Google Chrome team made lots of efforts to introduce metrics that make a difference and reflect a user’s journey.

They introduced Time To First Paint which is the point when the browser starts to render something, the first bit of content on the screen.
Time to First Contentful Paint marks the point when the browser renders the first bit of content from the DOM, like text, an image etc.
The First Meaningful Paint (the hero element) is the paint after which the biggest above-the-fold layout change has happened, and your most important element is visible.
When you go to Youtube, you want to watch a video. The video would be the hero element; you do not really care about how fast the comments are loading or what`s up next in the sidebar.

The easiest way to visualize this is to go to your Chrome Developer Tools. There is a section in performance, and then you select tab profiling. In this section you can see all the paint timings recorded and browse them as standalone images. You can scroll through the timeline and understand how your site looks at every single millisecond – really cool.

If you want to scale it a bit more and get real-world data you can use the Performance Observer in Chrome. It is an extension to your regular Google Analytics snippet. You just integrate the Google Analytics snippet as usual, and with a couple of lines of additional JS code, you register the Performance Observer.

The Performance Observer itself keeps track of the previously mentioned paint timings; and stores them as custom metrics in your Google Analytics.

You can break it down by URL and see the average paint timing metrics for every single URL. Right now this only works in Chrome, but still it gives a very good perspective on how fast your site is working in the real world based on real users. You can even do it with Google Tag Manager. Keep in mind that the snippet for the Performance Observer has to go directly to the markup because GTM doesn’t support ES6 scripting language. After you do that you can go on and combine it with, which gives you a nice overview of things and you can integrate it to other reports, too.

Recently Google introduced a new metric called First Input Delay (FID), which measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. We are moving towards measuring things that affect the real world behaviour of how users interact with your site.

The tracking for FID is the same as with paint timings. You use Google Analytics and extend the snippet accordingly so that JS is able to record it all.

All of this is helpful if you want to optimise your critical rendering path – and you absolutely should, because it’s a super powerful strategy. The concept of critical rendering path is that we have an initial view that is critical and we have below the fold content that is not critical. The above and below the fold areas obviously vary in size because of different devices and therefore different resolutions. Obviously, the CRP on desktop it is way bigger than on a mobile phone.

So, let me briefly walk you through how to optimize your CRP and make it super-fast:

Simply speaking, when the browser requests a website, it needs to build a CSS Object Model that is a “map” of stylesheet information, which will be attached to the elements and tags found in the markup of a webpage.

#TechnicalSEO #TechnicalSEOcourse #SiteSpeedOptimization #SEMrushAcademy

You May Also Like