არსებობს მრავალი გზა ვებ მუშაობის გასაუმჯობესებლად. ერთ-ერთი მათგანია კონტენტის წინასწარ ჩატვირთვა, რომელიც მოგვიანებით იქნება საჭირო. CSS წინასწარი დამუშავება, სრული გვერდის წინასწარ რენდერი ან დომენის სახელის გარჩევადობა. ჩვენ ყველაფერს ვაკეთებთ წინასწარ, შემდეგ კი მყისიერად ვაჩვენებთ შედეგს! Კარგად ჟღერს.

რაც კიდევ უფრო მაგარია, ის არის ძალიან მარტივად განხორციელებული. ხუთი ტეგი მიეცით ბრაუზერს ბრძანება წინასწარი მოქმედებების შესასრულებლად:

<link rel="prefetch" href="/ka/style.css" as="style" />
<link rel="preload" href="/ka/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

მოკლედ ავუხსნათ რას აკეთებენ და როდის გამოიყენონ ისინი.

Გადახტომა: preload · წინასწარ მიღება · წინასწარ დაკავშირება · dns-prefetch · წინასწარი რენდერი

preload

<link rel= "preload"> ეუბნება ბრაუზერს, რომ რაც შეიძლება მალე ჩატვირთოს და ქეში შეინახოს რესურსი (როგორიცაა სკრიპტი ან სტილის ცხრილი). ეს სასარგებლოა, როდესაც რესურსი საჭიროა გვერდის ჩატვირთვიდან რამდენიმე წამში - და გსურთ პროცესის დაჩქარება.

ბრაუზერი არაფერს აკეთებს რესურსთან დატვირთვის შემდეგ. სკრიპტები არ არის შესრულებული, სტილის ფურცლები არ გამოიყენება. რესურსი უბრალოდ ქეშირებულია და დაუყოვნებლივ ხელმისაწვდომი ხდება მოთხოვნისთანავე.

სინტაქსი

<link rel="preload" href="/ka/style.css" as="style" />

href მიუთითებს რესურსზე, რომლის ჩამოტვირთვაც გსურთ.

as შეიძლება იყოს ყველაფერი, რისი ჩამოტვირთვაც შესაძლებელია ბრაუზერში:

• style სტილის ფურცლებისთვის,
• script სკრიპტებისთვის,
• font შრიფტებისთვის,
• fetch გამოყენებით დატვირთული რესურსებისთვის fetch() ან XMLHttpRequest,
• იხილეთ სრული სია MDN-ზე.

მნიშვნელოვანია ატრიბუტის მითითება as – ეს ეხმარება ბრაუზერს სწორად მოახდინოს პრიორიტეტები და დანიშნოს ჩამოტვირთვები.

როდის უნდა გამოიყენოთ

გამოიყენეთ წინასწარ ჩატვირთვა, როდესაც რესურსი დაგჭირდებათ უახლოეს მომავალში. Მაგალითად:

• არასტანდარტული შრიფტები გარე ფაილიდან:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  სტანდარტულად comic-sans.woff2 დაიწყებს ჩატვირთვას მხოლოდ ჩამოტვირთვისა და გარჩევის შემდეგ index.css. ამდენი ხნის ლოდინის თავიდან ასაცილებლად, შეგიძლიათ ჩამოტვირთოთ შრიფტი ადრე გამოყენებით <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• თუ თქვენ გამოყოფთ თქვენს სტილებს მიდგომის მიხედვით კრიტიკული CSS ორ ნაწილად, კრიტიკულად (დაუყოვნებლივ გადმოსაცემად) და არაკრიტიკულად:

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  ამ მიდგომით, არაკრიტიკული სტილის ჩატვირთვა დაიწყება მხოლოდ JavaScript-ის გაშვებისას, რაც შეიძლება მოხდეს რენდერიდან რამდენიმე წამში. ლოდინის ნაცვლად გამოიყენეთ JS <link rel= "preload">ჩამოტვირთვის ადრე დასაწყებად:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ka/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

