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. To increase the speed of web page display, it can be divided into 3 parts to handle as follows

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: ), the browser must download the previous image to determine the size before processing the display content. This is similar to using the table to cover the entire content. So if possible, you should use the declaration 'width', 'height' to specify the size of the image in advance.

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

will create a header for the frame around the form content, the result will look like the image below.

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

Related posts
Other Basic knowledge articles
  • How to get photos from digital cameras

    máy ảnh kỹ thuật số (kts) ngày nay có nhiều tính năng nổi bật và giá thành ngày một giảm, điều này làm cho nó được nhiều người dùng có thu nhập thấp quan tâm. một ưu điểm của máy ảnh kts là nó hỗ trợ thẻ nhớ ngoài,
  • How do economic hackers work?

    Đó là thế giới của những chat room, những malware và các kế hoạch phishing tinh vi. hoạt động bên trong của chúng ra sao? hacking bây giờ không còn là trò chơi của trẻ con. nó đã trở thành hình thức kinh doanh lớn. các th
  • Forum - things to know

    forum, còn được gọi là 'phố rùm', là xu hướng tham dự của cộng đồng dân cư trên internet. qua các 'phố rùm', chúng ta sẽ có nhiều thông tin hơn, biết được nhiều điều hơn.
  • Keep digital devices from overloading

    nhà bạn đang sở hữu những thiết bị kĩ thuật số như máy ảnh kỹ thuật số, máy quay phim kĩ thuật số, các sản phẩm nghe nhìn… thông thường dịp tết về cũng chính là lúc nhóm các sản phẩm này hoạt động hết công suất và đôi khi bị quá
  • Add a solution to the problem of Web development

    hiện nay có không ít phần mềm quản lý website, không thiếu những bộ công cụ xây dựng web... thế nhưng, sự phức tạp trong quản lý, lượng thời gian hao phí, và tổn thất nhân lực của các phần mềm này đang làm đau đầu các nhà phát triển web.
  • Change the look for Firefox

    trình duyệt firefox giờ đây đang ngày càng phát triển và trở nên khá phổ biến. sử dụng trình duyệt này bạn có thể tránh được các lỗi bảo mật web mà trong internet explorer thường mắc phải.
Category

System

Windows XP

Windows Server 2012

Windows 8

Windows 7

Windows 10

Wifi tips

Virus Removal - Spyware

Speed ​​up the computer

Server

Security solution

Mail Server

LAN - WAN

Ghost - Install Win

Fix computer error

Configure Router Switch

Computer wallpaper

Computer security

Mac OS X

Mac OS System software

Mac OS Security

Mac OS Office application

Mac OS Email Management

Mac OS Data - File

Mac hardware

Hardware

USB - Flash Drive

Speaker headset

Printer

PC hardware

Network equipment

Laptop hardware

Computer components

Advice Computer

Game

PC game

Online game

Mobile Game

Pokemon GO

information

Technology story

Technology comments

Quiz technology

New technology

British talent technology

Attack the network

Artificial intelligence

Technology

Smart watches

Raspberry Pi

Linux

Camera

Basic knowledge

Banking services

SEO tips

Science

Strange story

Space Science

Scientific invention

Science Story

Science photo

Science and technology

Medicine

Health Care

Fun science

Environment

Discover science

Discover nature

Archeology

Life

Travel Experience

Tips

Raise up child

Make up

Life skills

Home Care

Entertainment

DIY Handmade

Cuisine

Christmas

Application

Web Email

Website - Blog

Web browser

Support Download - Upload

Software conversion

Social Network

Simulator software

Online payment

Office information

Music Software

Map and Positioning

Installation - Uninstall

Graphic design

Free - Discount

Email reader

Edit video

Edit photo

Compress and Decompress

Chat, Text, Call

Archive - Share

Electric

Water heater

Washing machine

Television

Machine tool

Fridge

Fans

Air conditioning

Program

Unix and Linux

SQL Server

SQL

Python

Programming C

PHP

NodeJS

MongoDB

jQuery

JavaScript

HTTP

HTML

Git

Database

Data structure and algorithm

CSS and CSS3

C ++

C #

AngularJS

Mobile

Wallpapers and Ringtones

Tricks application

Take and process photos

Storage - Sync

Security and Virus Removal

Personalized

Online Social Network

Map

Manage and edit Video

Data

Chat - Call - Text

Browser and Add-on

Basic setup