Top 12 feasible techniques to improve Google PageSpeed Insights score

When the page is loaded too long, the visitors will go to another page to faster Find the answer. Slowly prevents visitors from staying on your website, no matter how they find you (natural search, recommendation link, paid advertisement).

In addition to improving your website’s user experience (UX), fast websites can also improve the overall SEO. If your website is fast, then you are more likely to get higher ranking compared to websites with higher jump rates. As the page loaded from 1 second to 6 seconds, the possibility of the visitors jumped out by 106%.

The one -second delay of the loading speed of the mobile website may affect up to 20% of the conversion rate.

InformationSource: Thinking with Google

• A Backlinko study that analyzed 11.8 million Google search results found that it is surprising that \”there is no correlation between the page loading speed and the homepage Google ranking\” Essence It does explain that Google’s speed update only affects extremely slow pages and reduces their rankings instead of benefiting the fast page.

However, the average page loading speed of the homepage results was 1.65 seconds.

Source: Backlinko In addition, Portent 2019 research found that the website should be aimed at 0-2 seconds of loading time, with the goal of 0-2 seconds. Increase transaction conversion rate.

Data Source: Bothing

Therefore, increasing page speed should be the primary task to improve user experience and improve search engine rankings.

How does PageSpeed \u200b\u200bInsights work?

Data Source: Search Engine Land ] This tool is supported by providing laboratory data and Lighthouse on -site data.

When the visitor loads your page, the live data is collected from the real performance data contained in the Chrome User Experience Report (CRUX). It can identify bottlenecks to prevent real visitors from converting on your page. This includes: FIRST Contentful Paint (FCP) -The time used for loading the first text or image resources

Enter the delay (FID) for the first time -the time the browser responding to the visitors’ first interaction time

Any mobile

