AMP

AMP (Accelerated Mobile Pages) is an open-source framework designed to improve the performance and user experience of web pages on mobile devices. It aims to deliver lightning-fast loading times, optimized rendering, and a streamlined user experience.

When creating a JSX component with correct AMP rules, you need to consider the following guidelines:

  • Create AMP templates: Ensure that the filename includes the word AMP in the following format: ***AMP.jsx

  • Import the necessary AMP components: Begin by importing the required AMP components, such as amp-img, amp-carousel, or amp-form, depending on your specific needs.

  • Use valid AMP HTML: Ensure that the JSX code adheres to the valid AMP HTML structure and syntax. This includes using the correct AMP tags and attributes.

  • Apply AMP-specific attributes: AMP has its own set of attributes for certain elements to enforce performance and security standards.

  • Handle dynamic content: If your JSX component includes dynamic content, such as user-generated data or API responses, make sure to sanitize and validate the content to prevent potential security risks.

  • Ensure AMP validation: After creating the JSX component, it's crucial to validate it against the AMP validator tool. The validator checks for compliance with AMP rules and highlights any errors or warnings that need to be addressed. We recommend using the following tool AMP VALIDATOR

  • Test on AMP-enabled platforms: Finally, test your JSX component on AMP-enabled platforms or within an AMP-compatible environment to verify its functionality and adherence to AMP standards. In Vactory project you can test you pages by adding this query to the ur ?amp=1, for example: https://vactory.lecontenaire.com/en?amp=1

By following these guidelines, you can create JSX components that adhere to the correct AMP rules, ensuring optimal performance and compatibility within the AMP.

Multi-themeRedirections