Detailed TODO actions on how to improve the speed of the website and its pages
1- Eliminate or deactivate resources that prevent visualization:
The resources to apply functions and styles to the page delay the visibility of the main content. Insert the JavaScript code and CSS key directly into the HTML file so that it is displayed before and differs the burden of codes of these types that are less important.
2- Apply an appropriate size to the images:
You should not display on the page images whose size exceeds the viewing dimensions offered by the user’s screen. Change the size of the images to fit those dimensions. This will reduce the loading time of the page.
3- Defer the loading of images from the bottom half of the page:
Since, when the page loads, users do not see images that are outside the area shown on the screen, it is not necessary for such images to load immediately. The loading of images that are not displayed on the screen differs to accelerate the loading of the page.
4- Minify the CSS code:
Minification removes all data from a code file that is not needed to execute it. Thus, the response is faster and bandwidth costs are reduced.
5- Minify the JavaScript code:
Minification removes all data from a code file that is not needed to execute it. Thus, the response is faster and bandwidth costs are reduced.
6- Encode images effectively:
The less competition there is for bandwidth, the faster the content will download the browser and display it on the screen. By optimizing the images, you will improve the performance of the website.
7- Show the images in last generation formats:
If you encode images in JPEG 2000, JPEG XR and WebP format, they will load faster and consume less mobile data. Displays an alternative PNG or JPEG image that is compatible with other browsers.
8- Enable text compression:
Text compression minimizes the number of bytes, which speeds up page loads. Enable it on the server to minimize the total bytes of the network.
9- Configure a preconnection with the sources of the necessary resources:
When connections are established, slow networks usually take a long time to send requests to the server. If you configure a pre-connection with the sources of the necessary resources, the application will be faster, but will not consume more bandwidth.
10- Reduce server response times:
Users do not like pages that take a long time to load. If the server is slow to respond, the loads may be slower.
11-Avoid using too many page redirects:
They further delay the loading of the page. Remove unnecessary ones and replace them with direct links.
12-Preload the key requests:
If you preload the requests, the pages may load faster. It includes preload links in the HTML code to tell the browser to download the key resources as soon as possible.
13-Use video formats for animated content:
Use MPEG4 or WebM videos for animations and PNG or WebP for static images, instead of GIF files. Thus, you will reduce the byte consumption of the network.
14-Prevents the network payload from being too large:
Reduce the total size of network requests to speed up page loading.
15-Show static resources with an effective cache policy:
HTTP caching can reduce the page load time of recurring visitors. Increase the duration of the cache to speed up the loading of pages for these users.
16-Prevent the size of the DOM from being too large:
A large DOM tree can reduce page performance. Find ways to create DOM nodes only when necessary and destroy them when they no longer work.
17- Minimize the number of important requests:
Minimize the number and download size of key resources.
18-Use the marks and measures of the User Timing API:
You can instrument some parts of the scripts with the User Timing API to create real measurements of key user experiences.
19-Reduce the execution time of the JavaScript code:
If the JavaScript code does not run quickly, the page may slow down.
20-Reduces the time of analysis, compilation and execution of the code:
Make sure the text remains visible while loading the web source
21- Use the CSS function “font-display” to speed up the loading of web fonts:
This statement allows text to be displayed to users before they finish loading custom web fonts.
22- Differ the load of the CSS code that is not used:
Style sheets with unused CSS code can significantly increase the time that users expect