Why does Google launch the AMP plan?
Google recently announced a web page acceleration project called AMP to improve the loading speed of mobile web pages. AMP is an open source project. This technology can limit HTML, CSS, JavaScript that may Code that affects web page loading speed. Google said that this technology can help Nexus 5 mobile phones increase web page loading speed by 15% to 85% ( Google AMP and Baidu MIP have an impact on SEO. Impact)
The technical core of this project is AMP HTML, which can minimize HTTP requests and load the content of the entire web page at the same time, but this technology will limit CSS, like animations and scroll bars. Such content may be affected, and content using JavaScript code will not be supported.
#Specific problems with the original mobile phone site. What is it?
Before discussing the solution, it’s worth spending a little time exploring the problem. If you do a lot of reading on mobile devices, you probably already know that on mobile phones. Or how poor web-based interactions are on computers. Pages often load slowly, render erratically and interact in strange ways. This is mainly due to the following two reasons:thirdpartyinterference
The insertion of advertisements and some tracking and analysis technologies increases the size of the page and increases the number of requests, even if the user is holding a computer with limited bandwidth and CPU processing Device. Moreover, the page often behaves as if it is just for advertising, inserting multiple document.write() call functions. The New York Times recently conducted a test that showed that the page size increased after installing content blocking software on iOS phones. Huge reduction in battery life and increase in battery life. But this also causes them to consume a lot of desktop display resources when displayed on mobile phones. When Paul Irish investigated Reddit's performance, he found that a large part of the overhead can be traced to the use of svg rendering for Reddit's mascot. , so that it can display animation effects when the mouse is hovered (based on a third-party library, which means high overhead) - this is not often the case where resources can be found on mobile devices According to Facebook. According to the survey (PDF, 3.4 MB), the average load time for an article on mobile devices is 8 seconds. This is the world of Facebook Instant Articles, Apple News, and AMP. Taking eight seconds to load is obviously an exaggeration. , which is enough for you to browse a second Vine video. Objectively speaking, by today's standards, it seems to take forever to load.How AMP is Different
Some background on how AMP and Facebook Instant Articles differ from Apple News will point out what Google is doing for its new digital publishing initiative Decide.Facebook Instant Articles and Apple News have the following in common:
In-app experience
Readers pass Facebook software on your phone to access Facebook Instant Articles, while Apple News uses a completely separate app in iOS 9. Neither platform allows users to read their articles outside of the app. You can think of them as a specially designed RSS update application.
Syndication Drive
However Facebook and Apple adopt different syndication formats (Apple News format is based on JOSN, while Instant Articles markup is more or less tagged with HTML in an RSS feed), they are all based on the same principle: trick the content management system into generating the necessary syndication formats, and then Facebook and Apple will work non-stop to extract, parse, and make them beautiful. , followed by quick custom rendering.experience-oriented
While Facebook Instant Articles and Apple News both focus on performance, they also focus on making articles look more modern. Both platforms have components that allow us to create sleek and fluid interfaces, which generally results in a customizable, hand-crafted reading experience.In contrast, AMP has another focus:
Web page-based experience
AMP files are designed The result can be rendered on browsers and WebViews.
Atomized Files
Although AMP files need to be validated, parsed, and partially rendered during the AMP runtime, they are cached on your server or CDN completely independent files, rather than some source data sets that may be converted into articles at some point and rendered on the APP.Performance-oriented
Compared with interaction mode or aesthetic elements, AMP pays more attention to performance. That’s not to say that AMP files are all tinny (when they use the right styling, they can be as engaging as Facebook Instant Articles or Apple News), but rather than offering fancy visuals like crazy little things, They are more concerned about how to render articles faster.
Google now uses AMP HTML for its search products. Although there are still some limitations to the technology, Google said that 30 publishers and technology companies have participated in the project, including the BBC, The New York Times, and Buzzfeed.
Although these initial technical parameters may be changed, AMP’s technical specifications have been published on Github for websites to try.
Google is currently working hard to improve its mobile reading experience. Although this technology still has some shortcomings, mobile terminals account for 37% of traffic, which will attract more and more websites to join the AMP program. Currently Baidu, Sogou, and Yahoo have officially supported AMP!
The above is the detailed content of Why did Google launch the AMP program?. For more information, please follow other related articles on the PHP Chinese website!

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

H5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version
God-level code editing software (SublimeText3)