Simple tips to increase web page loading speed
|
The loading speed of a web page is an important indicator for evaluating the quality of a website. The reason is that most users can tolerate only a few seconds of web page loading time. If it exceeds the visitors' tolerance range, they will ruthlessly close your web page, so the web page loading speed will greatly affect the website's traffic and visits. The following summarizes several simple and preliminary techniques that can significantly improve the loading speed of the website. If your website has a slow loading speed problem, you might as well use this as a reference to make some preliminary optimizations to the web page. Speed up web page loading – Optimize web page image files <br />Your web page must have images, and when loading a web page the total size of the images is often the largest, especially those colorful background images and large advertising images. Therefore, it is generally necessary to reduce the image size as much as possible while maintaining the same image quality. In Photoshop we can try the option to save as a web image. There are also several commonly used file formats for images. For example, JPEG is generally used to store photos or full-color images, such as photos, screenshots, etc. The GIF image format has fewer colors than JPEG and is suitable for small images, such as buttons and logos. In addition, GIF supports dynamic effects. PNG is similar to GIF, but it is larger in size, supports more colors than GIF, and supports background transparency. We can try saving the image in a different format, such as changing PNG and JPEG to GIF. Speed up web page loading – Use height and width attributes for images <br />Will you add height and width attributes to each image? These two attributes allow the browser to know the length and width of the image before loading it, and reserve the specified length and width to be displayed after the image is loaded. Without these two attributes, the browser will need to process the page layout style again after successfully reading the image, which will undoubtedly slow down the loading speed of the web page. Therefore, it is best to use the length and width attributes when the image size is fixed. Speed up web page loading – CSS file compression and slimming DIV+CSS is now a fluent way to layout web pages. DIV defines the elements and CSS controls the display effects. So we often write CSS into one or more other externally linked CSS files, and the CSS file code also has many lines. We can use some CSS compression tools to delete unnecessary redundant content in CSS files, such as repeated style definitions, spaces, etc. to reduce the size. You can try using the CleanCSS tool to compress your CSS files. Speed up web page loading – add a slash (/) after the directory address For example, if a visitor clicks on a directory address like this: https://www.jb51.net/web, he will open the index.html document in this directory. When the server receives the request it takes some time to analyze whether it is a file or a directory. But if we add a slash (/) at the end, the server will know that you are accessing a directory address and will directly load the default document index.html or index.php. This way the server doesn't have to spend time analyzing the address, and it also has a certain acceleration effect. Speed up web page loading – Integrate CSS and JS files to reduce the number of HTTP requests <br />Today’s web pages have multiple images, CSS external file links, and Javascript external script links. So when accessing a web page, the browser needs to request these files from the server multiple times. There will be a considerable time lag between the request and the loading. Especially for some web pages with multiple small pictures, icon buttons, the browser needs to request as many small files as there are pictures. Requesting these small picture files too many times will obviously affect the loading speed of the web page. So we should combine small images into a large PNG image as much as possible, and then display the icon through coordinates. Requesting a large image once is much faster than requesting multiple smaller images. Likewise, it is best to combine CSS and JavaScript into one file as much as possible to help speed up page loading. In conclusion, only some simple and basic tips are mentioned here because these are the easiest optimization methods to do. Next, we also need to consider whether the web page code (php or aspx) is optimized and efficient, the server's response speed, whether the server bandwidth is sufficient, and other deeper factors. But if the above points are done well, I believe the web page acceleration speed will be greatly improved. |
<<: Detailed tutorial on jdk installation and environment variable configuration under Win10
>>: MySQL Tutorial: Subquery Example Detailed Explanation
Recommend
What you need to know about MySQL auto-increment ID
Introduction: When using MySQL to create a table,...
Detailed explanation of formatting numbers in MySQL
Recently, due to work needs, I need to format num...
Summary of examples of common methods of JavaScript arrays
Table of contents Common array methods concat() M...
Detailed explanation of how to quickly operate MySQL database in nodejs environment
GitHub address: https://github.com/dmhsq/dmhsq-my...
Use h1, h2, and h3 tags appropriately
In the process of making web pages, it is inevita...
MySQL 5.7.17 winx64 installation and configuration tutorial
Today I installed the MySQL database on my comput...
CSS position fixed left and right double positioning implementation code
CSS Position The position attribute specifies the...
Detailed analysis of MySQL optimization of like and = performance
introduction Most people who have used databases ...
How to let DOSBox automatically execute commands after startup
Using DOSBox, you can simulate DOS under Windows ...
Vue implements carousel animation
This article example shares the specific code of ...
Nginx reverse proxy configuration to remove prefix case tutorial
When using nginx as a reverse proxy, you can simp...
Win10 installation of MySQL 5.7 MSI version of the tutorial with pictures and text
I installed it in msi format, mainly to see the m...
Detailed explanation on how to avoid the pitfalls of replacing logical SQL in MySQL
The difference between replace into and insert in...
4 solutions to mysql import csv errors
This is to commemorate the 4 pitfalls I stepped o...
Detailed example of deploying Nginx+Apache dynamic and static separation
Introduction to Nginx dynamic and static separati...