ზედმეტად ნუ გამოიყენებთ წინასწარ ჩატვირთვას. თუ ყველაფერს ზედიზედ ჩატვირთავთ, საიტი ჯადოსნურად არ დააჩქარებს, პირიქით, ხელს უშლის ბრაუზერს მუშაობის სწორად დაგეგმვას.

არ უნდა აგვერიოს წინასწარ ამოღებაში. Არ გამოიყენოთ <link rel= "preload">, თუ არ გჭირდებათ რესურსი გვერდის ჩატვირთვისთანავე. თუ დაგჭირდებათ მოგვიანებით, მაგალითად შემდეგი გვერდისთვის, გამოიყენეთ <link rel= "prefetch">.

დეტალები

ეს არის აუცილებელი ტეგი უნდა შესრულდეს ბრაუზერის მიერ (თუ იგი მხარს უჭერს), განსხვავებით ყველა სხვა ტეგისგან წინასწარ ჩატვირთვასთან დაკავშირებული. ბრაუზერმა უნდა გადმოწეროს მასში მითითებული რესურსი <link rel="preload">. სხვა შემთხვევებში შეიძლება იგნორირება გაუკეთოს წინასწარ ჩატვირთვას, მაგალითად, თუ ის მუშაობს ნელი კავშირით.

პრიორიტეტები. ბრაუზერები, როგორც წესი, ანიჭებენ სხვადასხვა პრიორიტეტს სხვადასხვა რესურსებს (სტილები, სკრიპტები, შრიფტები და ა.შ.), რათა პირველ რიგში ჩატვირთოს ყველაზე მნიშვნელოვანი რესურსები. ამ შემთხვევაში ბრაუზერი განსაზღვრავს პრიორიტეტს ატრიბუტის მიხედვით as. Chrome ბრაუზერისთვის შეგიძლიათ ნახოთ სრული პრიორიტეტების ცხრილი.

წინასწარ მიღება

<link rel= "prefetch"> სთხოვს ბრაუზერს ჩამოტვირთოს და ჩაშალოს რესურსი (როგორიცაა სკრიპტი ან სტილის ფურცელი) ფონზე. ჩატვირთვა ხდება დაბალი პრიორიტეტით, ამიტომ არ ერევა უფრო მნიშვნელოვან რესურსებში. ეს სასარგებლოა, თუ რესურსი გჭირდებათ შემდეგ გვერდზე და გსურთ მისი წინასწარ ქეშირება.

აქაც ბრაუზერი არაფერს აკეთებს რესურსთან დატვირთვის შემდეგ. სკრიპტები არ არის შესრულებული, სტილის ფურცლები არ გამოიყენება. რესურსი უბრალოდ ქეშირებულია და დაუყოვნებლივ ხელმისაწვდომი ხდება მოთხოვნისთანავე.

სინტაქსი

<link rel="prefetch" href="/ka/style.css" as="style" />

href მიუთითებს რესურსზე, რომლის ჩამოტვირთვაც გსურთ.

as შეიძლება იყოს ყველაფერი, რისი ჩამოტვირთვაც შესაძლებელია ბრაუზერში:

• style სტილის ფურცლებისთვის,
• script სკრიპტებისთვის,
• font შრიფტებისთვის,
• fetch გამოყენებით დატვირთული რესურსებისთვის fetch() ან XMLHttpRequest,
• იხილეთ სრული სია MDN-ზე.

მნიშვნელოვანია ატრიბუტის მითითება as - ეს ეხმარება ბრაუზერს სწორად განსაზღვროს პრიორიტეტები და დანიშნოს ჩამოტვირთვები.

როდის უნდა გამოიყენოთ

სხვა გვერდებიდან რესურსების ჩატვირთვა, თუ თქვენ გჭირდებათ რესურსი სხვა გვერდიდან და გსურთ მისი წინასწარ ჩატვირთვა, რათა დააჩქაროთ ამ გვერდის რენდერი. Მაგალითად:

• თქვენ გაქვთ ონლაინ მაღაზია და მომხმარებლების 40% ტოვებს მთავარ გვერდს პროდუქტის გვერდზე. გამოყენება <link rel= "prefetch">, იტვირთება CSS და JS ფაილები პროდუქტის გვერდების გამოსატანად.
• თქვენ გაქვთ ერთი გვერდიანი აპლიკაცია და სხვადასხვა გვერდი იტვირთება სხვადასხვა პაკეტს. როდესაც მომხმარებელი ეწვევა გვერდს, შესაძლებელია წინასწარ ჩაიტვირთოს პაკეტები ყველა იმ გვერდისთვის, რომელსაც იგი უკავშირებს.

სავარაუდოა, რომ ეს ტეგი შეიძლება უსაფრთხოდ იქნას გამოყენებული ნებისმიერ დონეზე.. ბრაუზერები, როგორც წესი, წინასწარ აწყობენ ყველაზე დაბალი პრიორიტეტით, ასე რომ ეს არავის აწუხებს. უბრალოდ გაითვალისწინეთ, რომ ის მოიხმარს მომხმარებლის ტრაფიკს, რაც შეიძლება ფული დაჯდეს.

არა გადაუდებელი მოთხოვნისთვის. Არ გამოიყენოთ <link rel= "prefetch">, როცა რესურსი საჭიროა რამდენიმე წამში. ამ შემთხვევაში გამოიყენეთ <link rel= "preload">.

დეტალები

არჩევითი ტეგი. ბრაუზერს არ მოეთხოვება ამ ინსტრუქციის შესრულება; მან შეიძლება უგულებელყოს ის, მაგალითად, ნელი კავშირის დროს.

პრიორიტეტი Chrome-ში. Chrome-ში <link rel= "prefetch"> ჩვეულებრივ შესრულებულია მინიმალური პრიორიტეტით (იხ სრული პრიორიტეტების ცხრილი), ანუ დანარჩენი ყველაფრის ჩატვირთვის შემდეგ.

წინასწარ დაკავშირება

<link rel= "preconnect"> სთხოვს ბრაუზერს წინასწარ დაუკავშირდეს დომენს, როდესაც გსურთ დააჩქაროთ კავშირის დაყენება მომავალში.

ბრაუზერმა უნდა დაამყაროს კავშირი, თუ ის მოიძიებს რაიმე რესურსს ახალი მესამე მხარის დომენიდან. მაგალითად, თუ ის იტვირთება Google Fonts, React fonts CDN-დან ან ითხოვს JSON პასუხს API სერვერისგან.

ახალი კავშირის დამყარებას ჩვეულებრივ რამდენიმე ასეული მილიწამი სჭირდება. ეს კეთდება ერთხელ, მაგრამ მაინც დრო სჭირდება. თუ წინასწარ დაამყარეთ კავშირი, დაზოგავთ დროს და უფრო სწრაფად ჩამოტვირთავთ რესურსებს ამ დომენიდან.

სინტაქსი

<link rel= "preconnect" href="https://api.my-app.com" />

