Guidelines for Creating Optimized Landing Pages

Typography Settings for Desktop:

• Headline Size: 48px-72px

• Subheadline Size: 28px-48px

• Paragraph Size: 18px-28px

Typography Settings for Mobile:

• Timer Size: 23px

• Headline Size: 30px-36px

• Subheadline Size: 23px-26px

• Paragraph Size: 18px-20px

Image Key Considerations:

• Use collages to reduce the DOM size (number of elements).

• Convert images to WebP format for better quality and smaller file sizes.

  • WebP Converter Tool

• Compress images using TinyPNG.

  • TinyPNG Tool

Additional Pointers for Long Pages:

1. Element Usage:

   • Avoid using the <BR> tag for line breaks.

   • Use multiple paragraph elements instead of breaking a single element. This improves maintainability and performance.

   • Screenshot Reference
     
     

2. Color Management:

   • Minimize the use of multiple colors applied via the inline editor. This has a minor impact but should be avoided for consistency and performance.

3.  Elements Optimization:

   • Avoid adding rows inside rows or sections within sections, as this increases the DOM size and can negatively impact page performance. Limit the number of child elements within a single row or column to keep the structure clean and efficient.
     

   • For sections like images or testimonials, split the rows into 2-3 smaller sections to enhance performance.
   • A detailed video will be recorded for further clarification.

Summary Checklist:

• Typography sizes adhere to the above settings for both desktop and mobile.

• Reduce DOM size by combining elements where possible.

• Optimize images using WebP and TinyPNG.

• Use paragraph elements instead of <BR> tags for cleaner code.

• Avoid excessive inline color changes.

• Split dense sections into smaller rows/columns for better performance.

By following these guidelines, the landing page will maintain high performance and provide a smooth user experience.