Speed up web display
The speed of web page display depends on many factors such as connection speed, server processing speed, website content and client computer processing speed. In order to speed up the display of the website, it can be divided into 3 parts to handle the following :
- At the server: Minimize server calculations, optimize databases, create buffers, optimize programs .
- Transmission: Minimize data transmission on the network by reducing the size of image files, reducing the need for data exchange between server and client .
- At client machine: optimize html code for browser to display quickly.
With the above strategy, here are 10 tips that can help speed up website display.
1. Use CSS to define the properties of objects in web pages
Using CSS will help improve the loading speed of web pages significantly. The browser will only download CSS files to the client machine once, the next time the web pages using this CSS file will be retrieved from the client. Focusing all of the attribute definitions into the CSS file makes the HTML snippet short and clear and helps reduce the size of the web page.
Another convenient point when using CSS files is that you can change the colors and appearance of web pages quickly by editing the properties in the CSS file.
2. Write Javascript on a page and use it for multiple pages
This is similar to the technique of using CSS files for every web page. For example, the JavaScript code displays ads for multiple pages, if you write the entire Javascript code in a file then declare it on the following pages:
Like CSS files, the browser only downloads this file once.
3. Use AJAX
AJAX stands for Asynchronous JavaScript And XML, this technique uses Javascript and XML to optimize data exchange between client and server. Suppose your site contains a lot of information, including a section containing 2 combobox: Country and City. When you select a country on combobox 1, then the corresponding combobox 2 cities will appear. In the usual way, when selecting a country, its parameters will be sent to the server. Here the content of the website is recalculated and returned to the client with combobox2 containing the cities of the selected country. So only a small part of the site changes but must download the entire site and render. With AJAX, after processing, the server only sends the result to the client list of cities, not the entire site. This greatly improves the response speed of the website.
4. boldly remove what is not needed
Remove flash and audio files if they are not really needed. In addition, for web developers, using HTML control instead of server control of ASP / JSP . also helps reduce compile time (from ASP / JSP . to HTML).
5. Avoid using nested tables in tables
When you write the nested table in the table, the browser will take longer to display the web page. This is the least noticeable thing but is a technique to improve the most significant website display speed. When you place a table inside a table, it will take a long time for the web browser to browse the entire code within each table and then make the presentation on the screen for the user to see. If possible, use CSS to create lines and columns for web pages.
6. Do not use the table to cover the entire content of the website
If you use a large table to create the layout for the site as follows:
The browser will have to download all the information of the components in the table including: Top, Left Menu, Content . to the client, and then calculate and calculate all control, whitespace, images . inside the table. When everything is complete, the web browser will display the contents of the table on the screen at the same time.
If you do not use the table to cover the entire content of the website, in addition to reducing the website size, the processing time is displayed at the client, it also allows the web browser to display partially processed, for Users have some information to read first, while waiting for others to continue to display, this gives users the feeling that your website has a fast display speed.
7. Split web pages into smaller pages
Instead of displaying all the information on a web page, divide the web page into small sections and display it on many different pages. Like Yahoo Mail, you can only view 50 emails on the screen at a time, to see a list of other emails you have to click the next / previous link .
This not only helps to speed up the display of websites, but in fact, most users really do not like to wait for a few minutes to see a website with a long content, to use scroll bar to view out of content.
8. Delete unnecessary spaces
Try to delete all unnecessary spaces in the html code. Remember that pressing a space key increases the size of your website by 1 byte. Removing this space can be done by hand or using support tools such as HTML code Cleaner (can be found with Google).
9. Clean up the program code for clarity
Please remove all blank tags like div>
good. Not only does this improve website capacity, speed up the display, but also make your code clear, making it easy to edit or upgrade.
10. Optimize images
Restricting the use of images : Images make your website come alive and attractive, but images are also one of the reasons that slow down the speed of website display.
Specify the size of the image : When the browser displays the image of the web page, it must know the size of the image so that it can leave space on the screen for displaying this image, and the display will in the top down order. If you do not specify the size of the photo (for example:
Reduce image size : Minimize the image size. Sometimes you don't need to upload a website with high quality images that can use thumbnails instead. GIF / JPG format is the first choice for websites because of its small size.
Example of using CSS instead of table
3 ways to display a simple login form:
- Use the board
- Do not use tables
- Do not use tables and use CSS
1. Use the board
The result of the above code will look like the image below
2. Don't use tables
The result of the above code will look like the image below
3. Use CSS
From the second way above if you define CSS for Label object and Submit Input as below, you will get result like way 1 without using table.
The result after defining the CSS for the Label object and Submit Input
Now, if you want to add color and create a frame you can use tags
HTML code
Tag inside the tag
These are just basic optimization techniques for HTML code. See you in the following articles about website optimization techniques with database code, VB, C #, JSP .
Duong Quy Phuong
www.viettechs.com
-----------------------------------------------
Reference :
1. http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
2. http://www.webweaver.nu/html-tips/load-time.shtml
You should read it
- How to show the website icon on Safari for iPhone, iPad and Mac
- Anyone can create a small and simple website with these 10 websites
- Instructions for creating a website for beginners
- 6 leading website design companies in Vietnam
- 4 tools to help build a website for beginners
- Display (inline-block) properties in CSS
- How to take photos of the website, capture the whole website on Chrome and Firefox
- 3 reasons users love Always-On Display on iPhone
May be interested
- Increase / decrease the speed of slide showthere are readers asking us how to 'set the time to display each slide when playing'. here is how to do it in many different applications.
- Display (inline-block) properties in CSSthere are some differences between the display of tags,, and,. explain this through a lesson about the value of the display attribute right away.
- Why is upload speed usually much slower than download speed?if you regularly check the internet connection speed at home or office, it will not be difficult for you to realize that the download speed is usually much faster than the upload speed.
- 3 reasons users love Always-On Display on iPhonemany things have changed with apple's implementation that makes the user experience a lot better. so here are 3 reasons users love always-on display on iphone.
- These factors determine the speed of the computerif you want to improve the speed of your computer system, the first thing you need to pay attention to is to arrange and select components that are reasonable so that they can interact with each other effectively. best.
- 7 mistakes should be avoided when checking Wi-Fi speeda simple way to confirm whether something is wrong is to check the wi-fi speed. this is very easy to implement. there are many online wi-fi speed test services running inside the browser.
- Measuring the speed of Viettel, VNPT and FPT using Speed Of Methere are many ways to check internet speed, if you regularly measure the speed of your network, you definitely know speed test, bandwidth place. today, tipsmake.com gives you another tool to check the network speed: speed of me.
- Control computer fan speedyour computer is making a loud sound perhaps because the fan of the machine is reaching its highest speed even though it doesn't need that speed yet. here are some ways to distribute computer fan speeds, cool or break when needed.
- Simple operations to speed up the Macbookin addition to the flashy and expensive design, the apple imacs, macbooks, mac mini, mac pro are always famous for their incredibly remarkable work speed from thorough and self-contained synchronization. however, it can become 'sluggish' after a period of use if not 'properly' cared for.
- Enhance your experience with the ViewFinity S9 monitor and T7 Shield portable hard drivethe samsung viewfinity s9 5k display provides a large display space, with sharp 5k resolution. meanwhile, the pssd t7 shield portable hard drive provides the ability to store and access data smoothly and at high speed.