“As long as I can swing my magic wand, I can have a super fast website!” This may surprise you too, right? Optimizing site speed and user experience is a heavy task, and it is technically very complicated and very fast. Most website owners or managers will soon need to contact their developers to complete the work. Now, the new Core Web Vitals indicator provides you with deeper insights and suggestions for improvement. Let’s take a look at five things you can do to improve your Core Web Vitals score.
April 19, 2021 Google announced “Page experience” ranking factors will start gradually Mid-June 2021.
First, the disclaimer
See, there is no guarantee that a particular problem will be solved. You must optimize your website from a broader perspective. Many small fixes have made up good results. Therefore, although I will provide you with five things you can do here, there is far from certainty. Even Google says that many factors work together to get a score, so it is difficult to be sure that if you do this, the score will rise.
What Google really gives you is insight into what is slowing down and what factors are hurting the user experience. Many tools also provide suggestions on how to fix the problem. Web.dev/measuresFor example, it does not do in-depth research, but it does give you an idea of the impact of a particular fix.
Google’s upcoming page experience update
We have published several articles about the Google Page Experience update (to be released in May 2021), so if you need more background information, you can start here:
Five things you or your developers can do
People have been talking about Site speed with user experience. However, although there is a lot of information on how to optimize the site, it is difficult to put this knowledge into practice. In the past few months, Google has once again put speed in the first place, and will focus on page experience updates next year. To help you prepare for this, it has developed some tools that can provide you with insights and a large amount of documentation for you to read.
For many issues, the advice hasn’t really changed much. It boils down to providing the main content to users as soon as possible. Run tests to understand the performance of your website, try to prioritize fixes and get started! Below, you will find a mix of old and new ways to improve the website to improve the vitality of the core network.
Optimize the image
I will start with the golden list: optimizing images. One of the most important things you can do for your website is to properly optimize the images. Yes, we said it a million times, but we have to say it again: do it. A large, unoptimized image on the homepage or landing page may hurt you.Large images are usually Maximum content of paint (LCP) For any given website. Make sure to give your visitors a proper welcome through fast loading!
We have a popular article Image search engine optimization Describe what you can do to load the image quickly. But in short, make sure to serve it at the desired size and compress it. There are many tools to help you accomplish this task.Personally, I like the results squoosh.app. Don’t think that you need to maintain such a large resolution in order to make the image clearer on the most common screens.
Also try to adopt modern formats like WebP. These formats can provide high-quality images in smaller sizes. WebP support is good Even Apple has joined in! The upcoming Safari 14 (on MacOS and iOS) will support WebP. Yes, the new Chromium-based Microsoft Edge browser also supports WebP.
CMS is also a tool that can help you improve loading images. The latest version of WordPress supports automatic lazy loading of images (and iframes), which is great news! This means that it will only load those images displayed on the screen, and the rest will be loaded when the user interacts with the screen. This tells the browser to load large images only when needed.
Another evergreen site speed recommendation is to use CDN, But did you know that CDN can also be used exclusively for images?One Picture CDN Allows you to better control your own service methods and how these methods are displayed. The image pushed by the image CDN will get a string of attributes in its URL, which will tell the browser the behavior of the image.
Stable loading by specifying space for images, etc.
One of the new indicators is Cumulative layout shift, Or CLS for short. An example of this is when the mobile page appears to be ready, and when you want to press a button, the content will move and slow-loading ads will appear in that location. This situation often occurs and is one of the main reasons for user frustration.Now, although optimizing your CLS does not necessarily make your page Yes Faster speed will surely succeed feel Faster.
CLS is caused by images that have no dimensions in CSS. It may also be caused by ads and embeddings that have no size or dynamically injected content.If the size is not specified correctly, these elements tend to jump It only takes a moment during the loading process to make it appear jerky and unstable. This may also be due to the insertion of new content above existing content. Don’t do this unless there is explicit interaction from the user.
One of the ways to improve Core Web Vital and prevent CLS is by adding the width and height of the image in CSS. In this way, the browser will reserve space for the image that may be displayed later than the text. Now, this chaotic state will disappear, because the browser knows that it will add some content in due course. If you want a certain time to appear quickly, you can consider adding some kind of low-resolution placeholder.
Therefore, just make sure that your image has the correct width and height properties. Of course, you can also use regular response images to do this. Just make sure you use the same aspect ratio for all sizes.
<img src="https://yoast.com/boost-core-web-vitals/mountain.jpg" width="640" height="360" alt="Mountain underneath a cloudy sky">
In order to deal with jumping advertisements or injected content, please reserve space for them at the same time. In the end, your CLS may drop a bit.
Speed up your server to reduce loading time
The faster the server can respond to requests, the better. Making the server more responsive can directly improve many site speed indicators. On complex sites, the server is busy processing requests and providing files and scripts, so it is best to optimize those processes.
The optimization server consists of several parts. First, upgrade your hosting plan. Don’t be unscrupulous in hosting. Choose a product that provides good performance at a reasonable price. In addition, there is also how to set up server transactions-use the latest version of PHP! —And what hardware you have chosen. If you find that the hardware is missing, you may want to upgrade the hardware. In addition, you need to study how the database works to see if you can make improvements.Use similar tools Query monitoring WordPress plugin In order to continuously analyze the queries on your website.
You can also study how the server pushes files to the client.There are several ways to enhance the process, such as
link rel=preload E.g. These are more advanced solutions that allow you to fine-tune how the server responds to requests. Likewise, here, CDN can improve your core network life.
View important CSS to load collapsed content faster
Since CSS loads late, it usually takes a while for some content to be displayed on the screen. By moving the key part of the design (the part that appears above the fold) out of the main CSS file and inlining it into the code, you can display something on the screen faster. Solving this problem again won’t make your website faster, but it can make it look faster. All to get this trump card user experience.
Improve the loading of third-party scripts
For many sites, the slowness also comes from outside. For example, if your website relies on ad scripts, then you are basically in the hands of the ad provider. You can only hope that they make their ads perform well. If their ads load really slowly, then maybe it’s time to find other providers.
If you find that third-party scripts are slowing down your site, you should investigate this. Ask yourself, do I really need that particular advertisement? What is the value of these scripts? There may be a different choice, which optimizes your server and reduces the pressure. Maybe try it?
If possible, you can try hosting the script yourself. In this way, you can better control the loading process. If this is not possible, see if it can be preloaded faster.
At the very least, make sure to load the script asynchronously or postpone it to the last minute. In this way, the browser can build the page before fetching and running the external script. If the script you want to load is important, use asynchronous, such as analysis scripts. You can use defer for less important resources.There are many Documentation on optimizing third-party scripts.
Improve the vitality of the core network: all small improvements
With the advent of the page experience update in May 2021, Google once again puts website speed and user experience in the first place. We have always looked at SEO as a whole-there are many moving parts, and you should work on all of these parts to build the best site. Although the techniques mentioned above can help you improve those Core Web Vitals scores, you really should do it in order to provide a better experience for your visitors.