როგორც საიტის მფლობელი, თქვენ იცით, რომ ეს უნდა იყოს სწრაფი. თქვენ უკვე წაიკითხეთ სხვადასხვა სტატიები, თუ როგორ უნდა დააჩქაროს თქვენი საიტი, ალბათ კი უკვე განხორციელდა. შემდეგი ხდება საინტერესო, რამდენად სწრაფად საიტი დატვირთული. აქ მიდიხარ Google Pagespeed insights როგორც ყველაზე პოპულარული ინსტრუმენტი, თქვენ მიიღებთ შეფასებას და Google- ის რეკომენდაციების ჩამონათვალს. და აქ ჩვენი უმრავლესობა დაკარგულია:
- არის SEO- სთვის Pagespeed insights- ის მაჩვენებელი?
- რატომ არის ჩემი საიტის შეფასება მაქსიმალური?
- რას ნიშნავს ეს რეკომენდაციები?
ადრე, თქვენ მოიცავდა ქეშირების ადგილზე და მოსალოდნელია, რომ რეიტინგის pagespeed იქნება თითქმის სრულყოფილი, და ახლა თქვენ ფიქრობთ, რატომ ეს მოდული არ დააფიქსიროს ყველა პრობლემა სიჩქარეზე? იქნებ ეს არ არის ძალიან კარგი? მოკლე პასუხი არის ის:
Google Pagespeed მაჩვენებელი არ აქვს მნიშვნელობა.
დიახ, ეს ასეა ... მაგრამ რატომ არ აქვს მნიშვნელობა?
გვერდის სიჩქარე vs pagespeed insights
სიჩქარე (საიტის ჩამოტვირთვა დრო) მნიშვნელოვანია და არის მნიშვნელოვანი მეტრიკი SEO, და ასევე გავლენას ახდენს მომხმარებლის გამოცდილება. როდესაც GoogleBot ინდექსი საიტი, იგი ვერ ხედავს pagespeed მაჩვენებელი, მაგრამ მხოლოდ იცის სიჩქარე თავად. იცით თუ არა, რომ Google Pagespeed insights არ შეაფასებს სიჩქარე თქვენს საიტზე? დიახ, წაიკითხეთ ისევ:
Google Pagespeed insights არ შეაფასებს საიტის სიჩქარე.
გამარჯობა, ძვირფასო დღიური მკითხველი საიტი! დღეს, პოსტი მიეძღვნება Google Page AITS- ის მშვენიერ ინსტრუმენტს, რომელიც საშუალებას გაძლევთ შეამოწმოთ ნებისმიერი გვერდი შესასწავლად მისი დატვირთვის დაჩქარების შესაძლებლობების შესასწავლად.
ეს არ არის საიდუმლო, რომ საძიებო სისტემებში, განსაკუთრებით Google, ცოტა ხნის წინ სერიოზული ყურადღება ექცევა ამ ასპექტს, ასე რომ სწრაფი საიტები მიიღებს გარკვეულ უპირატესობას რეიტინგში და მაღალ პოზიციებზე ძიების შედეგებში.
Google Page Speed \u200b\u200bInsights არა მხოლოდ აღმოაჩენს და მიუთითებს ყველა იმ მიზეზით, თუ რატომ არ არის სწრაფი საკმარისი, მაგრამ ასევე სთავაზობს კონკრეტული გზების აღმოფხვრა მათ, და ზოგიერთი აღმოჩენილი პრობლემები შეიძლება ადვილად აღმოფხვრილი სამსახურის ძალების ავტომატური რეჟიმში.
რა არის ოპტიმიზაციის ინსტრუმენტები ყველა გამოიყენეთ Google- ზე?
პრინციპში, თითოეული თქვენი პროექტებისთვის, მე საკმარისი დრო მაქვს იმისათვის, რომ ოპტიმიზაცია გვერდები, რომლებიც ხელს უწყობენ მათი სწრაფი ჩამოტვირთვა. ეს ნამდვილად არ მიაღწია ბლოგს მხოლოდ ბლოგზე, რომელიც არსებითად ვიზუალური სახელმძღვანელოს დამწყები ვებმასტერებისთვის, არ არის ჯანსაღი ამბიციების გარეშე და მიზნის მისაღწევად.
მაგრამ იმიტომ, რომ ბუნება მე ვარ პერფექციისტი, ვერ დაუშვებს ინფორმაციის ვებ რესურსს, რომ მასზე საუბარი, ცოდნა, ლაგარდის ზოგიერთ ასპექტში იქნება. აქედან გამომდინარე, გადაწყდა მაქსიმალური ძალისხმევა, რათა ოპტიმიზაცია, მათ შორის გვერდი შიდსის რეკომენდაციები.
აქედან გამომდინარე, ეს დაუყოვნებლივ გამოდის ამ ინსტრუმენტის აღწერას ისე, რომ თქვენ შეგიძლიათ შეაფასოთ მისი ფუნქციონირება და გამოიყენოთ პრაქტიკაში თქვენი ვებ რესურსების სასარგებლოდ.
მანამდე შესაძლებელი იყო ბრაუზერების გაფართოების სახით გამოყენება და ჩამოტვირთვის ბმულები დაესწრო Google- ის სპეციალურ გვერდზე. უფრო მეტიც, იმისათვის, რომ გამოიყენოთ იგი mazile, პირველი აუცილებელი იყო, სადაც Paige შიდსის იმყოფებოდა როგორც მისი გარდა:
ახლა აღარ არის შესაძლებელი Google- ის ბრაუზერების გაფართოების გამოყენება, თუმცა იგივე დანამატები, მაგრამ რამდენიმე სხვა ინტერპრეტაციაში ხელმისაწვდომია ოფიციალური Chrome და Masisle Websites (s). გარდა ამისა, არსებობს საკმაოდ ფუნქციონალური მონიტორი ონლაინ მომსახურება Google ზუსტად იგივე ფუნქციონალური და არანაკლებ შესაძლებლობები. თუ დეველოპერების მონაკვეთში მიდიხარ, თქვენ იხილავთ ბმულს გვერდის სიჩქარის ინსტრუმენტს:
სხვათა შორის, იმავე გვერდზე "Pagespeed ინსტრუმენტები" არსებობს ყველა Google- ის წინადადებები დაჩქარება საიტებზე. ჰგავს "კარგი იმპერიის" დეველოპერებს, რომლებიც სერიოზულად აიღეს მთელი ინტერნეტ სივრცის ოპტიმიზაცია და აჩქარება, რადგან დეველოპერებს თქვენ იპოვით ოპტიმიზაციის ბიბლიოთეკას ( ინტეგრირება Pagespeed ოპტიმიზაციის ბიბლიოთეკა) Საჯარო წყარო.
ღია კოდის ხელმისაწვდომობა პროგრამული უზრუნველყოფა ეს პროექტი მოდულის საფუძველზე მოქმედი " mod_pagespeed", რომელიც დამონტაჟებულია Apache სერვერზე (KOI, სხვათა შორის, აბსოლუტური უმრავლესობა), ნიშნავს, რომ ეს შეიძლება გაუმჯობესდეს ან განახლდეს ვინმეს.
ეს არის, ამ გზით ეს არის საკმაოდ რეალისტური ინტერნეტ საზოგადოების ხარჯზე, რათა შეიქმნას სრულყოფილი აჩქარების ინსტრუმენტი. როგორ გამოიყურება ყველაფერი პრაქტიკაში, დრო გამოჩნდება. ბუნებრივია, იმისათვის, რომ სრული წვლილი შეიტანოს და წარმატების მიღწევა ამ brevement- ში, აუცილებელია საკმაოდ კვალიფიციური პროგრამისტი იყოს.
თუ თქვენ შეხედავთ ზედა სკრინშოტს (ინფორმაცია მწვანე ჩარჩოში), თქვენ იხილავთ ბმულს მზა მოდულის უახლესი ვერსიის დაყენება. ეს შეიძლება იყოს საინტერესო მფლობელებს, რომლებსაც შეუძლიათ თავიანთ სერვერებზე დააყენოთ, იქ არსებული საიტების ავტომატური აჩქარება.
უფრო მეტიც, არსებობს ორი მოდიფიკაციების გვერდი შიდსის მოდული: პირდაპირ apache სერვერები და Bundle Apache + Nginx, სადაც მეორე თამაშობს როლი პროქსი სერვერის:
სხვათა შორის, თანამედროვე პირობებში Apachatic და NGnix- ის წილი ყველაზე მეტად მოითხოვს და გამოიყენება ყველაზე მოწინავე დამხმარე საშუალებებით (მაგალითად, მაგალითად, SpitThost), რადგან ის უზრუნველყოფს რესურსების ეფექტურ გამოყენებას. ასე რომ, თუ თქვენ დაინტერესებული ხართ ამ მეთოდით ავტომატური აჩქარების საიტებზე, შეგიძლიათ დაურთოთ ეს ხელი ან დაძაბება თქვენი hoster.
Google "pagespeed რეკომენდაციას (ბილიკები გაზრდის სიჩქარის გვერდის დატვირთვის საიტი)
ზემოთ, ჩვენ შევხედავთ შესაძლებლობას, ამიტომ საუბარი, გლობალური ზრდა სიჩქარეების სიჩქარე, რომელიც მოითხოვს კონკრეტულ ცოდნას (სავარაუდოა, რომ ეს ინფორმაცია სასარგებლო იქნება სასარგებლო, მინიმუმ მომავალში).
მაგრამ მკითხველის ძირითადი ნაწილისთვის, ეს არის მარტივი ვებმასტერები, უფრო შესაბამისი ვარიანტი ნათელია და აქ არის და ახლა. " მხოლოდ ასეთი პირობები სრულად შეესაბამება pagespeed insights მომსახურება, რომელიც ისაუბრა. გაანალიზების კონკრეტული გვერდი საიტი, შეიტანეთ მისი URL () ამ გვერდზე:
ანალიზის შემდეგ, იხილავთ Google- ის წესებს და როგორც ამასთან დაკავშირებით Მობილური მოწყობილობებიდა PC, რომელიც განსაკუთრებით ღირებულია. ამ მაგალითში, ამ ბლოგის მთავარ გვერდზე, 76 რწმუნებათა სიგელები მობილური ტელეფონებისთვის არის საშუალო შედეგი, რაც მნიშვნელოვნად გაუმჯობესდება, თუ ისარგებლებთ რეკომენდაციებს.
უფრო მეტიც, თითოეული რესურსის ოპტიმიზაციას, რომელიც გვერდს დატვირთვისს, მითითებებს მიეკუთვნება შესაბამის სექციებს (მიღების მიზნით, დააჭირეთ ბმულს "როგორ დაფიქსირება?"), სადაც თქვენ ნახავთ საჭირო ქმედებების აღწერილობას ნაკლოვანებების აღმოსაფხვრელად.
მაგრამ აქ თქვენ უნდა გააკეთოთ მნიშვნელოვანი შენიშვნა. აუცილებელი გააანალიზეთ გვერდები Განსხვავებული ტიპები მთელ საიტზე ჩამოტვირთვის დროს შემცირების მიზნით. მაგალითად, სტანდარტული დღიური Vordpress, ოპტიმიზაციის დონე ამ ასპექტში ძირითადი, სვეტების, სტატიკური გვერდები და ჩანაწერები შეიძლება სრულიად განსხვავებული იყოს.
ზემოთ მოცემული მაგალითი მთავარი გვერდირომელი პოსტი გამოჩნდება, მაგრამ ერთ-ერთი სტატიის გვერდი შიდსით გაცილებით დაბალი რეიტინგია:
ეს მოხდა, რადგან პოსტი, როგორც წესი, ბევრად უფრო მოცულობით და მოიცავს სხვადასხვა სახის რესურსებსა და შინაარსს (სურათები, ვიდეო, სკრიპტები). ამიტომ, უმჯობესია დაიწყოს მათგან ოპტიმიზაციის შემოწმება. სხვათა შორის, ამ თვალსაზრისით, შეფასებისგან მოგერიება გვერდი სიჩქარე უზრუნველყოფს მობილური ტელეფონებისთვისიმის გამო, რომ ამგვარი მოწყობილობების ღირსეული დატვირთვის სიჩქარის მიღწევა ბევრად უფრო მეტად გადაყენებს.
მაგრამ ჩანაწერების სხვადასხვა ჩანაწერებიც კი შეიძლება განსხვავდებოდეს ხარისხით. ეს მოხდება, მათ შორის, რადგან ზოგიერთი მათგანი ასრულებს დამატებით სკრიპტებს, რომლებიც გადმოწერის ჩამოტვირთვისაა. მაგალითად, ერთი ამ ვებ-გვერდის ოპტიმიზაციის დონე ჩემთვის არა მხოლოდ სიურპრიზი, არამედ ნამდვილი შოკი:
ნათელია, რომ 100-დან 62 ქულა არ არის შედეგი, რომელიც თქვენ უნდა იბრძოლონ. და ყველა იმიტომ, რომ ამ და სხვა გვერდებზე ჩანაწერების, მე მაქვს Syntaxhighlighter მოდული სკრიპტი, ინიცირება ლამაზი გაფორმება განათებული კოდები.
საიტზე რამდენიმე ასეთი გაგრძელებაა. თითოეულ შემთხვევაში, აუცილებელია გადაწყვიტოს საკუთარ თავს, რამდენი დანამატი მნიშვნელოვანია თქვენი რესურსისთვის ფუნქციონირების თვალსაზრისით, რომელიც უზრუნველყოფს მას. და ამის გათვალისწინებით აუცილებელია, ან წაშალოთ იგი, ან მიიღოს ზომები ოპტიმიზაციისთვის, რაც ხელს შეუწყობს გვერდის დატვირთვისას.
ზემოთ აღსანიშნავია მსოფლიოში ყველაზე პოპულარული CMS- ში, რომელიც სარგებლობს ვებმასტერების დიდი რაოდენობით. ეს მრავალფუნქციური ძრავა კარგია, მაგრამ ის მუდმივად უნდა გაგრძელდეს სერვერზე დატვირთვის შემცირების თვალსაზრისით და შეამცირონ გვერდი დატვირთვის დრო. აქედან გამომდინარე, WP- ზე მომუშავე ვებ რესურსების მფლობელებმა ეს შენიშვნა უნდა მიიღონ. და ასეთი სერვისის ხელმისაწვდომობა, როგორც აქ, როგორც ეს შეუძლებელია გზაზე.
დარწმუნდით, რომ წაიკითხეთ ყველა ეს სტატია მინიმუმ ნახვის რეჟიმში, ზემოთ ჩამოთვლილ ბმულებზე დაჭერით, თქვენ შეგიძლიათ იპოვოთ ბევრი სასარგებლო თქვენთვის. მომავალში, მე ვაპირებ, რომ დავუბრუნდე ვებ რესურსების დაჩქარებას ერთხელ, და, შესაბამისად, შეგიძლიათ გამოწერა გამოწერა, რათა არ გამოტოვოთ ამ თემაზე ახალი პუბლიკაციების გამომავალი.
დასასრულს, იხილეთ სასარგებლო ვიდეო, საიდანაც გაიგებთ, თუ რატომ არის გვერდი სიჩქარის რჩევები რეკომენდაციური ბუნება და რა მიზეზით არ უნდა დაიცვას ფანატიკურად მათთვის.
მოდული Google Pagespeed საიტი: რა შეიძლება და როგორ გამოვიყენოთ
გადავწყვიტეთ ექსპერიმენტი და დაამატეთ Accelerator Google- დან სამი პროექტამდე. რა მოხდა მასზე - გაირკვეს.
საიტები უნდა ჩაირთოს მყისიერად. ოჰ, არა, საიტებზე არ უნდა ვინმეს? წასვლა Trolleybus და იჯდეს შემდეგ სტუდენტი, რომელიც ზის iPhone. შეხედეთ, არის თუ არა ის მზად არის დაველოდოთ, სანამ ონლაინ მაღაზია დატვირთულია. მოდი ვთქვათ: სამი წამი - და ჩანართი ხურავს. მომდევნო შედეგი არის ძიების შედეგების შემდეგი შედეგი.
სხვათა შორის, პრო ძიება გაცემის. საიტის ჩამოტვირთვა სიჩქარე გავლენას ახდენს საძიებო სისტემებში. Prufs და. "Thoring" საიტები ნაკლებად ეწვია რობოტები, და ეს იმას ნიშნავს, ნაკლებად ხშირად ინდექსირებული. აქედან არის ადგილი ექსტრადიციისა და საჭირო ინფორმაციის მოძიების მიზნით.
მუდმივად ფიქრობთ თუ არა თქვენი გვერდი დატვირთული სმარტფონის შესახებ, ვიდრე PC- ზე. და თუ ასეა, მაშინ ჩვენ სავარაუდოდ შეამცირონ ექსტრადიცია.
- Matt Katts, Google
Google მუშაობდა და გაათავისუფლა მისი ინსტრუმენტი, რათა შეამოწმოთ სიჩქარე - pagespeed. მოძებნა დამუხრუჭების დატვირთვის ელემენტები უბრალოდ წავიდეთ აქ და ერთადერთი ველი, მიუთითეთ მისამართი, რომელიც გსურთ შეამოწმოთ. ერთი წუთით, დეტალური შესრულების ანგარიში მზად იქნება. შედეგი ნაჩვენები იქნება თუთიყუში. იდეალურად, მათი მომსახურების სადგური, მაგრამ ცდილობენ მიაღწიონ! მაშინაც კი, Google თავად არ არის ძალაუფლების ქვეშ: შეამოწმეთ მისი მომსახურება :)
ტესტები ტარდება საიტზე ორივე დესკტოპისა და მობილური ვერსიისთვის. ფოკუსირება ფერადი მასშტაბით: ყვითელი ზონა მიუთითებს იმაზე, რომ არსებობს ელემენტები, რომ ღირს ოპტიმიზაცია, მწვანე იქნება მოხსენება, რომ ყველაფერი კარგად არის. თუ საიტი წითელ ზონაში, სიჩქარე და ოპტიმიზაცია. სხვაგვარად ადრე Abyss: მიუხედავად იმისა, რომ გვერდი დატვირთული, მომხმარებელი უკვე წასვლა სხვა საიტზე :)
თქვენ შეგიძლიათ ოპტიმიზაცია საიტი ორი გზით.
მექანიკური ოპტიმიზაცია
1. Squeeze სურათები Photoshop ან აწარმოებს მეშვეობით ოპტიმიზილი. , მაგალითად
პატარა სურათები წონა, უფრო მეტი boocks უფრო სწრაფად საიტი დატვირთული. ჩვენ გავაკეთებთ შეკუმშვას, მრავალფუნქციურ სურათებს კატა. საკმარისი Previe 640 × 480. ნაკლებად სურათი - საძილე საიტი.
თუნდაც Საწყისი გვერდი Google დეველოპერების გრაფიკა შეიძლება 71% -ით იყოს squeezed.
2. დამაკავშირებელი შრიფტები ადგილზე თავად, და არ გაიყვანოს მათ Google
მინუსი - მიუხედავად იმისა, რომ ბრაუზერმა შრიფტი არ დატვირთული, მომხმარებელი დაინახავს მოსაწყენი არალიზა ან ტაჰომა.
3. გამოიყენეთ ბრაუზერის ქეში მაქსიმუმამდე
როდესაც საიტი ნაწილობრივ შენახულია კლიენტის მიერ - ჩამოტვირთვა უფრო სწრაფად წავა.
4. შეამციროს JavaScript და CSS
სკრიპტები არ არის რედაქტირებული ყოველდღე გათავისუფლების შემდეგ - ეს არ არის აზრი, რომ შეკუმშოს მათ ფრენა. საკმარისი იმისათვის, რომ ოპტიმიზაცია მას შემდეგ, რაც კოდები. JS შაბლონები უკეთესია გაუმკლავდეს სერვერზე, Embed შედეგების HTML და გამოიყენოთ თარგები კლიენტის შემდეგ ჩამოტვირთვის შემდეგ.
5. შემცირება HTML
პრაქტიკაში - არასასურველი ხარვეზების, ჩანართების, ხაზების მოხსნა.
6. წაშალეთ გამოუყენებელი კოდი.
შეიძლება აშენდეს "Chrome" აუდიტი. დააჭირეთ F12 და გადადით აუდიტის ჩანართზე. ქვემოთ არის ერთადერთი პერსპექტივა ღილაკი. ეს ზოგადად იგივეა, რაც გვერდია. მხოლოდ რეალურ დროში.
ავტომატური ოპტიმიზაცია
ნებისმიერი საიტი შედგება დინამიური და სტატიკური ელემენტებისგან. დინამიური ელემენტები - HTML კოდი მიღებული PHP და მონაცემთა ბაზის მოთხოვნები. და დანარჩენი არის სტატიკური. ეს არის სურათები, JavaScript და CSS.
ავტომატურად ოპტიმიზაცია საიტი შეიძლება იყოს ციცაბო მიერ Google - pagespeed insights. ეს მოდული დამონტაჟებულია Nginx სერვერზე და Squeezes რეალურ დროში შემდეგ პარამეტრების. dofig ინფორმაცია , სხვა საკითხებთან ერთად, გრაფიკულ.
Pagespeed insights შეიძლება ანალიზი HTML და ოპტიმიზაცია რესურსების. ნათელი, მოკლე. წყაროს კოდექსში, რესურსები იქნება სხვა გზაზე, არა იმას, თუ რა არის, თუ რა არის მითითებული ფოტოების შესასვლელად დეველოპერი. უნდა ჩაითვალოს. მაგრამ რესურსების ჩვენება არ შეიცვლება. წონა შემცირდება. ასე რომ, ეს გაზრდის გადმოწერის სიჩქარეს გვერდზე და სია გახდება კმაყოფილი :)
თუმცა, pagespeed insights აქვს შეზღუდვები. ეს შესაძლებელია მხოლოდ Nginx- ზე, რომელიც დაიწყო ან ვირტუალური სერვერი. არა, გერმანიაში სადღაც გაქირავებულია, საერთო სერვერი არ შეესაბამება.
მეორე შეზღუდვა დაკავშირებულია მარადიულ ომთან. Pagespeed სურათები მოაქცია format.Webp, რომელიც მხოლოდ ესმის "Chrome" (პოპულარულია საყვარელი Internet Explorer. ეს ეს არ გაივლის). -ში ბოლო ვერსიები ასეთი სურათების ჩვენება ისწავლა და "ოპერას". იმის გამო, რომ ძრავა შეიცვალა.
მაგალითები გამოყენებით pagespeed insights
ჩვენ დამონტაჟდა Pagespeed insights მოდული სამი პროექტი - თქვენი ახალი ნახვა და ორი კლიენტი. მოდული ხედავს, საიდანაც ბრაუზერი მოდის თხოვნით, გამოიყურება, არის თუ არა ეს მომზადებულია ვებ-გვერდის ფორმატში და აძლევს ოპტიმიზებულ სურათს ან რეგულარულ JPEG- ს.
ციმბირში, setup დაახლოებით ნახევარი დღე. რაღაც უნდა გააკეთოს ემპირიულად: შეიცვალა, უყურებდა რა ხდებოდა. ზოგჯერ ზონა იყო მწვანე, და ყვითელი ყვითელი შეეძლო მთლიანად არაპროგნოზირებად.
ახლა ორივე ვერსია მწვანე ზონაშია. ასე რომ, პრობლემა არ იქნება. თუ კავშირი სიჩქარე კარგია, არ ზღვარზე ზოგიერთი :)
-ში Ტექნიკური მხარდაჭერა ჩვენ გადავწყვიტეთ ექსპერიმენტი და დააინსტალირეთ pagespeed insights მოდული მასზე.
Google Pagespeed არის ინსტრუმენტი, რომელიც საშუალებას გაძლევთ შეამოწმოთ სიჩქარის საიტი. ეს საშუალებას გაძლევთ შეაფასოთ სიჩქარის ჩამოტვირთვა სტაციონარული კომპიუტერებისთვის და მობილური მოწყობილობებისთვის და რეკომენდაციები, რომლებიც შეიძლება გამოყენებულ იქნას ოპტიმიზაციისთვის.
საიტის დატვირთვის სიჩქარის ანალიზის შედეგად გამოიყურება:
შეამოწმეთ საიტის სიჩქარე Google Pagespeed Insights და მომსახურების რეკომენდაციები
საიტის დატვირთვის სიჩქარის ანალიზის შემდეგ, შემდეგ რეკომენდაციებს მიიღებთ ყველაზე ხშირად:
სურათების ოპტიმიზაცია
ყველაზე ხშირად შეუსაბამო მომსახურების რეკომენდაცია დაკავშირებულია ოპტიმალური არჩევანი სურათები საიტზე. გრაფიკული შინაარსი ძალიან მძიმეა და რესურსების გვერდებზე ჩამოტვირთვას შეუძლია. ყველაზე ზოგადი რეკომენდაციები შედგება სწორი ფორმატის არჩევისას (ყველაზე ხშირად აზრი გამოიყენებს PNG), ზომა და გამოსახულების ხარისხი. ასე რომ, ძალიან დიდია, ფონზე, როგორც ფონზე, შეიძლება დროულად შეანელებს საიტის დატვირთვის სიჩქარეს. თქვენ ყოველთვის უნდა შეამოწმოთ სურათები და მაქსიმალურად მათი ზომა და ხარისხი (ზომა და გამოსახულების ხარისხი აზრი აქვს კონკრეტული რესურსისთვის მინიმალური მისაღებია).
შეკუმშვის ჩართვა
ვებ სერვერის შეკუმშვა არის მნიშვნელოვანი პარამეტრი, რომელიც უზრუნველყოფს სიჩქარეს. იგი შედის mod_deflate მოდული Apache ან ხარჯზე nginx დირექტივა.
ბერკეტი ბრაუზერის ქეშირება
განსაზღვრავს თუ არა სათაური გადაცემული და მონაცემები მომხმარებლის ბრაუზერში არის ქეშილი. ქეშირება მნიშვნელოვნად შეამცირებს სერვერზე გასაჩივრების რაოდენობას, რომელიც ამცირებს მასზე დატვირთვის და ზრდის სტატიკური მონაცემების დაბრუნების მაჩვენებელს (რაც ყველაზე მეტად ნებისმიერ საიტზე) კლიენტს
აღმოფხვრა Render-Blocking JavaScript და CSS ზემოთ- fold შინაარსი
JavaScript ნაგულისხმევი კოდი შესრულებულია როგორც გვერდი დატვირთული, მსგავსი გზა დამუშავებულია CSS- ის მიერ. ისინი. თუ JS სკრიპტი უკავშირდება დოკუმენტში ორგანოს, მისი გაწევის შეჩერება ყოველ ჯერზე, სანამ სკრიპტი შესრულდება. თქვენ შეგიძლიათ თავიდან ავიცილოთ ეს დაამატოთ JavaScript- ისა და HTML- ის მიერ გვერდის ორგანოს მიერ შესრულებული კოდექსის მიუხედავად.
მაგალითად, JS ასინქრონული რეჟიმში შეიძლება იყოს დაკავშირებული:
Minify CSS
Минификация CSS предполагает удаление лишних пробелом и переносов строк, что позволяет сократить время обработки браузером и увеличить скорость загрузки страницы для клиента
Minify HTML
Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.
Avoid landing page redirects
Определяет используются ли редиректы, любые заданные перадресации с одного домена на другой и с одного сервера на другой означают дополнительные циклы запрос-ответ (запрос к серверу DNS и запрос непосредственно данных), что, естественно, увеличивает время через которое конечный пользователь получит контент сайта. Редиректов по возможности стоит избегать.
Prioritize visible content
В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.
Reduce server response time
Pagespeed Insights выдает предупреждение о медленном ответе сервера в случае если содержимое страницы отдается менее, чем за 200 мс.
Google PageSpeed является очень полезным инструментом при оптимизации работы сайтов, но не следует доверять ему безоговорочно. Информация, выдаваемая Google PageSpeed не всегда корректна и чтобы понять критерии, которые оцениваются лучше обратиться к документации.
В частности, часто будет отображаться предупреждение, что не используется кэширование, хотя фактически
Скорость загрузки сайта является одним из важнейших показателей юзабильности ресурса, и что немаловажно, это один из сотни факторов ранжирования . Действительно, современный пользователь, который кликнул по ссылке, не ждет загрузку страницы более 5 секунд. Поэтому, чем дольше грузится ваш сайт, тем больше вы теряете потенциальных клиентов.
Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта "Monitor Backlinks".
Мотивация
Сайт-образец и так загружается довольно быстро, поэтому в данном случае будут улучшаться результаты до возможного максимума.
Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств - 59/100. Ситуация с версией для стационарных устройств была лучше - 92/100.
Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?
Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.
Стартовые показатели подопытного сайта - 87/100.
В итоге, после применения определенных манипуляций, было получено следующие результаты:
О том, как удалось достичь таких показателей, читайте далее.
Как ускорить загрузку страниц?
Прежде чем приступить к пошаговым действиям согласно инструкции, позвольте отметить, что инструмент PageSpeed является всего лишь ориентиром для веб-мастеров на пути оптимизации ресурса. К тому же инструмент содержит рекомендации по ускорению загрузки страниц вашего сайта, а достижение положительных результатов во многом зависит от настроек сервера.
Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).
Итак, приступим:
Шаг № 1: Оптимизация изображений
Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:
- Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
- Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.
Согласно вышеупомянутым правилам каждое изображение на сайте было загружено, а также вручную сжато и подогнано по размерам. А чтобы не заморачиваться с оптимизацией изображений после их загрузки на сайт, лучше выработайте привычку изначально оптимизировать все новые изображения, загружаемые на сервер. Каждое новое изображение должно быть сжато и подогнано до необходимых параметров.
PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.
Шаг № 2: Минимизация JavaScript, CSS и HTML
В примере, Google предлагает сократить объемы JavaScript и CSS файлов.
Процесс минимизации позволяет сократить объемы файлов, устраняя ненужные пробелы, переносы, строки, символы и комментарии в JavaScript и CSS файлах. Программисты часто оставляют много места и комментарии во время кодирования, что может удвоить объем JavaScript и CSS файлов.
Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.
Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.
Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.
Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.
Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите "Сократить HTML". Чтобы оптимизировать код кликните на "Просмотреть оптимизированное содержание".
Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:
Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.
Вот результаты, полученные после минимизации JavaScript и CSS:
Шаг № 3: Использование кэш браузера
Для многих веб-мастеров этап использования кэширования браузера является самым сложным.
Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).
CDN представляет собой сеть серверов, расположенных в различных местах по всему миру. Они кэшируют статические версии веб-сайтов, такие как изображения, файлы JavaScript и CSS. На серверах CDN хранятся копии содержимого сайта, а при заходе на этот сайт, статическое содержимое загружается с ближайшего сервера.
Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.
Вот визуализация того, как работает CDN:
На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.
После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:
Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.
Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.
Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.
Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.
В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.
А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.
Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.
Шаг № 4: Удаление блокирующих кодов
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать - это ревизия всего кода JavaScript начиная сверху от "header" и "body" до расположенного внизу "footer" на всех страницах сайта.
Если ваш сайт на платформе Wordpress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в
снимите отметку с "Force JavaScript" и установите ее на "Inline all CSS".Шаг № 5: Включение сжатия
Шаг № 6: Оптимизация мобильного формата
Анализ мобильного формата показывает адаптивность мобильной версии сайта под различные типы разрешения, использование подходящих шрифтов, и наличие хорошей навигационной системы.
С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите "Дополнительные инструменты → Инструменты разработчика". На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:
В случае примера, не потребовалось каких-либо радикальных изменений.
Вывод
В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта "Monitor Backlinks". В итоге была оптимизирована не только главная страница, но и все внутренние страницы.
Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:
- Использование CDN.
- Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
- Оптимизация размеров и сжатие изображений.
Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.
Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.
Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях.
Также не забывайте о том, что специалисты UAWEB всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!