Web designers should optimize web pages from three aspects
|
<br />With the increase of bandwidth, there are more and more objects on web pages, so speeding up the opening of web pages is still an important issue. There are three ways to speed up the opening of web pages. The first is to increase network bandwidth, the second is for users to optimize on their local computers, and the third is for website designers to optimize the web pages. This article shares some tips on optimizing web page loading speed from a website designer's perspective. 1. Optimize pictures <br />There is almost no web page without pictures. If you've lived through the days of 56K modems, you'll definitely not like websites with lots of images. Because loading a web page like that would take a lot of time. Even now, when network bandwidth has improved a lot and 56K modems are gradually fading out, it is still necessary to optimize images to speed up web pages. Optimizing images includes reducing the number of images, lowering image quality, and using appropriate formats. 1. Reduce the number of pictures: remove unnecessary pictures. 2. Reduce image quality: If it is not necessary, try to reduce the quality of the image, especially the jpg format. Reducing the quality by 5% may not seem to change much, but the change in file size is relatively large. 3. Use appropriate formatting: See the next point. Therefore, before uploading the picture, you need to edit the picture. If you think Photoshop is too troublesome, you can try some online picture editing tools. Too lazy to edit but want special effects on your pictures? You can try to use javascript to achieve image effects. 2. Selection of image format <br />Generally there are three image formats used on web pages, jpg, png, and gif. The specific technical indicators of the three formats are not discussed in this article. We only need to know when to use which format to reduce the loading time of the web page. 1. JPG: Generally used to display photographic works of landscapes, figures, and artistic photos. Sometimes also used for computer screenshots. 2. GIF: It provides fewer colors and can be used in places where color requirements are not high, such as website logos, buttons, emoticons, etc. Of course, an important application of gif is animated images. Just like the reflection pictures made with Lunapic. 3. PNG: The PNG format can provide a transparent background and is an image format invented specifically for web page display. It is generally used on web pages that require a transparent background or have high requirements for image quality. 3. Optimize CSS CSS cascading style sheets make web pages load more efficiently and improve the browsing experience. With CSS, tables can be retired as a layout method. But sometimes when we write CSS, we use some more wordy statements, such as this one: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; You can simplify it to: margin: 10px 20px 10px 20px; Or this: <p class="decorated">A paragraph of decorated text</p> <p class="decorated">Second paragraph</p> <p class="decorated">Third paragraph</p> <p class="decorated">Forth paragraph</p> You can use div to contain: <div class="decorated"> <p>A paragraph of decorated text</p> <p>Second paragraph</p> <p>Third paragraph</p> <p>Forth paragraph</p> </div> Simplifying CSS can remove redundant attributes and improve operational efficiency. If you are too lazy to minify your CSS after writing it, you can use some online minification tools, such as CleanCSS. Previous Page 1 2 Next Page Read Full Article |
<<: How to control the proportion of Flex child elements on the main axis
>>: Solve the problem of inconsistent MySQL storage time
Recommend
Explain how to analyze SQL efficiency
The Explain command is the first recommended comm...
Simple summary of tomcat performance optimization methods
Tomcat itself optimization Tomcat Memory Optimiza...
Solution to index failure in MySQL due to different field character sets
What is an index? Why create an index? Indexes ar...
Three ways to configure JNDI data source in Tomcat
In my past work, the development server was gener...
Detailed analysis of MySQL 8.0 memory consumption
Table of contents 1. innodb_buffer_pool_size 2. i...
MySQL password is correct but cannot log in locally -1045
MySQL password is correct but cannot log in local...
How to create, start, and stop a Docker container
1. A container is an independently running applic...
JavaScript to show and hide images
JavaScript shows and hides pictures, for your ref...
MySQL uses binlog logs to implement data recovery
MySQL binlog is a very important log in MySQL log...
There is no make command in Linux (make: *** No target specified and no makefile or make command installation method found)
Notice! ! ! This situation can actually be avoide...
HTML Editing Basics (A Must-Read for Newbies)
Open DREAMWEAVER and create a new HTML. . Propert...
Summary of Mysql update multi-table joint update method
Next, I will create two tables and execute a seri...
Solution to the problem that Java cannot connect to MySQL 8.0
This article shares a collection of Java problems...
Detailed explanation of VueRouter routing
Table of contents vue router 1. Understand the co...
Problems and solutions for deploying Nginx+KeepAlived cluster dual-active architecture in VMware
Preface Use nginx for load balancing. As the fron...