How to Improve Website Loading Speed
Why pay attention to website loading speed
Long page load times can seriously affect bounce rates
Google’s report states:
If the page load time increases from 1 second to 3 seconds, the bounce rate increases by 32%
If the page load time increases from 1 second to 6 seconds, the bounce rate increases by 106%
Second, how to detect the loading speed of the website
1.PageSpeed Insights
Here you can view the loading speed of the mobile terminal and the desktop terminal, as well as optimization suggestions, and optimize the corresponding pages according to the optimization suggestions.
The score here shows your site’s load speed rating: red is poor, orange is medium, and green is good.
There will be optimization suggestions below. Follow the optimization suggestions here to optimize the URL pages that can be optimized.
2.gtmetrix.com
Here you can see the loading speed of our website on the desktop side, and give some optimization suggestions. Red is poor, orange is medium, and green is good.
Third, the reasons for the slow loading speed of the website
Some of our desktop and mobile page loading issues can be seen in GSC’s core web metrics:
1. FCP problem (first content paint — the time from the beginning of the page loading to the time the user sees the first content element of the page);
2. LCP problem (maximum content rendering — the time it takes for users to open the website to see the largest element of the page)
3. FID problem (first input delay — the first time the user interacts with the web page, the response time of the browser)
4. CLS issues (cumulative layout offsets — unexpected offsets of web page elements), etc.
In the scoring of website loading speed, LCP and TBT (FID) have the highest weight, and we can focus on these two indicators.
Reasons for poor LCP are:
(1) Slow server response speed; (2) JavaScript and CSS increase rendering time; (3) Slow resource loading speed; (4) Slow client rendering, etc.
The reasons for poor TBT (FID) are:
Image source: google development tools (1) heavy JavaScript execution; (2) the execution time of JavaScript; (3) third-party code hinders the execution of the main thread, etc.
4. How to improve the website loading speed
(1) Optimizing LCP
1. Improve server response speed (optimize first-byte time)
(1) Optimized servers so that the server can serve static pages immediately when requested by the browser.
(2) Use CDN to distribute users to nearby CDNs, and a close server network can speed up the network speed.
(3) Browser cache, the first-byte time can be reduced by using the browser cache, and the cache is preferentially used to provide HTML pages.
(4) Establish a third-party connection as soon as possible. The server request of the third-party domain will also affect the LCP. Use rel=”preconnect” to inform the browser that your page intends to establish a connection as soon as possible.
2. Reduce render-blocking JavaScript and CSS
(1) Reduce CSS blocking time, reduce CSS; lazy load non-critical CSS;
(2) Reduce JavaScript blocking time, cut and compress JavaScript files; lazy load unused JavaScript;
(3) Minimize unused polyfills.
3. Improve resource loading speed
(1) Optimize and compress images
a. First consider not using images. If the image is irrelevant to the content, delete it; b. compress the image to a certain size (using Imagemin); c. convert the image to a newer format (JPEG 2000, JPEG XR, or WebP); d. use responsive images, self- Adapt to desktop and mobile images; e. Consider using an image CDN content delivery network.
(2) Preload important resources. Use to get this resource more timely.
(3) Compress text files. Gzip and Brotli compress HTML, CSS, JavaScript.
(4) Adaptive service. Different interface contents are displayed according to the specific conditions of the network connection.
(5) Use Service Worker to cache content.
4. Improve client-side rendering
If you are building a client-side rendering website, you should pay attention to optimizing the client-side rendering time.
a. Reduce JavaScript blocking time; b. Use server-side rendering; c. Use pre-rendering;
(2) Optimizing FID (TBT)
The optimization guide for FID is to improve the total blocking time (TBT)
1. Reduce the impact of third-party code
a. Load third-party code on demand; b. Reduce unnecessary third-party code and scripts;
2. Reduce the JavaScript of the page
a. Reduce the amount of JavaScript on a single page; b. Split JavaScript for long tasks;
b. Reduce the execution time of javaScript
c. Lazy loading of unused JavaScript;
The Code Coverage tab in Chrome DevTools can tell you how much-unused JavaScript is on your page.
b. Minimize unused JavaScript.
4. Use web workers
Web workers allow JavaScript to run on a background thread. Move non-UI operations to a separate worker thread, which can reduce the blocking time of the main thread.
5. Minimize main thread work
When a website is busy working on the main thread, it may not be able to respond quickly to user interactions, resulting in a poor user experience.
a. Optimize third-party JavaScript; b. Avoid large, complex layouts; c. Minify CSS, defer non-keyword CSS; d. Split to reduce JavaScript load; e. Remove unused code.
(3) Important ways to optimize the website loading speed
1. Optimize images
(1) Use the correct image format, PNG, JPEG, or WebP is better;
(2) Use an image of an appropriate size, use “Imagein” to compress the image, or use other image compression plugins for compression;
(3) Use video instead of GIF. If there is a GIF on the webpage, try to convert it into a video. GIF animation may account for a large amount of traffic;
(4) Use responsive images for browsing on different devices;
(5) Use CDN pictures to reduce the transfer size of picture files;
(6) Delay loading off-screen images, use lazy sizes codelab to delay loading off-screen images.
2. Optimize the video
(1) Delay loading of videos, videos on the page, especially off-screen videos, can be delayed loading, which can improve the loading speed of the page;
(2) Use an external video hosting platform, such as YouTube, Vimeo ,or Wistia, to save space and speed up loading.
3. Optimize CSS
(1) Lazy loading of non-key CSS;
(2) Minify CSS;
(3) Delete unused CSS;
(4) Extract key CSS.
Use the Coverage tab in Chrome DevTools to identify non-critical CSS and JS. Green (critical), red (non-critical).
4. Optimize JavaScript
(1) Lazy loading of large JavaScript files, which ensures that the rest of your content can be loaded immediately;
(2) Reduce JavaScript load through code splitting, and JavaScript with long tasks will occupy a longer loading speed;
(3) Delete unused code;
Use the Coverage tab in Chrome DevTools to identify which code is critical and which is unused. Click to view the segment code.
(4) Use modern code to speed up page loading.
5. Preload important resources
(1) use of content delivery networks;
(2) Preload key resources;
(3) Establish network links in advance.
6. Optimize third-party resources
(1) Reduce unnecessary third-party code, such as various plug-ins, chat tools, etc.;
(2) Block slow third-party JavaScript;
(3) High-speed loading of necessary third-party JavaScript.
7. Optimize website fonts
Use system fonts, which are common to different browsers and devices, reducing font download time.
8. Avoid multiple page redirects, redirects can slow down page loading
Use screamingfrog.co.uk to check our redirected pages, and see which pages are required to be redirected (included, with backlinks, and displayed clicks), and non-essential ones can be deleted directly to reduce redirection Extra HTTP requests.
9. Use Facade to Lazy Load Third-Party Resources
Instead of adding third-party embeds directly to HTML, video embeds, social button widgets, and chat widgets can all use facade mode to delay loading these third-party elements and improve page load speed.
10. Enable browser caching
Enable browser caching. When a user browses your website for the first time, the website’s data will be cached in the browser’s temporary repository. When the user visits again, the browser can load the page without sending another HTTP request to the server.
