HTML refactoring and Web page common tools

Source: Internet
Author: User
Tags website performance

The following mind map is my general summary of the book's General content:

  Tools

The tool recommended in this book is mainly about automated testing, but I think that the actual development process in the current use will be relatively small. Here are some other great tools to recommend:

1. YSlow

YSlow is a browser plugin that Yahoo has launched to help you analyze your site's pages and provide you with some optimization suggestions to improve the performance of your site. poke Me check Yslow-23 rule

    • Firefox plugin
    • Chrome Plugin
    • YSlow for Mobile/bookmarklet
    • Source

  

2. pagespeed

Pagespeed is also a browser plugin, launched by Google, to optimize our web site practices-helping you easily analyze your site's performance bottlenecks and provide you with recommendations for optimization.

    • Online Analysis of your website
    • Install browser plugin ( Chrome, Firefox)
    • embed Pagespeed functionality in your app with the Insights API

  3. Other Excellent tools

  • Spider Simulator : This tool can analyze your page and provide some suggestions for optimization.
  • Image SEO Tool : This tool can check the ALT tag of the picture and provide some suggestions for optimization.
  • Request Checker : Find out which resources and services you need to load on the page.
  • link checker : Check for internal, external, and invalid links on the page.
  • HTTP Header Check : Displays the HTTP response header for a Web page or resource.
  • Social Checker : Check the social components on the page, such as Google +, Facebook, Twitter, LinkedIn, and Pinterest.
  • if Modified checker : Check if the page accepts if-modified-since HTTP headers.
  • gzip Checker : Check if the page has been gzip compressed.
  • CSS Delivery tool : Check the CSS file used in the page.
  • breadcrumbs Tool : Provides breadcrumb navigation code based on the information you enter.
  • CSS Compression tool : Used to compress CSS code.

  

  Good structure

  What is good structure? Technically speaking: it means that the document has to follow a certain strict end such as each start tag should have an end tag, the element's start and structure are within the same parent element, and each entity reference must be defined beforehand. Although most Web sites are now being used:

1 <!DOCTYPE html> //dtd

With html5<! The doctype> tag allows us to write HTML tag statements without the need for that specification, but I think it is necessary to follow the XML standard in terms of rigor, regularity, and readability of the document. The so-called good structure conforms to the standard:

 1. All start tags should have a matching end tag.

  2. Empty elements should use the label syntax for empty elements.

  <br/>-<br class= "Empty"/>

  3. All attributes must have a value

  4. All attribute values need to be enclosed in quotation marks

  5. All & numbers must be escaped to &

There is a problem with embedded JavaScript here. & in Javascript is not escaped. You can move the script out of an external file that you do not need to escape or put the script in a comment.

  6. All less than < are escaped to <

There is a problem with embedded JavaScript here. Javascript does not take < as less than sign. You can move the script out of an external file that you do not need to escape or put the script in a comment.

  7. Only the unique root element

  8. Escaping quotation marks in attribute values

" escape as" in the attribute value and ' escape as ' .

  9. All non-predefined entity references must be declared in the DTD

  10. End each entity reference and replace the imaginary entity reference

the XML requires the entity reference to end with a semicolon.

  11. Change the name to lowercase, all elements of the

  12. Convert text to UTF-8

Utf-8 is a standard encoding that works on all browsers and is supported by a mainstream text editor tool that supports all Unicode characters.

  Content  

    • Fix spelling mistakes, typos
    • Ensure availability of all connections
    • Mobile page (Automated check connection)
    • Reorganize the structure of URLs to be more transparent to developers, visitors, and search engines, but make sure the old URLs continue to work
    • Delete Portal page (user experience first)
    • Hide e-mail

   Accessibility

    • Turn a picture into text

The author said three points.

A, for users with poor eyesight can perceive the text through perception

b, can increase the results of search engines

C, can improve website performance, and can save bandwidth cost and visitor's time

Author or that sentence: HTML document Only content should not have decoration

    • Add a label to a form input box

    Make sure that all of the form elements, such as non-hidden input,textarea,select, have a corresponding label

    • Use a standard field name
    • Turn on auto-complete
    • Add a Tab index to the form

    Add a tab index to each form so that users can jump through the TAB key

1 <input tabindex="1"type="checkbox"/>

There are 7 elements that support TabIndex:A Area button input object Select TextArea

    • Add jumps for longer pages, as appropriate
    • Enlarge input Box
    • Add a table description
    • Add lang attribute

12345678910 // en定义语言为英语// zh-CN定义语言为中文"http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">"http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">// 如果网页定义为XHTML1.1或者XML格式,那么可以使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法).// 如果网页使用HTML格式,那么应该同时使用xml:lang和lang属性.

  

  Layout 

    • Replace a table layout with Css+div

Creating a modern Web page requires using XHTML that is separate from the CSS to avoid the use of expressive elements such as tabular layouts and font tags (//cliché)

    • Using Css to position alternative frames
    • Correct tag list
    • Replace placeholder pictures
    • Add ID attribute

Web application  

    • Correct use of POST and GET

The following actions should all be done via POST

1) Order Items

2) Sign Legal documents

3) Delete the page from the CMS

4) Sign Representations

5) Send e-mail

6) inserting new content into the database

7) Print the map

8) Control Machine

The following actions should be done through a GET operation, as this is safe. And you don't have to force users to accept

1) Read the document

2) Download a copy of the editable document from the CMS

3) Read e-mail

4) View Map

5) Check the current state of the machine

get url can be linked, Crawled, collected, pre-crawled, cached by crawlers. get Let the user use the back key. In general, in these cases get operation ratio postget

    • Enable & block caching

Enabling caching of some infrequently changed resources, such as Web icon, can greatly increase the speed of user access to pages and improve user interaction performance.

    • Using the ETag 

ETag: The ETag is the Entity Tag of the URL, whichindicates whether the URL object has changed, distinguishes between different languages and sessions, and so on. The specific internal meaning is to make the server control, just like a cookie.

    • Replace Flash with HTML

HTML refactoring and Web page common tools

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.