როგორ შეგვიძლია დავეხმაროთ ბრაუზერს რესურსების ჩატვირთვისთვის მზადებაში?

პირველადი ჩატვირთვის დირექტივების გამოყენება: preconnect, dns-prefetch, preload, prefetch, prerender.

დირექტივა	აღწერა	მაგალითი
preconnect	ქმნის კავშირს (DNS მოძიება, TCP ხელმოწერა, TLS მოლაპარაკება) სხვა წყაროსთან წინასწარ.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	წინასწარ ხსნის დომენის სახელს.	<link rel="dns-prefetch" href="//api.example.com">
preload	მოთხოვნის რესურსი (JS, CSS, ფონტები) წინასწარ მაღალი პრიორიტეტით, რენდერინგს არ აფერხებს.	<link rel="preload" href="/styles.css" as="style">
prefetch	რესურსი, რომელიც სავარაუდოდ საჭირო იქნება მომავალში (მაგალითად, შემდეგ გვერდზე).	<link rel="prefetch" href="/next_page.html">
prerender	მომდევნო გვერდის წინასწარ რენდერება დამალულ ჩანართში.	<link rel="prerender" href="/upcoming_page.html">

<script> ტეგისთვის გამოიყენეთ async ან defer ატრიბუტი ასინქრონული დატვირთვისა და შესრულებისთვის, HTML-ის ანალიზის ბლოკის გარეშე:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

გამოიყენეთ loading="lazy" ატრიბუტი სურათებისთვის და <iframe>-ებისთვის მათი გადადებული დატვირთვისთვის, როდესაც ისინი ხედვის არეალში შედიან:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

ოპტიმიზაცია გაუკეთეთ სურათებს (კომპრესია, თანამედროვე ფორმატების გამოყენება WebP), ფონტებს (პირადობის შემცირება, WOFF/WOFF2 ფორმატები) და სხვა რესურსებს.

მინიფიცირება და შეკუმშვა CSS, JavaScript და HTML.

გამოიყენეთ Service Worker რესურსების კეშირებისთვის და ოფლაინ წვდომის უზრუნველსაყოფად.

გაანაწილეთ დიდი JavaScript კოდი პატარა ნაწილებად (code splitting) და დატვირთეთ საჭიროებისამებრ.

გამოიყენეთ HTTP/2 და HTTP/3 უფრო ეფექტიანი მულტიპლექსირებისა და სათაურების შეკუმშვისთვის.

სეტყვით სწორი კეშირების სათაურები (Cache-Control, Expires) სერვერზე.

გამოიყენეთ <link rel="modulepreload"> JavaScript ES მოდულების წინასწარ დატვირთვისთვის.

<link rel="modulepreload" href="/dist/module.js">