Kā vietnes īpašnieks jūs zināt, ka tas būtu ātri. Un jūs jau esat izlasījis dažādus rakstus par to, kā paātrināt jūsu vietni, varbūt pat kaut kas jau ir ieviests. Tālāk tas kļūst interesants, cik ātri vietne ir ielādēta. Šeit jūs dodaties uz Google LapītesPeed ieskatu kā populārāko rīku, jūs saņemsiet novērtējumu un Google ieteikumu sarakstu. Un šeit lielākā daļa no mums ir zaudēti:
- Ir indikators Lappuspeed ieskatu SEO?
- Kāpēc manas vietnes novērtējums nav maksimāls?
- Ko nozīmē visi šie ieteikumi?
Agrāk jūs iekļāvāt kešatmiņu uz vietas un sagaidāms, ka Lappuspeed reitings būs gandrīz ideāls, un tagad jūs domājat, kāpēc šis spraudnis neizlabos visas problēmas ar ātrumu? Varbūt tas nav ļoti labs? Īsa atbilde ir tā, ka:
Google Lappuspeed indikators nav svarīgi.
Jā, tas ir tik ... bet kāpēc tas nav svarīgi?
Lapas ātrums VS Pagespeed ieskats
Ātrums (vietnes lejupielādes laiks) ir svarīgs un ir svarīgs SEO metriks, kā arī ietekmē lietotāju pieredzi. Kad GoogleBot indekss vietnē, viņš neredz lappušu indikatoru, bet tikai zina ātrumu pati. Vai jūs zināt, ka Google Lapītespeed ieskats nenosaka jūsu vietnes ātrumu? Jā, izlasiet to vēlreiz:
Google Lapītespeed ieskats nenosaka vietnes ātrumu.
Sveiki, dārgais emuāra lasītāju vietne! Šodien amats tiks veltīts brīnišķīgajam Google lapu AIDS instrumentam, kas ļauj pārbaudīt jebkuru lapu, lai izpētītu iespējas paātrināt tās iekraušanu ().
Tas nav noslēpums, ka meklētājprogrammas, jo īpaši Google, nesen pievērš nopietnu uzmanību šim aspektam, tāpēc ātrās tīmekļa vietnes saņem zināmu priekšrocību rangu un augstākajās pozīcijās meklēšanas rezultātos.
Google lapu ātruma ieskats ne tikai atklāj un norāda visus iemeslus, kādēļ lapa nav pietiekami ielādēta pietiekami ātri, bet arī piedāvā īpašus veidus, kā tos novērst, un dažas no atklātajām problēmām var viegli novērst ar pakalpojumu spēkiem automātiskajā režīmā.
Kādi ir optimizācijas rīki, kas tiek izmantoti Google?
Principā par katru no jūsu projektiem es maksāju pietiekami daudz laika, lai optimizētu lapas, kas veicina to ātru lejupielādi. Tas tiešām nesasniedza blogu tikai pirms emuāra vietnes, kas būtībā ir vizuālā rokasgrāmata iesācēju tīmekļa pārziņiem, kuriem nav veselīgu ambīciju un iekasē, lai sasniegtu mērķi.
Bet, jo pēc dabas es esmu perfekcionists, nevarēja ļaut informācijai web resurss nēsāt, lai runātu, zināšanas par masu, būtu kādā aspektā starp laggards. Tādēļ tika nolemts veikt maksimālus centienus, lai to optimizētu, tostarp lapas ieteikumus.
Tāpēc tas nekavējoties pārvēršas par šī rīka aprakstu, lai jūs varētu novērtēt tās funkcionalitāti un piemērot praksē jūsu tīmekļa resursu labā.
Iepriekš bija iespējams izmantot pārlūkprogrammu paplašinājumu veidā un lejupielādēt saites, kas piedalījās Google īpašā lapā. Turklāt, lai to piemērotu Mazile, vispirms bija nepieciešams, ja Paige AIDS bija klāt kā papildinājums:
Tagad vairs nav iespējams izmantot paplašinājumus pārlūkprogrammām no Google, lai gan tie paši spraudņi, bet vairākās citās interpretācijas ir pieejamas oficiālās Chrome un Masisle tīmekļa vietnēs (-ās). Turklāt ir diezgan funkcionālais monitors tiešsaistes pakalpojums Google ar tieši tādām pašām funkcionālām un ne mazāk iespējām. Ja dodaties uz sadaļu Izstrādātāji, jūs redzēsiet saiti uz lapas ātruma rīku:
Starp citu, tajā pašā lapā "Lapaspeed rīki" Ir visi Google priekšlikumi paātrināšanas vietām. Izskatās kā "labas impērijas" attīstītāji nopietni uzsākuši visu interneta telpas optimizāciju un paātrinājumu, jo izstrādātājiem atradīsiet saiti uz optimizācijas bibliotēku ( Integrēt lappušu optimizācijas bibliotēku) Atvērtais avots.
Atvērtā koda pieejamība programmatūra Šis projekts darbojas, pamatojoties uz moduli " mod_pagepeed", Kas ir uzstādīts uz Apache servera (Koi, starp citu, lielākā daļa), nozīmē, ka to var uzlabot vai atjaunināt ikvienu.
Tas ir, šādā veidā tas ir diezgan reāli uz rēķina interneta kopienas, lai izveidotu tuvu perfektu paātrinājuma rīks. Kā tas viss izskatās praksē, laiks parādīsies. Protams, lai veiktu pilnīgu ieguldījumu un panāktu panākumus šajā sakarā, ir nepieciešams būt diezgan kvalificēts programmētājs.
Ja jūs apskatīt augšējo ekrānuzņēmumu (informācija tiek ieslēgta ar zaļo kadru), jūs redzēsiet saiti, lai instalētu jaunāko versiju gatavo moduļa tur. Tas var būt interesanti īpašniekiem, kuri var instalēt to uz saviem serveriem, nodrošinot automātisku paātrinājumu vietnes, kas atrodas tur.
Turklāt ir divas izmaiņas lapas AIDS modulis: tieši apache serveri Un par paketi Apache + Nginx, kur otrais spēlē proxy servera lomu:
Starp citu, Apachatic un NGNIX īpatsvars mūsdienu apstākļos ir visvairāk pieprasījums, un to izmanto lielākā daļa progresīvākie hosters (tostarp, piemēram, spritthost), jo tas nodrošina efektīvu resursu izmantošanu. Tātad, ja jūs interesē šī vietņu automātiskās paātrinājuma metode, jūs varat pievienot šai rokai vai saspringt savu darbnīcu.
Google lapupeed iesaka (ceļi, lai palielinātu ātrumu lapas ielādes vietu)
Iepriekš, mēs apskatījām iespēju, lai runātu, pasaules lejupielādes ātruma palielināšanos, kas prasa īpašas zināšanas (tas ir iespējams, ka šī informācija būs noderīga kādam noderīgai, vismaz nākotnē).
Bet par galveno daļu lasītāju, tas ir, vienkārši tīmekļa pārziņiem, kas ir svarīgāka iespēja ir skaidra un pieejama šeit un tagad. " Tikai šādi apstākļi pilnībā atbilst Lappušu ieskatu pakalpojumam, kas tiks runāts. Lai analizētu konkrētu vietnes lapu, ievadiet tās URL () šajā lapā:
Pēc analīzes jūs redzēsiet Google noteikumus un kā saistībā ar mobilās ierīcesun datoru, kas ir īpaši vērtīgs. Šajā piemērā šīs emuāra galvenajā lapā 76 akreditācijas dati no 100 mobilajiem tālruņiem ir vidējais rezultāts, ko var ievērojami uzlabot, ja jūs izmantojat ieteikumus.
Turklāt, lai optimizētu katru resursu, kas palēnina lapas slodzi, atsauces tiek dotas attiecīgajām sadaļām (saņemšanas nolūkā, noklikšķiniet uz saites "Kā noteikt?"), kur atradīsiet aprakstus par nepieciešamajām darbībām, lai novērstu trūkumus.
Bet šeit jums ir nepieciešams, lai veiktu svarīgu piezīmi. Nepieciešams analizējiet lapas dažādi veidi Lai sasniegtu visu vietnes lejupielādes laiku kopumā. Piemēram, standarta blogam Vordpress, optimizācijas līmenis šajā aspektā galvenajiem, kolonnām, statiskajām lapām un ierakstiem var būt pilnīgi atšķirīgs.
Iepriekš es pieņēmu piemēru mājaslapieteKurā tiek parādīti ziņojumi, bet viens no rakstiem lapu AIDS sniedza daudz zemāku reitingu:
Tas notika, jo amati parasti ir daudz vairāk apjomīgāki un ietver daudz dažādu veidu resursus un saturu (attēlus, video, skriptus). Tāpēc labāk ir sākt pārbaudīt optimizāciju no tiem. Starp citu, no šī viedokļa atvairīt no vērtējuma, ka Lapas ātrums nodrošina mobilajiem tālruņiemTā kā pienācīgas slodzes ātruma sasniegšanai šādās ierīcēs ir daudz vairāk televīziju.
Bet pat dažādi ieraksti par ierakstiem var atšķirties. Tas notiek, tostarp tāpēc, ka daži no tiem veic papildu skriptus, kas palēnina lejupielādi. Piemēram, viens no šiem Weblons optimizācijas līmenis man ne tikai pārsteigums, bet īsts šoks:
Ir skaidrs, ka 62 punkti no 100 iespējami nav rezultāts, kas jums ir jācenšas. Un viss, jo šajā un citās lapās ierakstu, man ir sintakshighlighter spraudnis skripts, uzsākot skaista apdare Apgaismoti kodi.
Vietnē var būt vairāki šādi paplašinājumi. Katrā gadījumā ir nepieciešams atrisināt sev, cik daudz spraudnis ir svarīgs jūsu resursam no viedokļa par funkcionalitāti, ko tā nodrošina. Un atkarībā no tā, tas ir nepieciešams vai nu dzēst to, vai veikt pasākumus, lai optimizētu, kas palīdzēs paātrināt lapas slodzi.
Iepriekš minētais ir īpaši patiess populārākajā CMS pasaulē, kas bauda milzīgo tīmekļa pārziņu skaitu. Šis daudzfunkcionāls dzinējs ir labs, bet tas ir pastāvīgi atkļūdot ziņā, lai samazinātu slodzi uz servera un samazinātu lapas iekraušanas laiku. Tādēļ tīmekļa resursu īpašniekiem, kas strādā pie WP, būtu jāņem vērā šī piezīme. Šāda pakalpojuma pieejamība kā lapu palīglīdzekļi šeit, kā tas nav iespējams.
Noteikti izlasiet visus šos rakstus vismaz skatīšanās režīmā, noklikšķinot uz iepriekš minētajām saitēm, jūs varat atrast daudz noderīgu sev. Nākotnē es plānoju atgriezties pie tīmekļa resursu paātrinājuma problēmas vairāk nekā vienu reizi, un tāpēc jūs varat izsniegt abonementu, lai nepalaistu garām svaigu publikāciju izlaidi par šo tēmu.
Visbeidzot, skatiet noderīgo video, no kura jūs uzzināsiet, kāpēc lapu ātruma padomi ir ieteikuma raksturs un kāda iemesla dēļ nevajadzētu sekot vimetriem.
Modulis Google LappusePeed vietnei: ko var un kā izmantot
Mēs nolēmām eksperimentēt un pievienot paātrinātāju no Google līdz trim projektiem. Kas notika no tā - uzziniet.
Vietnēm ir jābūt uzreiz. Ak, nē, vietnes nevienam nevajadzētu? Iet uz trolejbusu un sēdiet pie studenta, kurš sēž ar iPhone. Paskatieties, vai viņš ir gatavs gaidīt, kamēr nav ielādēts kāds interneta veikals. Tikai teiksim: trīs sekundes - un cilne aizveras. Nākamais rezultāts ir šāds rezultāts no meklēšanas rezultātiem.
Starp citu, pro meklēšanas emisija. Vietnes lejupielādes ātrums ietekmē rangu meklētājprogrammās. PRUFS un. "Thoring" vietnes ir mazāk ticamas, ko apmeklē roboti, un tas nozīmē retāk indeksētas. No tā ir vieta izdošanas un ērtības atrast nepieciešamo informāciju.
Pastāvīgi domāt par to, vai jūsu lapa tiks ielādēta lēnāka viedtālrunī nekā datorā. Un, ja tā, tad mēs, visticamāk, mēs to pazemināt izdošanu.
- Matt Kattts, Google
Google strādāja un atbrīvoja savu rīku, lai pārbaudītu ātrumu - Lapaspeed. Atrast bremzēšanas ielādes elementus tikai iet šeit Un vienīgajā laukā norādiet adresi, kuru vēlaties pārbaudīt. Par vienu minūti, detalizēts veiktspējas pārskats būs gatavs. Rezultāts tiks parādīts papagaiļiem. Ideālā gadījumā viņu degvielas uzpildes stacija, bet mēģiniet sasniegt! Pat Google pats nav saskaņā ar varu: pārbaudiet savus pakalpojumus :)
Testi tiek veikti gan darbvirsmas un vietnes mobilā versija. Koncentrējieties labāk krāsu skalā: dzeltenā zona norāda, ka ir elementi, ka ir vērts optimizēt, zaļo ziņos, ka viss ir OK. Ja vietne sarkanajā zonā skrūvējiet ātrumu un optimizējiet. Pretējā gadījumā pirms bezdibenis: kamēr lapa ir ielādēta, lietotājs jau dosies uz citu vietni :)
Jūs varat optimizēt vietni divos veidos.
Manuāla optimizācija
1. Izspiediet Photoshop attēlus vai palaist cauri Optimizilla. , piemēram,
Jo mazāks attēlus sver, jo vairāk kapacijas ir ātrāk, vietne ir ielādēta. Mēs veicam kompresijas, daudzparādītāju attēlus slēpjas zem kaķa. Pietiekami previe 640 × 480. Mazāk attēla - guļamvieta.
Pat uz sākuma lapa Google izstrādātāju grafiku var saspiest par 71%.
2. savieno fontus no pašas vietas, un nav velciet tos ar Google
Mīnus - kamēr pārlūks nav ielādējis fontu, lietotājs redzēs garlaicīgo Arial vai Tahoma.
3. Izmantojiet pārlūkprogrammas kešatmiņu uz maksimālo
Kad vietne ir daļēji saglabāts klients - lejupielāde iet daudz ātrāk.
4. Samazināt JavaScript un CSS
Skripti netiek rediģēti katru dienu pēc izlaišanas - nav jēgas saspiest tos lidojumā. Pietiekami, lai optimizētu vienu reizi pēc kodiem. JS veidnes ir labāk rīkoties serverī, iegult rezultātus HTML un pēc lejupielādes izmantojiet klienta veidnes.
5. Samaziniet HTML
Praksē - nevajadzīgu nepilnību, cilņu, līniju noņemšana.
6. Dzēst neizmantoto kodu.
Var iebūvēt "Chrome" revīzijā. Noklikšķiniet uz F12 un dodieties uz cilni Revīzijas. Zemāk ir vienīgā palaišanas poga. Tas parasti ir tāds pats kā Lapaspeed. Tikai reālā laikā.
Automātiska optimizācija
Jebkura vietne sastāv no dinamiskiem un statiskiem elementiem. Dinamiskie elementi - HTML kods, kas iegūts no PHP un datu bāzes pieprasījumiem. Un pārējais ir statisks. Tie ir attēli, JavaScript un CSS.
Automātiski optimizējiet vietni var būt strauja Google - Lapaspeed ieskats. Šis modulis ir instalēts NGINX serverī un pēc iestatījumiem izspiež reālā laikā. dofig info , cita starpā, grafiku.
Lapaspeed ieskats var analizēt HTML un optimizēt resursus. Skaidrs, īsāks. Avota kodā resursi būs citā ceļā, nevis ar to, kas ir iestatīts, lai izspiestu fotoattēlu attīstītājam. Jāņem vērā. Bet resursu displejs nemainīsies. Svars samazināsies. Tātad, tas palielinās lapas lejupielādes ātrumu un apmeklētāji kļūs apmierināti :)
Tomēr Lappuspeed ieskatiem ir ierobežojumi. To var ievietot tikai Nginx, uzsākta vai virtuālais serveris. Nē, iznomāt kaut kur Vācijā, koplietojamais serveris nebūs piemērots.
Otrais ierobežojums ir saistīts ar mūžīgo kara pārlūkprogrammu. Lapaspeed attēli tiek pārvērsti formatēt.Webp, kas saprot tikai "Chrome" (tautas mīļotā Internet Explorer. 6 Šī lieta netiks iet). Iebildums jaunākās versijas Šādu attēlu displejs ir iemācījies un "Opera". Jo dzinējs ir mainījies.
Piemēri, izmantojot Lappuspeed ieskatu
Mēs uzstādījām lapaspeed ieskatu moduli trīs projektos - savā jaunajā tīmekļa vietnē un divos klientos. Modulis redz, no kura pārlūkprogramma nāk pieprasījums, izskatās, vai tas ir apmācīts parādīt WebP formātu un dod optimizētu attēlu vai regulāru JPEG.
Sibīrijā iestatīšana aizņēma apmēram pusi dienas. Kaut kas bija jādara empīriski: mainīts, noskatījās, kas notiek. Dažreiz zona bija zaļa, un lidot dzeltenā, varēja pilnīgi neparedzami.
Tagad abas versijas ir zaļajā zonā. Tātad ātrumā nebūs problēmu. Ja savienojuma ātrums ir labs, nav malas daži :)
Ietvaros tehniskā palīdzība Mēs nolēmām eksperimentēt un instalēt LapuPeed ieskatu moduli par to.
Google Pagespeed ir rīks, kas ļauj pārbaudīt vietnes ātrumu. Tas ļauj novērtēt ātruma lejupielādi stacionāriem datoriem un mobilajām ierīcēm un izsniegt ieteikumus, kurus var izmantot, lai optimizētu.
Vietnes ielādes ātruma analīzes rezultāts izskatās šādi:
Pārbaudiet vietnes ātrumu no Google LapītesPeed ieskatiem un pakalpojumu ieteikumiem
Pēc vietnes iekraušanas ātruma analīzes visbiežāk var iegūt šādus ieteikumus:
Optimizēt attēlus
Visbiežāk sastopamā pakalpojuma ieteikums ir saistīts ar optimālā izvēle Attēli vietnei. Grafiskais saturs ir ļoti smags un var ievērojami palēnināt resursu lapu lejupielādi. Visbiežāk ieteikumi veido pareizā formāta izvēle (visbiežāk ir lietderīgi izmantot PNG), izmēru un attēla kvalitāti. Tik pārāk liels, fons, ko izmanto kā fonu, var reizēm palēnināt vietnes iekraušanas ātrumu. Jums vienmēr ir nepieciešams, lai pārbaudītu attēlus un maksimāli palielinātu to lielumu un kvalitāti (izmēram un attēla kvalitātei ir jēga noteikt minimālu pieņemamu konkrētam resursam).
Iespējot saspiešanu
Web servera saspiešana ir svarīgs parametrs, kas nodrošina ātrumu. To iekļauj mod_deflate modulis Apache vai uz NGINX direktīvas rēķina.
Sviras pārlūkprogrammas kešatmiņa
Nosaka, vai nosaukums ir nosūtīts, un dati lietotāja pārlūkprogrammā ir kešatmiņā. Kešatmiņā var ievērojami samazināt servera pārsūdzību skaitu, kas samazina to slodzi un palielina statisko datu atgriešanas ātrumu (kas ir visvairāk jebkurā vietā) klientam)
Novērst render-bloķēšanas JavaScript un CSS iepriekš-The-Fold saturu
JavaScript noklusējuma kods tiek izpildīts kā lapa ir ielādēta, līdzīgs veids tiek apstrādāts CSS. Tiem. Ja JS skripts ir savienots dokumenta korpusā, tā atveidošana tiek pārtraukta katru reizi, līdz skripts ir izpildīts. To var izvairīties, pievienojot pievienojot JavaScript un HTML, lapas ķermenis tiks sniegts neatkarīgi no izpildāmā koda.
Piemēram, JS asinhronā režīmā var pieslēgt šādā veidā:
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 всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!