• Laboratory data measurement webpage in the simulation, controlled environment (such as mobile networks and intermediate devices). This is a good way to detect performance problems and find solutions. It calculates FCP, LCP, CLS, and other three indicators:
• Speed \u200b\u200bIndex (SI) – Page loading content appears visually
• [ [ [

123] Interactive time (TTI) -page becomes the time required for complete interaction

Total blocking time (TBT) -s for FCP and complete interaction

[

• [ 123] Obtaining 100/100 scores is not a direct indicator for page speed. You can have a fast loading website without getting full points.
• Visitors do not care about full points. What they want is to quickly check your content. Therefore, it is more important to focus on the suggestions given to the tool.

The results of the performance indicators used to calculate the score have different weights.

The weight of the laboratory data in lighthouse 8 below:

Performance indicators

[

[

123] Weight

fcp

10%

LCD panel

10%

30%

15%

[123 ]

It is not these weights, but the color of comprehensive performance scores and indicating score buckets:

Green (good): 90 – 100

This tool provides detailed operating items in the \”Opportunity\” section to help you improve the score.

How to improve your PageSpeed \u200b\u200bInsights score

According to the suggestions provided by the PSI tool, you can improve performance scores through the following 12 methods:

Avoid the login page for reconstruction after clicking

When you delete or move the page on the mobile website, you usually use the redirect direction.

They increased the time of the first byte (TTFB), from sending a request from the server to the time spent to send the first data byte back to the requestant. Although it is not wrong to use the redirection itself, excessive use will cause page load delay.

Make sure to use redo -to -page loading speed and improve the overall SEO when necessary.

Reduce CSS, HTML, and JavaScript

Reproduction refers to the process of eliminating or repairing unnecessary or repeated data without the browser processing HTML. It involves deleting unnecessary spaces, characters and duplication. Reduce CSS, HTML, and JavaScript to reduce the size of these files and increase the speed of page loading. Source: WP BUFFS

Use WP Rocket, HTML Minify or AutopTimize and other plugins to automatically reduce the code in WordPress.

Prefer the first screen content

, Rather than let the browser load all the images on the page before displaying the first screen. It reduces the time to reach FCP and FMP.

Source: WordStream

Use WordPress plug -in, such as Lazy Lo of WP RocketAD and A3 Lazy Load. Automatic optimization also has a delay loading function. Accelerate the server response time The server response time or TTFB measures how long the browser needs to wait for the first data byte to obtain the first data byte. The longer this time, the longer the time required for the page loading.

Low TTFB is different from the fast overall site, but the fast server response time can improve the stations performance Essence

The method of speeding up the server response time:

Use

Quickly use it quickly WordPress host

– High -quality host provider centered on WordPress has a thoughtful structure and prioritize speed. Implementation content delivery network (CDN) – If your website provides services to visitors around the world, using CDN will significantly reduce your TTFB.

Use WordPress cache -cache can reduce page loading time and TTFB because it reduces server processing time.

You can use a free cache plug -in like Cache Enabler.

Eliminate rendering blocking resources

1. The resource that prevents rendering is static files, such as JavaScript, CSS, HTML, and fonts, which are essential for the rendering of web pages. The visitors’ browsers need to and process these files before displaying the rest of the page.
3. Therefore, putting a large number Reduce site speed.

Improve your PageSpeed \u200b\u200bInsights score

Use Pressable ultra -fast WordP WordPRESS hosting

Learn more

Data Source: Online Media Master

]

There are two ways to remove rendering obstacles:

Neilian-If your webpage does not have a large number of JavaScript or CSS, please consider the inner parties, will soon JavaScript and//// Or CSS code merged into HTML files.

If you use WordPress, you can use plug -ins such as AutoPTimize to Neiqian your code. Please note that this method is only applicable to very small sites. Most WordPress websites have enough JavaScript, so this technology may be counterproductive.

Async and Defer -For large websites, the

defer

attribute the script during HTML parsing, but only executes after the analysis is completed. It also executes them in the order on the page. Immediately after ing, execute the script with async attribute.

Minimize the main thread work

\”The main thread\” is the main element of the user browser. The task is to change the code to the web page that the visitor can use. It has two functions: parsing and executing JavaScript, HTML and CSS, and processing user interaction.

1. When the main thread processing site code, it cannot handle user requests at the same time. Therefore, if the main thread working time is too long (\u0026 gt; 4 seconds), the page loading speed will become slower and the user experience is not good.
2. Source: Mafir The method of minimizing the main thread work:

Reduce CSS, reduce CSS, HTML, JavaScript -Use the inner couplet or delay to reduce the file size.

Delete the unused code -just like you narrow the code, consider any internal or delay style in any way that is suitable for your webpage.

Tools such as ChromedevTools to find unused JavaScript and CSS code. Implementing the browser cache -it involves a copy of the resource that previously loaded, so that the browser does not have to visit each timeRe -load them. Tools such as WORDPRESS website use W3 Total Cache.

Implementing code split -this is an advanced technology that involves splitting JavaScript into a package in order to perform Code.

Use webpack to implement code splitting.

The following format provides images

JPEG 2000, JPEG XR, and Webp and other formats in the next generation format loading speed faster than common file formats such as JPEG and PNG.

2. Source: Load Ninja
3. [ 123] The file size provided by WebP is 25% -35% smaller than JPEG of the same quality.
4. Webp image is reduced by 42.8%compared to PNG images.

Webp images are increasingly becoming the standard format of images. Smush and Imagify plug -ins such as WebP conversion function.

The use of browser cache

Browser cache is a basic optimization that allows your web pages to load faster to repeated visitors. When the visitor moves to the new page on your website, cache can ensure that all your data (such as the logo and fonts) do not have to be loaded again.

This will greatly increase the speed of the website. Source: Keycdn

Use W3 Total Cache, WP Super Cache, WP Rocket and other plugins for the WordPress website to achieve the browser cache.

Google PageSpeed \u200b\u200bInsights requires you to have a \”efficient\” cache strategy. This means that you need to optimize the frequency of the browser to clear the cache. But you don’t want it to be too frequent because it violates the purpose of having a browser cache.You can optimize the cache expiration time by adding cache-control and Expires header to the Nginx server. If you have the Apache server, you can edit or create a .htaccess file (with the help of Web developers).

You can also consider using PerfMattersAnd Complete Analytics Optimization Suite (CAOS) and other plug -ins such as local hosting Google Analytics.

Avoid large layout changes

Large layout changes can lead to a frustrating user experience, because page elements will suddenly appear, move and interfere with the interoperability of visitors and web pages. When the layout changes, just like the visitor is about to click or click a element (button, image, contact form), the screen moves downwards, they clicked other things.

Avoiding large layout changes is particularly important for mobile devices. The poor CLS score indicates that your web page is \”unstable\” or visual instability.

Source: Generate Press

The method of preventing large layout changes:

Specify the size of the image size -Set the width and height of image and video elements in order to use the correct distance for images and video.

You can also use the CSS vertical and horizontal comparison frame to perform this operation.

Reduce the layout of the layout caused by embedded, advertising and iframe -you can take multiple measures to minimize the layout caused by iframe, advertising and embedded:

] Use the place occupies when there is no advertisement

Move the advertisement to the bottom of the viewport or outside

before loading the advertising library

]

Avoid inserting dynamic content above the existing content -you can avoid large layout changes by inserting new content such as banners and forms above the existing content, unless it is for it for it for the sake Responsible for visitors interaction.

• Prevent the flashing of invisible text (FOIT)-your CLS score may be affected by the FOIT problem. You can pre-loaded fonts and/or use font-display

attribute to ensure that your text should be visible during font loading.

• Avoid non -synthetic animation -with the help of web developers, perform synthetic animation as much as possible to minimize the main thread work and avoid re -drawing pixels during the page loading.
  • Optimized image
  • Page speed slow and PageSpeed \u200b\u200bInsights scores are mainly caused by large images. Optimized images can help reduce FCP and LCP time and prevent CLS problems.

Source: Technical Learning

• The following are several methods of optimized images:
• Adjust the image size and compressed image: Plugles such as WP Smush Image or Crush.pics can save an average of 50% or more image size. You can also use online tools such as Optimizilla and Compress JPEG. Setting standards: Define the format and maximum resolution standard of the website image
• Use CDN to deliver the image: Delivery the network in order to deliver it faster to deliver it faster to deliver it faster image.

Use

Response image

-This involves reading this list with a browser to determine the image size suitable for the current device and display the image of the version.

Reduce the impact of third -party codeThird -party script can reduce the performance of your website by extending the main thread work. The example of a third -party script is as follows:

Google Analysis

1. javascript and font library iFrame for advertising and other content
2. YouTube video video Embedded Social media sharing buttons and referrals
3. Source: web.dev
4. Although some of them may be for your website may It is necessary, but there are some ways to minimize their impact:

Loading of javascript

Local custody third -party script, such as Google Analytics

• ] Link label with

pre -connection

• attribute

Avoid excessive DOM size

Document target model (DOM) is the browser converting HTML to the HTML to the Object method. It uses a tree structure with multiple individual nodes representing each object. The larger the size of the DOM, the longer the time you need to load the webpage.

Source: web.dev

Google PageSpeed \u200b\u200bInsights will suggest that you reduce the complexity of the number of nodes and CSS styles.

You should also use GZIP compression or a lightweight lightweight network with more response designSite theme.The heavy theme adds more elements to the DOM, and may have complex styles, which slows down the loading speed of the page.

Give you

3. Google PageSpeed Insights is a valuable tool for website owners and marketers, even those with less technical knowledge.By following the suggestions in the PSI report (but do not attach to the perfect score), you will definitely increase your website ranking in SERP.

Switch to pressing

One of the fastest ways to increase the speed of the page is to switch to the fast WordPress host.With the help of non -easy -to -lose sex (NVMe) server, automatic zooming and free global CDN built for WordPress, Pressable can ensure that your website can run quickly under all traffic.View price

Author: