თქვენი ვებ – გვერდის ძირითადი სასიცოცხლო და გამოცდილების სიგნალების გაუმჯობესება Semalt– თან

შინაარსის ცხრილი

  1. შესავალი
  2. რა არის ძირითადი ვებგვერდები?
  3. რა არის გვერდითი გამოცდილების სიგნალები?
  4. როგორ გავაუმჯობესოთ თქვენი ვებ – გვერდის ძირითადი სასიცოცხლო და გვერდითი გამოცდილების სიგნალები
    1. HTTP ქეშირება
    2. მინიმუმამდე შემცირება ბრაუზერის Reflow
    3. HTML დოკუმენტების ფაილის ზომის შემცირება
    4. სურათების შეკუმშვა
  5. დასკვნა

შესავალი

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

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

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

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

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

პოსტი ასახავს თუ როგორ უნდა გაუმჯობესდეს ვებ – გვერდის ძირითადი სასიცოცხლო და გვერდის გამოცდილების სიგნალები.

2. რა არის Core Web Vital?

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

ეს ფაქტორები შედგება სამგვერდიანი ურთიერთქმედების გაზომვებისგან; ისინი არიან:

  1. უდიდესი შინაარსობრივი გვერდი (LIP): ეს განისაზღვრება, თუ რამდენ ხანს სჭირდება გვერდს ჩატვირთვა რეალური მომხმარებლის თვალსაზრისით. დროა დააწკაპუნოთ ბმულზე მოწყობილობის ეკრანზე არსებული შინაარსის უმეტესი ნაწილის დანახვაზე (კომპიუტერი ან მობილური).
  2. პირველი შეყვანის შეფერხება (FID): იგი განისაზღვრება, როგორც მომხმარებლების ვებ – გვერდზე ურთიერთქმედების დრო. ქვემოთ მოცემულია ზოგიერთი ურთიერთქმედების მაგალითები:
    • არჩევანის არჩევა ზედა ან ძირითადი მენიუდან
    • დააჭირეთ საიტის სანავიგაციო მენიუს ბმულს
    • მომხმარებლის/დამთვალიერებლის ელ.ფოსტის მისამართის შეყვანა კომენტარის ველში
  3. კუმულაციური განლაგების ცვლა (CLS): ასე სტაბილურია გვერდი, როგორც იტვირთება. სხვა სიტყვებით რომ ვთქვათ, ეს არის ვიზუალური სტაბილურობა. ეს ასევე ნიშნავს, თუ ვებგვერდზე არსებული ელემენტები გადაადგილდება გვერდის დატვირთვისას, მაშინ ამ ვებ-გვერდს აქვს მაღალი CLS, რაც ცუდად შეიძლება ჩაითვალოს.

3. რა არის გვერდითი გამოცდილების სიგნალები?

გვერდის გამოცდილების სიგნალები ზომავს, თუ როგორ ხედავენ და მსჯელობენ მომხმარებლები ვებსაიტთან ინტერაქციის გამოცდილებას მისი შინაარსობრივი მნიშვნელობის მიღმა. იგი მოიცავს Core Web Vital– ებს, გაზომვის სისტემას, რომელიც ზომავს მომხმარებლის იდეალურ გამოცდილებას ვებ – გვერდის ჩატვირთვის, მოვლენების და ვიზუალური სტაბილურობისთვის.

ის ასევე შეიცავს რამდენიმე არსებულ საძიებო სიგნალს, როგორიცაა მობილური ინტერნეტის გარემო, უსაფრთხო დათვალიერება, ინტერსტიციული სახელმძღვანელო მითითებები და HTTPS.

4. როგორ გავაუმჯობესოთ თქვენი ვებ – გვერდის ძირითადი სასიცოცხლო და გვერდითი გამოცდილების სიგნალები

ვებ – გვერდის გამოცდილება დამოკიდებულია რამდენიმე ფაქტორზე, როგორიცაა:
  1. შინაარსი კონკრეტულ ვებ გვერდზე
  2. ბრაუზერი
  3. მნახველის/მომხმარებლის გეოგრაფიული მდებარეობა
  4. ვებგვერდის გამტარობა და ა.შ.

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

აქ მოცემულია ვებ – გვერდის ძირითადი სასიცოცხლო მნიშვნელობისა და გვერდის გამოცდილების სიგნალების გაუმჯობესების სხვა გზები. გარდა ამისა, ვებდიზაინებისა და SEO სააგენტოს დაქირავება მოსწონს Semalt დაგეხმარებათ გააუმჯობესოთ ქვემოთ ჩამოთვლილი ფაქტორები.

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

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

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

    რესურსის მოქმედების კიდევ ერთი გზაა Max-Age. მაქსიმალური ასაკი ანალოგიურად მუშაობს, რადგან სათაურის ვადა იწურება, მხოლოდ ის განსაზღვრავს, თუ რამდენი ხანი იქნება რესურსი ჩამოტვირთვის შემდეგ, კონკრეტული თარიღის ნაცვლად.

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

    იმისათვის, რომ დამთვალიერებლებს უსაფრთხოდ დაათვალიერონ, ბლოგერმა უნდა დარწმუნდეს, რომ ვებგვერდს აქვს SSL- ს განახლებული სერთიფიკატი და მიგრირება მოახდინოს თქვენი URL- ებისა და გვერდის რესურსების HTTPS- ზე.

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

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

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

    ყველაზე ხშირად გამოყენებული ტექნიკა დაჯგუფებულია ექვს კატეგორიად, რომლებიც მოიცავს
    გვერდის დატვირთვის ოპტიმიზაციის სხვადასხვა ასპექტები:
    1. ბრაუზერის ყველაზე ეფექტური ჩვენება: ბრაუზერის განლაგების გვერდი.
    2. ყველაზე ეფექტური ქეშირება: ერთი აპლიკაციის მონაცემების და ლოგიკის მთლიანად ქსელისგან დაცვა.
    3. მობილური მოწყობილობებისთვის ოპტიმალური გამოყენება: საიტის მოწესრიგება მობილური ქსელების და მობილური მოწყობილობების მახასიათებლებისთვის.
    4. მრგვალი მოგზაურობის რაოდენობის შემცირება: სერიული მოთხოვნების საპასუხო ბრუნვის რაოდენობის შემცირება.
    5. ოვერჰედის მოთხოვნის შემცირება: ატვირთვის ზომის შემცირება.

  3. HTML დოკუმენტების ფაილის ზომის შემცირება: ვებსაიტის ვებ – გვერდის გამოცდილების გაუმჯობესების აშკარა ტექნიკაა HTML დოკუმენტების ფაილის ზომის შემცირება. ამის გაკეთების უამრავი გზა არსებობს; ეს მოიცავს ხისტ კომპრესიას, აკუპუნქტურის მსგავს ID- ს და კლასის სახელის ცვლილებებს.

    HTML, როდესაც ის მოცემულია MIME ტიპის ტექსტით/HTML - საშუალებას აძლევს პროგრამისტებს გამოტოვონ ზოგიერთი თეგები.
    ავიღოთ, მაგალითად, თუ პროგრამისტს აქვს ელემენტების სია მონიშნული, როგორც <Pp> სიის ელემენტი </ Pp>, ამ პროგრამისტს შეუძლია დაწეროს <Pp> სიის ერთეული. ან აბზაცის ნაცვლად, რომელსაც იგი ჩვეულებრივად ახურავს </ q>, მას შეეძლო უბრალოდ გამოიყენოს <q> ჩემი აბზაცი.

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

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

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

5. დასკვნა

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

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

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