Develop high-performance websites Part 1: 20 client code optimization skills

This three-part article outlines an intuitive, time-saving, and effort-saving way to speed up website access. This is based on two simple rules related to website performance:

• Minimize the amount of data transmitted
• Minimize the frequency of data transmission

If used properly, these two rules will:

• Increase webpage loading speed
• Reduce the resources used by the server
• Improve network bandwidth utilization

Using these skills to develop websites not only improves users' satisfaction with a website or a web-based application, but also saves website data transmission costs. The technical details described in this article can help us write very useful code. From a broader perspective, this will also create a good usability Foundation for the website.

Code Optimization Tips for 20 clients

Write code for yourself and compile for use

Every programmer knows clearly that there is a reasonable reason for not delivering the code they use as the final code. When writing code, it is best to write as many comments as possible to maximize the readability of the code through the orchestration format, while avoiding excessive conciseness and preventing obscure code from causing difficulties for future maintenance. Then, we will use the compiler to convert the source code into other formats. On the one hand, we can achieve optimal execution, and on the other hand, we can prevent decompilation, so as to avoid source code being plagiarized. The above model is also applicable to website development. The specific method is: First prepare the source code of the website and webpage, and then use some simple technologies (for example, reduce the blank area, optimize images and scripts, and rename files) after losing the source code, you can deliver and use the prepared websites and webpages.

I hope this concept is not abrupt for you, because at least you are likely to operate on the copy of your site, rather than directly making changes and updates on the running site. If this is not the case, stop reading this article and make a copy of your site! Whether your website's content is static manuals or very complex content management systems to drive (CMS-driven) applications, this is the only correct way to develop your website. If you do not believe it now, I dare say that you will soon believe it when you have damaged some of the website's files but find it hard to recover.

When building a website, you may focus on the biggest culprit that causes low download speeds-images and binary files (such as Flash. Reducing the color of GIF image files, compressing the size of JPEG image files, and optimizing SWF files is of great benefit. Other helpful methods cannot be underestimated. Remember the first rule in the website's performance law. We have to constantly try to transmit as little data as possible, whether it is a markup file, image, or script. It seems boring to focus on reducing the number of bytes in HTML, CSS, and JavaScript files. However, this is probably the most important thing to pay attention.

In a typical webpage loading process, (X) HTML files are first read by browsers. Since this file determines the relationship between other files, we can call this file host document ). Once the browser receives the main file, it starts to parse various markups. Generally, at the same time, it will also trigger a series of requests for related objects, for example, external scripts, associated style forms, images, or embedded Flash. These CSS and JavaScript files may continue to trigger requests for related images or scripts. The faster the requests to related files are queued, the faster they reach the browser, and the earlier the page is displayed. After understanding the importance of the main file, we know the importance of passing it to the browser as soon as possible and parsing it, because although the main file itself is relatively small, but it can seriously impede the loading speed of web pages. You need to understand that the user does not care about the number of bytes you use, and the user cares about the time!

How do you prepare for optimal transmission? One basic method is to reduce the blank area, streamline CSS and JavaScript, change the file name, and adopt the same policy for the code to be submitted, make it simpler and better (Google is an example ). these general skills are well-known and can be found on many websites and some books, such as Andy King's Speed up Your Site: Website Optimisation. This article lists the top 20 tips that we think are the most effective in optimizing markup and code. Of course, you can do some optimization manually, or use a web editor and tools to complete some optimization. Of course, you can also develop your own streamlined tools. We will introduce you to a tool w3compiler developed by Port80. it implements almost all the techniques mentioned below, and also reflects the commercial value of code optimization tasks in the "real" world. Next, let's talk about these skills!

Markup optimization

Typical markup files are either manually edited and contain comments and white space files based on the compact and standard format. They are also generated by the editor, very obese, with overly formatted orchestration and editor-specific comments that are usually used to control the structure, there may even be a lot of repetitive and unmodified or code. Both are not optimal transmission conditions. The following tips are safe and easy, and are a good way to reduce the file size:

1. Try to remove blank areas

Generally, characters in the blank area (spaces, tabs, line breaks, and so on) can be safely deleted. However, you must avoid modifying the pre, textarea, and labels affected by white-space in CSS attributes.

2. Remove comments

Except for the conditional comments declared by the client to IE and doctype, almost all comments can be safely removed.

3. Color representation in the shortest format

<