href მიუთითებს დომენის სახელზე, რომლის IP მისამართის დადგენა გსურთ. შეიძლება მითითებული იყოს პრეფიქსით (https://domain.com) ან მის გარეშე (//domain.com).

როდის უნდა გამოიყენოთ

გამოიყენეთ დომენებისთვის, რომლებიც მალე დაგჭირდებათ ჩამოტვირთეთ მნიშვნელოვანი სტილი, სკრიპტი ან სურათი იქიდან, მაგრამ თქვენ ჯერ არ იცით რესურსის URL. Მაგალითად:

• თქვენი აპლიკაცია განთავსებულია my-app.com და აკეთებს AJAX მოთხოვნას api.my-app.com: თქვენ წინასწარ არ იცით კონკრეტული მოთხოვნები, რადგან ისინი მზადდება დინამიურად JS-დან. აქ საკმაოდ მიზანშეწონილია გამოიყენოთ ტეგი დომენთან წინასწარ დასაკავშირებლად.
• თქვენი აპლიკაცია განთავსებულია my-app.com და იყენებს Google Fonts-ს. ისინი იტვირთება ორ ეტაპად: პირველი, CSS ფაილი იტვირთება დომენიდან fonts.googleapis.com, შემდეგ ეს ფაილი ითხოვს შრიფტებს fonts.gstatic.com. თქვენ არ იცით რომელი კონკრეტული შრიფტის ფაილებიდან არის fonts.gstatic.com თქვენ დაგჭირდებათ CSS ფაილის ჩატვირთვამდე, ასე რომ, ჩვენ შეგვიძლია მხოლოდ წინასწარი დაკავშირება წინასწარ.

გამოიყენეთ ეს ტეგი მესამე მხარის სკრიპტის ან სტილის ოდნავ დასაჩქარებლად წინასწარ დამყარებული კავშირის გამო.

არ გამოიყენოთ ზედმეტად. კავშირის დამყარება და შენარჩუნება ძვირადღირებული ოპერაციაა როგორც კლიენტისთვის, ასევე სერვერისთვის. გამოიყენეთ ეს ტეგი მაქსიმუმ 4-6 დომენისთვის.

დეტალები

არჩევითი ტეგი. ბრაუზერს არ მოეთხოვება ამ ინსტრუქციის დაცვა და შეიძლება იგნორირება გაუკეთოს მას, მაგალითად, თუ ბევრი კავშირი უკვე დამყარებულია ან სხვა შემთხვევაში.

რას მოიცავს კავშირის პროცესი?. თითოეულ საიტთან დასაკავშირებლად, ბრაუზერმა უნდა გააკეთოს შემდეგი:

• DNS გარჩევადობა. იპოვნეთ სერვერის IP მისამართი (216.58.215.78) მითითებული დომენის სახელისთვის (google.com).
• TCP ხელის ჩამორთმევა. გაცვალეთ პაკეტები (კლიენტი → სერვერი → კლიენტი) სერვერთან TCP კავშირის დასაწყებად.
• TLS ხელის ჩამორთმევა (მხოლოდ HTTPS საიტები). პაკეტების გაცვლის ორი რაუნდი (კლიენტი → სერვერი → კლიენტი → სერვერი → კლიენტი) უსაფრთხო TLS სესიის დასაწყებად.

შენიშვნა: HTTP/3 გააუმჯობესებს და დააჩქარებს ხელის ჩამორთმევის მექანიზმს, მაგრამ ჯერ კიდევ შორია.

dns-prefetch

<link rel= "dns-prefetch"> სთხოვს ბრაუზერს შეასრულოს DNS რეზოლუცია დომენისთვის, თუ თქვენ მალე დაუკავშირდებით მას და გსურთ დააჩქაროთ საწყისი კავშირი.

ბრაუზერმა უნდა განსაზღვროს დომენის IP მისამართი, თუ ის მოიძიებს რაიმე რესურსს ახალი მესამე მხარის დომენიდან. მაგალითად, ჩატვირთეთ Google Fonts, React შრიფტები CDN-დან ან JSON პასუხის მოთხოვნა API სერვერიდან.

ყოველი ახალი დომენისთვის, DNS ჩანაწერის გარჩევადობა ჩვეულებრივ იღებს დაახლოებით 20-120 ms. ეს გავლენას ახდენს მხოლოდ მოცემული დომენიდან პირველი რესურსის ჩატვირთვაზე, მაგრამ მაინც იწვევს შეფერხებას. თუ წინასწარ შევასრულებთ DNS რეზოლუციას, დავზოგავთ დროს და დავტვირთავთ რესურსს უფრო სწრაფად.

სინტაქსი

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href მიუთითებს დომენის სახელზე, რომლისთვისაც გსურთ IP მისამართის დაყენება. შეიძლება მითითებული იყოს პრეფიქსით (https://domain.com) ან მის გარეშე (//domain.com).

როდის უნდა გამოიყენოთ

გამოიყენეთ დომენებისთვის, რომლებიც მალე დაგჭირდებათ იქიდან გადმოწეროთ რესურსები, რომელთა შესახებ ბრაუზერმა წინასწარ არ იცის. Მაგალითად:

• თქვენი აპლიკაცია განთავსებულია my-app.com და აკეთებს AJAX მოთხოვნას api.my-app.com: თქვენ წინასწარ არ იცით კონკრეტული მოთხოვნები, რადგან ისინი მზადდება დინამიურად JS-დან. აქ საკმაოდ მიზანშეწონილია გამოიყენოთ ტეგი დომენთან წინასწარ დასაკავშირებლად.
• თქვენი აპლიკაცია განთავსებულია my-app.comდა იყენებს Google Fonts-ს. ისინი იტვირთება ორ ეტაპად: პირველი, CSS ფაილი იტვირთება დომენიდან fonts.googleapis.com, შემდეგ ეს ფაილი ითხოვს შრიფტებს fonts.gstatic.com. თქვენ არ იცით რომელი კონკრეტული შრიფტის ფაილებიდან არის fonts.gstatic.com ის დაგჭირდებათ მანამ, სანამ არ ჩატვირთავთ CSS ფაილს, ასე რომ, წინასწარ შეგვიძლია მხოლოდ წინასწარი კავშირის დამყარება.

გამოიყენეთ ეს ტეგი მესამე მხარის სკრიპტის ან სტილის ოდნავ დასაჩქარებლად წინასწარ დამყარებული კავშირის გამო.

გთხოვთ გაითვალისწინოთ მსგავსი მახასიათებლები <link rel= "dns-prefetch"/> и <link rel= "preconnect">. როგორც წესი, აზრი არ აქვს მათ ერთად გამოყენებას ერთი დომენისთვის: <link rel= "preconnect"> უკვე მოიცავს <link rel= "dns-prefetch"/> და უფრო მეტი. ეს შეიძლება გამართლდეს ორ შემთხვევაში:

• გსურთ ძველი ბრაუზერების მხარდაჭერა?. <link rel= "dns-prefetch" /> მხარდაჭერილი IE10-დან და Safari 5-დან. <link rel= "preconnect"> გარკვეული პერიოდის განმავლობაში იყო მხარდაჭერილი Chrome-სა და Firefox-ში, მაგრამ დაემატა Safari-ს მხოლოდ 11.1 და ჯერ კიდევ არ არის მხარდაჭერილი IE/Edge-ში. თუ გჭირდებათ ამ ბრაუზერების მხარდაჭერა, გამოიყენეთ <link rel= "dns-prefetch" /> როგორც სარეზერვო ვარიანტი <link rel= "preconnect">.
• გსურთ დააჩქაროთ კავშირები 4-6-ზე მეტ დომენთან. მონიშნეთ <link rel= "preconnect"> არ არის რეკომენდებული 4-6 დომენზე მეტი გამოყენება, რადგან კავშირის დამყარება და შენარჩუნება ძვირადღირებული ოპერაციაა. <link rel= "dns-prefetch" /> მოიხმარს ნაკლებ რესურსს, ამიტომ გამოიყენეთ იგი საჭიროების შემთხვევაში.

დეტალები

არჩევითი ტეგი. ბრაუზერს არ მოეთხოვება ამ ინსტრუქციის შესრულება, ასე რომ, მან შეიძლება არ შეასრულოს DNS გარჩევადობა, მაგალითად, თუ ბევრი ასეთი ტეგია გვერდზე ან სხვა შემთხვევაში.

რა არის DNS. ინტერნეტში თითოეულ სერვერს აქვს უნიკალური IP მისამართი, რომელიც ასე გამოიყურება 216.58.215.78. საიტის სახელი ჩვეულებრივ შედის ბრაუზერის მისამართის ზოლში (მაგალითად, google.com), და DNS (დომენის სახელების სისტემა) სერვერები შეესაბამება მას სერვერის IP მისამართს (216.58.215.78).

IP მისამართის დასადგენად, ბრაუზერმა უნდა მოითხოვოს DNS სერვერი. მესამე მხარის ახალ დომენთან დაკავშირებისას სჭირდება 20−120 ms.

DNS არის ქეშირებული, თუმცა არც ისე საიმედოდ. ზოგიერთი OS და ბრაუზერი ქეშირებს DNS შეკითხვებს: ეს დაზოგავს დროს განმეორებით შეკითხვებზე, მაგრამ ქეშირებაზე დაყრდნობა შეუძლებელია. Linux-ზე ის ჩვეულებრივ საერთოდ არ მუშაობს. Chrome-ს აქვს DNS ქეში, მაგრამ ის მუშაობს მხოლოდ ერთი წუთის განმავლობაში. Windows ინახავს DNS პასუხებს ხუთი დღის განმავლობაში.

წინასწარი რენდერი

<link rel= "prerender"> სთხოვს ბრაუზერს ჩამოტვირთოს URL და აჩვენოს იგი უხილავ ჩანართში. როდესაც მომხმარებელი დააჭერს ბმულს, გვერდი დაუყოვნებლივ უნდა იყოს ნაჩვენები. ეს სასარგებლოა, თუ დარწმუნებული ხართ, რომ მომხმარებელი ეწვევა გარკვეულ გვერდს და სურს დააჩქაროს მისი ჩვენება.

მიუხედავად (ან ამის გამო) ამ ტეგის განსაკუთრებული ეფექტურობისა, 2019წ <link rel= "prerender"> ცუდად მხარდაჭერილი მთავარ ბრაუზერებში. იხილეთ მეტი დეტალი. ქვემოთ.

სინტაქსი

<link rel="prerender" href="https://my-app.com/pricing" />

href მიუთითებს URL-ზე, რომლის ფონზე რენდერის დაწყება გსურთ.

როდის უნდა გამოიყენოთ

როცა ნამდვილად დარწმუნებული ხარ, რომ მომხმარებელი გადავა კონკრეტულ გვერდზე. თუ თქვენ გაქვთ "გვირაბი", რომლის მეშვეობითაც A გვერდის ვიზიტორების 70% გადადის B გვერდზე, მაშინ <link rel= "prerender"> A გვერდზე B გვერდის ძალიან სწრაფად ჩვენება დაგეხმარებათ.

არ გამოიყენოთ ზედმეტად. წინასწარი რენდერი ძალიან ძვირია გამტარუნარიანობისა და მეხსიერების თვალსაზრისით. Არ გამოიყენოთ <link rel= "prerender"> ერთზე მეტი გვერდისთვის.

დეტალები

არჩევითი ტეგი. ბრაუზერს არ მოეთხოვება ამ ინსტრუქციის დაცვა და შეიძლება უგულებელყოს იგი, მაგალითად, ნელი კავშირის დროს ან არასაკმარისი თავისუფალი მეხსიერების დროს.

მეხსიერების შესანახად Chrome არ აკეთებს სრულ რენდერირებასხოლო მხოლოდ წინასწარ ჩატვირთეთ NoState. ეს ნიშნავს, რომ Chrome ატვირთავს გვერდს და მის ყველა რესურსს, მაგრამ არ ახდენს JavaScript-ის რენდერირებას ან შესრულებას.

Firefox და Safari საერთოდ არ უჭერს მხარს ამ ტეგს. ეს არ არღვევს სპეციფიკაციას, რადგან ბრაუზერებს არ მოეთხოვებათ ამ ინსტრუქციის დაცვა; მაგრამ მაინც სევდიანი. განხორციელების შეცდომა Firefox შვიდი წელია გახსნილია. არსებობს ინფორმაცია, რომ Safari ასევე არ უჭერს მხარს ამ ტეგს.

რეზიუმე

გამოყენება:

• <link rel= "preload"> - როცა გჭირდება რესურსი რამდენიმე წამში
• <link rel= "prefetch"> - როცა გჭირდებათ რესურსი შემდეგ გვერდზე
• <link rel= "preconnect"> - როცა იცით, რომ მალე დაგჭირდებათ რესურსი, მაგრამ ჯერ არ იცით მისი სრული URL
• <link rel= "dns-prefetch"> - ანალოგიურად, როდესაც იცით, რომ მალე დაგჭირდებათ რესურსი, მაგრამ ჯერ არ იცით მისი სრული URL (ძველი ბრაუზერებისთვის)
• <link rel= "prerender"> — როცა დარწმუნებული ხართ, რომ მომხმარებლები გადავლენ კონკრეტულ გვერდზე და გსურთ დააჩქაროთ მისი ჩვენება

წყარო: www.habr.com