AWWWARDS recommendations for creating and optimizing websites and services WPO/RWD/SEO/Accessibility

Опубликовано: 17 Ноябрь 2024
на канале: Inverser Pro

191

#website #accessibility #seo #wpo #rwd #semantics #awwwards
More information in the repository:
https://github.com/inverser-pro/check...
0:00 Introduction
1:09 Where can I find the AWWWARDS document?
3:13 Let's start over)
4:44 +1. Optimizing web performance
12:55 Enabling Gzip/Brotli data compression on the server
17:16 Limiting website loading speed in the browser (Fast 3G, Slow 3G, Offline)
24:34 Correct file loading
22:26 Priority for downloading files in the browser
25:10 Critical path for rendering web page content
27:02 How to speed up web page rendering?
30:00 JS, blocking rendering, lazy parsing, asynchronous scripts, lazy loading of scripts
32:06 Minifying CSS and JavaScript files
34:35 Optimization, compression and deferred media files
37:19 Command for formatting images in WEBP, AVIF, different resolutions (imageMagic)
39:42 Retina screens
39:59 Examples of the HTML picture element
42:26 Explanation about Retina, Viewport and screen resolution
43:29 Examples of image placement
44:09 An example of an asynchronous request and dynamic HTML generation using Native JS
55:46 Using CDN and features of its use
58:06 Checking the possibility of file caching for different sites
1:01:34 Explanation of why CDN is needed today
1:02:42 Caching levels
1:04:20 Headers for caching in the browser
1:04:46 View headers in the browser for each file (Expires or Cache-Control)
1:05:52 Reducing the number of DNS queries for your site
1:09:34 Example of JS code that will load scripts and styles asynchronously
1:11:17 Use less JS
1:15:33 Use lazy loading iframes
1:16:20 How not to load the entire YouTube player via iframe
1:19:11 Responsive images
1:19:31 Different ways to add SVG to a website
1:22:58 data URI instead of image file
1:26:55 Check the site for JS errors in the console
1:31:56 The browser is just a program that listens to your commands
1:34:48 Using HTTPS and HTTP/2 (HTTP/3) on your resource
1:37:16 Checking HTTP2, HTTP3 in the developer console
1:38:22 The difference between loading a site via HTTP1, HTTP2, HTTP3
1:40:52 Difference between the same browser on different operating systems
1:43:13 LightHouse and its indicators
1:45:47 Checking site rendering using the Perfomance tool
1:48:10 Check that the sizes of image files (scripts, styles, videos, etc.) are up to date.
1:50:52 +2. RWD/Mobile - website adaptability (responsive design)
1:53:09 Checking the adaptive website design in your browser
1:55:41 Observe the font size, make sure there are no horizons. scroll bars
1:56:49 light/dark site themes
2:00:41 Emulating a light/dark browser theme
2:01:35 Explanations of LightHouse indicator values
2:14:34 Example of a CSS slider (without JS) and why is it needed?
2:21:27 Flexible grid-based layout / flexible user interface
2:27:32 Example of inserting an HTML5 picture element and different image formats
2:30:25 lozad js - library for soft loading of images
2:32:08 Readability and responsive typography
2:37:10 Viewport meta tag and other information associated with the “head”. (viewport)
2:38:21 Retina and pixel density
2:41:09 Correct user input
2:41:26 Appropriate size of tap targets
2:44:25 Checking the site on different devices/platforms
2:46:05 +3. Markup/metadata
2:50:19 Checking the correct spelling of the HTML site on validator.w3.org
2:55:23 The imperfection of the convenience of Google translator
2:57:54 Site navigation using links and hash data from them
2:59:11 Using links where they are really needed
3:00:25 Saving data from a form - an idea
3:04:27 Structured metadata markup and microdata
3:06:07 A bit of aria-micromarking and accessibility input
3:08:22 Images with captions, alt, width, height and src
3:09:22 Semantic relatedness of elements on the page
3:13:33 Favicon.ico different sizes
3:16:57 +4. Semantics / SEO
3:20:40 Correct URL structure
3:25:45 Suitable anchor text
3:26:48 rel="canonical" fight against duplicate links
3:31:11 Semantic HTML5 markup
3:34:34 HTML Sitemap page on the site
3:35:35 XML Sitemap for search robots
3:37:30 Robots.txt
3:37:44 Examples Robots.txt, XML Sitemap
3:39:40 Navigation hints rel="next"...
3:46:23 +5. Animation/Transitions
3:55:41 CSS transition, easing
4:02:56 Animation libraries/frameworks
4:09:17 Showing an error in the browser [while(true)] - memory leaks
4:11:22 CSS/JS animations
4:17:17 Example where you can use animations of transitions between pages
4:19:05 Conclusions on the animation section
4:21:27 +6. Availability
4:24:32 Availability of site management from the keyboard
4:27:51 Tag A for a large area - it’s better NOT to do this
4:33:54 aria-hidden="true"
4:34:38 WAI-WCAG Design principles
4:50:10 High Contrast Mode
4:54:04 Summing up
4:54:08 afterword...
4:54:11 Website optimization from the server side (backend)
4:54:31 Useful to read
5:03:33 See you again