Saidi omanikuna teate, et see peaks olema kiire. Ja te olete juba lugenud erinevaid artikleid, kuidas oma saidi kiirendada, võib-olla isegi midagi on juba rakendatud. Järgmine see muutub huvitavaks, kui kiiresti sait on laetud. Siin lähete Google'i pakendile Insights kõige populaarsem vahend, saate hinnangu ja nimekirja soovitustest Google. Ja siin enamik meist on kadunud:
- Kas SEO-i pagelduste ülevaate näitaja?
- Miks on minu saidi hindamine maksimaalne?
- Mida kõik need soovitused tähendavad?
Varem lisasite kohapeal vahemälu ja eeldati, et lehekülgede reiting on peaaegu täiuslik ja nüüd arvate, miks see plugin ei lahendanud kõiki probleeme kiirustel? Võib-olla ei ole see väga hea? Lühike vastus on see, et:
Google'i pakendi indikaator ei ole oluline.
Jah, see on nii ... aga miks see pole oluline?
Lehekülg kiirus vs PIGSPEED Insights
Kiirus (saidi allalaadimise aeg) on \u200b\u200boluline ja on oluline meetrika SEO-s ja mõjutab ka kasutaja kogemust. Kui Googlebot indeksi sait, ta ei näe lehekülgedepiltide indikaatorit, kuid teab ainult kiirust ise. Kas sa tead, et Google'i pakste arusaamad ei mõõda saidi kiirust? Jah, lugege seda uuesti:
Google'i pagete arusaamad ei mõõda saidi kiirust.
Tere, Lugupeetud blogi lugejate sait! Tänapäeval pühendatakse postitus Google'i lehe AIDSi suurepärasele instrumendile, mis võimaldab teil testida mis tahes lehekülge, et uurida selle laadimise kiirendamise võimalusi ().
See ei ole saladus, et otsingumootorid, eriti Google, hiljuti pöörab selle aspekti tõsiselt tähelepanu, nii kiiresti veebisaidid saavad teatud eeliseks otsingutulemustes järjesta ja kõrgemaid positsioone.
Google Page Speed \u200b\u200bInsights mitte ainult tuvastab ja näitab kõiki põhjusi, miks leht ei ole piisavalt kiiresti piisavalt kiiresti, vaid pakub ka konkreetseid võimalusi nende kõrvaldamiseks ja mõned avastatud probleemid saab teenusejõudude poolt automaatrežiimis kergesti kõrvaldada.
Millised on optimeerimisvahendid Google'is kasutavad?
Põhimõtteliselt maksan iga projekti jaoks piisavalt aega, et optimeerida nende kiire allalaadimise kaasa aitavaid lehti. See tõesti ei jõudnud blogi juurde ainult enne blogi saidi, mis on sisuliselt eelvõtjate veebimeistrite visuaalne käsiraamat, millel puudub terved ambitsioone ja süüdistatakse eesmärgi saavutamiseks.
Aga kuna looduse järgi olen täiuslik, ei saa lubada teabe veebiressursside edastamiseks, nii rääkida, massist teadmisi, oleks mõnes aspektil laggers. Seetõttu otsustati teha maksimaalsed jõupingutused selle optimeerimiseks, sealhulgas lehe AIDSi soovitusi.
Seetõttu pöörab see kohe selle tööriista kirjelduse nii, et saaksite oma funktsionaalsust hinnata ja praktikas kasutada oma veebiressursside kasuks.
Varem oli võimalik kasutada brauserite laienduste kujul ja allalaadimislinke osales Google'i eri lehel. Pealegi, selleks, et seda rakendada maziilis, oli kõigepealt vajalik, kus PAIGE AIDS esineb tema lisaks:
Nüüd ei ole enam võimalik rakendada Google'i brauserite laiendust, kuigi samu pluginad, kuid mitmes muus tõlgenduses on kättesaadavad ametlikel kroomidel ja massle veebisaitidel. Lisaks on üsna funktsionaalne monitor online-teenus Google, millel on täpselt sama funktsionaalne ja mitte vähem võimalusi. Kui lähete arendajate sektsioonile, näete lehekülje kiiruse tööriista linki:
Muide, samal lehel "PatendidPeedi tööriistad" On kõik Google'i ettepanekud kiirendavate saitide kiirendamiseks. Paistab, et "hea impeeriumi" arendajad asusid tõsiselt kogu Interneti-ruumi optimeerimise ja kiirendamise, sest arendajad leiad lingi optimeerimise raamatukogule ( Integreerige lehekülgede optimeerimise raamatukogu) Avatud lähtekoodiga.
Avatud koodi kättesaadavus tarkvara See projekt tegutseb mooduli alusel " mod_pagespeed", Mis on paigaldatud Apache Serverisse (Koi, muide, valdav enamus) tähendab seda, et seda saab parandada või uuendada kedagi.
See tähendab sel viisil internetiühenduse arvelt üsna realistlik, et luua täiusliku kiirendusvahendi lähedale. Kuidas see kõik praktikas näeb, kuvatakse aeg. Loomulikult, et teha täielik panus ja saavutada edu selles leremine, on vaja olla suhteliselt kvalifitseeritud programmeerija.
Kui te vaatate ülemise ekraanipilt (teave on ringis rohelise raamiga), näete linki, et installida valmis mooduli uusima versiooni. See võib olla huvitav omanikele, kes saavad selle oma serveritele installida, pakkudes seal asuvate saitide automaatset kiirendust.
Lisaks on lehe AIDSi mooduli kaks muudatust: otse apache serverid Ja kimbu Apache + Nginx jaoks, kus teine \u200b\u200bmängib volikirja serveri rolli:
Muide, Apachaci ja NGNIX osakaal kaasaegsetes tingimustes on kõige nõudlikum ja mida kasutavad kõige arenenumad hostrid (sh näiteks spritthos), kuna see tagab ressursside tõhusa kasutamise. Niisiis, kui olete huvitatud sellest saitide automaatse kiirendamise meetodist, saate selle käega kinnitada või oma hosteri tüve kinnitada.
Google'i paged soovitab (teede laadimissaidi kiiruse suurendamiseks)
Ülal, vaatasime võimalust, et rääkida, globaalne suurenemine veebisaitide allalaadimise kiirus, mis nõuab konkreetseid teadmisi (tõenäoline, et see teave on kasulik kellelegi kasulikuks, vähemalt tulevikus).
Aga peamise osa lugejate, see tähendab, et lihtne veebimeistrid, rohkem asjakohasem võimalus on selge ja kättesaadav siin ja nüüd. " Just sellised tingimused vastavad täielikult lehekülgede arusaamade teenusele, mida räägitakse. Saidi konkreetse lehekülje analüüsimiseks sisestage sellel lehel oma URL-i ():
Pärast analüüsi näete Google'i reegleid ja nagu seoses mobiilseadmedja arvuti, mis on eriti väärtuslik. Selles näites on selle blogi põhilehekülje jaoks 76 mobiiltelefonide 100 volikirja 100-st keskmist tulemust, mida saab soovituste ärakasutamiseks oluliselt parandada.
Lisaks sellele, et optimeerida iga ressursi, mis aeglustab lehe laadimist, antakse viited asjaomastele sektsioonidele (kviitungi eesmärgil klõpsake nuppu Link "Kuidas parandada?"), kus leiate puuduste kõrvaldamiseks vajalike meetmete kirjeldused.
Aga siin on vaja teha olulise märkuse. Vajalik analüüsige lehekülgi erinevad tüübid Kogu saidi allalaadimise ajal vähenemise saavutamiseks tervikuna. Näiteks standardse blogi Verrdpressi puhul võib selle aspekti optimeerimise tase peamiste, kolonnide, staatiliste lehekülgede ja dokumentide jaoks olla täiesti erinevad.
Eespool ma andsin näite kodulehtMillistel ametikohtadel kuvatakse, kuid üks artiklite leht AIDS andis palju madalama hinnangu:
See juhtus, sest postitused on tavaliselt palju mahukamad ja sisaldavad palju erinevaid ressursse ja sisu (pildid, video, skriptid). Seetõttu on parem alustada nende optimeerimise kontrollimist. Muide, selle vaatenurgast tõrjuda hindamisest Lehekülje kiirus pakub mobiiltelefoneKuna korraliku koormuse kiiruse saavutamine selliste seadmete puhul nõuab palju telereidendeid.
Kuid isegi erinevad dokumendid võivad kvaliteeti erineda. See juhtub, sealhulgas seetõttu, et mõned neist täidavad täiendavaid skripte, mis aeglustavad allalaadimist. Näiteks põhjustas ühe nende veebipäeviku optimeerimise tase mind lihtsalt üllatuseks, vaid tõeline šokk:
On selge, et 100 võimalusest 62 punkti ei ole tulemus, kuhu peate püüdlema. Ja kõik, sest sellel ja mõnel teistel dokumentidel lehekülgedel on mul süntakshighlighter plugin skript, algatamine ilus kaunistus Valgustatud koodid.
Saidil võib olla mitu selliseid laiendusi. Igal juhul on vaja lahendada ise, kui palju plug-in on oluline teie ressursside seisukohast funktsionaalsuse seisukohast. Sõltuvalt sellest on vaja kustutada selle või võtta meetmeid, et optimeerida, mis aitab kiirendada lehe laadimist.
Eriti kehtib eelkõige maailma kõige populaarsem CMS-is, millel on ülekaalukas veebikataloogide arv. See multifunktsionaalne mootor on hea, kuid see tuleb pidevalt siluda, vähendades serveris koormuse vähendamist ja vähendage lehe laadimise aega. Seetõttu peaksid WP-s töötavad veebiressursside omanikud selle teadmiseks võtma. Ja sellise teenuse kättesaadavus lehekülg abivahenditena, sest see on võimatu muide võimatu.
Veenduge, et lugege kindlasti kõiki neid artikleid vähemalt vaatamisrežiimis, klõpsates ülaltoodud linkidele, võite leida endale palju kasulikke. Tulevikus plaanin naasta veebiressursside kiirendamise probleemi rohkem kui üks kord, ja seetõttu saate tellida tellimuse, et mitte jätta selle teema värskete väljaannete väljund.
Kokkuvõttes vt kasulikku videot, millest saate teada, miks lehekülg kiiruse näpunäited on soovituslikud ja millisel põhjusel ei tohiks neile fanaatiliselt jälgida.
Moodul Google'i pakettide jaoks kohapeal: mida saab ja kuidas kasutada
Me otsustasime katsetada ja lisada Google'i kiirendi kolmele projektile. Mis sellest juhtus - teada saada.
Saidid peavad koheselt käivitama. Oh, ei, saidid ei tohiks keegi? Mine trollibussile ja istuge iPhone'iga istub õpilase kõrval. Vaata, kas ta on valmis ootama, kuni mõni veebipood on laaditud. Olgem lihtsalt ütleme: kolm sekundit - ja vahekaart sulgub. Järgmine tulemus on otsingutulemuste tulemus järgmine tulemus.
Muide, pro otsi väljastamine. Saidi allalaadimise kiirus mõjutab otsingumootorite järjekorda. Prufs ja. "Thoring" saite on vähem tõenäoliselt külastanud robotid ja see tähendab harvemini indekseeritud. Sellest on olemas koht vajaliku teabe leidmise väljaandmisse ja mugavuses.
Pidevalt mõtle, kas teie leht laaditakse nutitelefonis aeglasemalt kui arvutis. Ja kui jah, siis oleme kõige tõenäolisemalt selle väljaandmises madalamad.
- Matt Katts, Google
Google töötas ja vabastas oma tööriista kiirusepiirangute kontrollimiseks. Leia pidurdusmehed lihtsalt minna siin Ja ainus valdkonnas täpsustage aadress, mida soovite testida. Üks minut, üksikasjalik tulemuslikkuse aruanne on valmis. Tulemuseks näidatakse papagoid. Ideaalis nende teenindusjaam, kuid proovige saavutada! Isegi Google ise ei ole võimu all: kontrollige oma teenuseid :)
Testid viiakse läbi nii töölaua kui ka mobiilse versiooni jaoks. Keskenduge paremini värvikaalusesse: kollane tsoon näitab, et on elemente, et see on väärt optimeerimine, roheline teatab, et kõik on OK. Kui punane tsooni sait keerake kiirust ja optimeerige. Vastasel juhul enne kuristikku: kui leht on laaditud, läheb kasutaja juba teisele saidile :)
Saidi optimeerida kahel viisil.
Käsitsi optimeerimine
1. Pigistage Photoshopi pilte või joosta Optizila. , nt
Mida väiksemad pildid kaaluvad, seda rohkem perustus on kiiremini sait laaditakse. Teeme kompressiooni, multi-osalised pildid peita kassi all. Piisavalt previe 640 × 480. Vähem pildi - magamiskohta.
Isegi algusleht Google Arendajate graafika saab pigistada 71%.
2. fontide ühendamine saidilt ise ja mitte tõmmata neid Google'iga
Miinus - Kuigi brauser ei ole fondi laadinud, näeb kasutaja igav arial või tahoma.
3. Kasutage maksimaalse brauseri vahemälu
Kui sait on kliendi osaliselt salvestatud - allalaadimine läheb palju kiiremini.
4. Vähendage JavaScripti ja CSS-i
Skripte ei redigeerita iga päev pärast vabastamist - see ei ole mõtet nende lennata tihendada. Piisavalt optimeerida üks kord pärast koode. JS mallid on paremad serveris käsitseda, lisavad tulemused HTML-is ja kasutage pärast allalaadimist kliendi malle.
5. Vähendage HTML-i
Praktikas - tarbetute lünkade, vahekaartide, joonte eemaldamine.
6. Kustutage kasutamata koodi.
Saab ehitada "kroomi" auditi. Klõpsake nuppu F12 ja minge vahekaardi audititele. Allpool on ainus käivitamisnupp. See on üldiselt sama, mis paged. Ainult reaalajas.
Automaatne optimeerimine
Iga sait koosneb dünaamilistest ja staatilistest elementidest. Dünaamilised elemendid - PHP ja andmebaasi taotluste HTML-kood. Ja ülejäänud on staatiline. Need on pildid, JavaScript ja CSS.
Saidi automaatselt optimeerimine võib Google'i pagete arusaamade järsul olla järsk. See moodul on paigaldatud NGGX serverisse ja pigistab reaalajas pärast seadeid. dofigi info Muuhulgas graafika.
PakedPeedi arusaamad võivad analüüsida HTML-i ja optimeerida ressursse. Selge, lühem. Lähtekoodis on ressursid teisel teel, mitte selle poolt, mis on seadistatud foto väljaarendamiseks arendajale. Tuleb kaaluda. Kuid ressursside kuvamine ei muutu. Kaal väheneb. Niisiis suurendab see lehe allalaadimise kiirust ja külastajad rahuldavad rahul :)
Pakenditeadjal on siiski piirangud. Seda saab panna ainult Nginxile, käivitati või virtuaalne server. Ei, üüritud kusagil Saksamaal, jagatud server ei sobi.
Teine piirang on seotud igavese sõjabrauseritega. PakedPeedi pildid konverteeritakse formaadiks.Webp, mis mõistab ainult "Chrome" (populaarselt armastatud Internet Explorer. 6 See asi ei liigu). Sisse viimased versioonid Selliste piltide kuvamine on õppinud ja "ooper". Kuna mootor on muutunud.
Näited lehekülgede kasutamise kohta
Me paigaldasime lehekülgede ülevaatemooduli kolm projekti - oma uue veebilehel ja kahel kliendil. Mooduli näeb, kust brauser on päring, näeb välja, kas see on koolitatud WebP-vormingu kuvamiseks ja annab kas optimeeritud pildi või tavalise JPEG.
Siberies võttis seadistus umbes pool päeva. Midagi pidi tegema empiiriliselt: muutunud, vaatasin, mis toimub. Mõnikord oli tsoon roheline ja lennata kollaselt võib täielikult ettearvamatult.
Nüüd on mõlemad versioonid rohelises tsoonis. Seega ei ole probleeme kiirusega. Kui ühenduse kiirus on hea, ei serva mõned :)
Sees tehniline abi Me otsustasime eksperimenteerida ja paigaldada selle lehekülgipaketite ülevaade mooduli.
Google'i pakett on tööriist, mis võimaldab teil kontrollida saidi kiirust. See võimaldab teil hinnata kiiruse allalaadimist statsionaarsete arvutite ja mobiilseadmete jaoks ning väljastab soovitusi, mida saab kasutada optimeerimiseks.
Saidi laadimiskiiruse analüüsimise tulemus näeb välja selline:
Kontrollige saidi kiirust Google'i pagete arusaamadest ja teenuse soovitustest
Pärast saidi laadimiskiiruse analüüsimist saab kõige sagedamini saada järgmisi soovitusi:
Piltide optimeerimine
Kõige sagedamini esinenud teenuse soovitus on seotud optimaalne valik Pildid saidile. Graafiline sisu on väga raske ja võib oluliselt aeglustada ressursi lehekülgede allalaadimist. Kõige üldisemad soovitused koosnevad õige vormi valimisel (kõige sagedamini on mõistlik kasutada PNG), suurust ja pildikvaliteeti. Nii liiga suur, tausta taustal võib mõnikord aeglustada saidi laadimise kiirust. Te peate alati kontrollima pilte ja suurendage nende suurust ja kvaliteeti (suurus ja pildikvaliteet on mõistlik seada konkreetse ressursi jaoks minimaalse vastuvõetavaks).
Luba kompressioon
Veebiserveri kokkusurumine on oluline parameeter, mis pakub kiirust. See on kaasatud Mod_deflate mooduli Apache või kulul Nginx direktiivi.
Kasutage brauseri vahemälu
Määrab, kas pealkiri edastatakse ja andmed kasutaja brauseris on vahemällu salvestatud. Vahemäch võib oluliselt vähendada serveri kaebuste arvu, mis vähendab selle koormust ja suurendab staatiliste andmete tagastamise kiirust (mis on kõige enam mis tahes saidil) kliendile
Likvideerida Render-blokeerimine JavaScript ja CSS ülalpool - klapp-sisu
JavaScript Vaikimisi koodi täidetakse lehe laadimise teel, sarnaselt töödeldakse CSS-i poolt. Need. Kui JS-i skript on dokumendisoodul ühendatud, katkeb selle renderdamine iga kord, kuni skript on täidetud. Seda saab vältida, lisades, kui JavaScript ja HTML-i ühendamisel on lehekülgede keha, olenemata käivitatava koodi kohaselt.
Näiteks saab asünkroonimisrežiimis JS-i ühendada sellisena:
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 всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!