Perfect layout 2023

At the intensive course, we study layout techniques to achieve maximum results in Google's automatic page rating systems. After all, when ranking, Google officially takes into account Core Web Vitals indicators.

Intensive is intended for those who:

• Have studied HTML and CSS at a more or less normal level
• 
  
• < li>Doesn’t understand why Google tools scold his layout
• Wants to master the layout that is correct from Google’s point of view

Intensive topics

Tool Overview

• Introducing Lighthouse
• Introducing Page Speed ​​Insights
• Selecting a Target Level
• The Reality of Getting 100 out of 100
• Impact of indicators on SEO

Basic requirements of Google

• Fast server response
• Adequate size DOM
• Critical and normal styles
• Minimize static sizes
• No content jumping

Key indicators

< ul>

First Contentful Paint

Largest Contentful Paint

First Input Delay

Cumulative Layout Shift

Analysis sites

• Examples of good and crooked projects
• Comments on student cases
• Identification of the most important problems
• Sequence of correction

Working with critical CSS

• Manually splitting styles
• Automating code splitting
• Experimenting with npm critical
• < li>Effective configuration critical

Accelerating link tags

• Preload and Prefetch
• Preconnect
• Asynchronous link stylesheet
• Loading CSS from JS

Images

• Webp, picture and source
• Img and srcset
• Specifying sizes in html
• Output different sizes
• Lazy loading of images

Fonts

• Modern font formats
• Link vs @import
• Required link preload
• Font-display property
• Select standard font

Popular UI problems

• Inputs & labels
• Links and buttons without text
• Frames without title
• Insufficient color contrast

Server side

• Gzip compression
• Static cache time
• Minification of html response
• Https, http2

Optimization of the monster

• Example of a site on Vue + Vuetify
• Starting indicators in the red zone
• Identification of key problems
• Bringing them to the green zone

Necessary evil

• Y.Metrics and G.Analytics
• Third-party site frames
• Unused javascript
• Nginx, Apache and cache time