Покретање теста брзине сајта путем Google PageSpeed Insights-а је један од најбољих начина за утврђивање стања сајта и проналажења решења за проблеме због којих сајт можда не постиже стандардну брзину на коју су крајњи корисници навикли или коју очекују да искусе када укуцају адресу и чекају на учитавање садржаја. Google PageSpeed Insights не само да мери време учитавања и уочава потешкоће, већ јасно указује на детаље које треба оптимизовати како би се опште стање поправило и тиме корисничко искуство подигло на највиши могући ниво.
Ови резултати добијају се на основу представе коју Google има о корисничким искуствима и перформанси које његови сервиси очекују да затекну на једном веб-сајту. У те сервисе спадају Google Analitika, AdSense, AdWords, али и сви фактори који утичу на рангирање и SEO оцену, па то обавезно треба имати у виду уколико желите да имате добар однос са овим претраживачем.
Не оптерећујте се око постизања пуне 100/100 оцене
Максимална оцена коју PageSpeed Insights процењује као најбољу праксу је 100, а стање се приказује као 65/100 (оцена 65 од могућих 100) или 85/100, односно 97/100, све у зависности од опмизације која је предузета на веб-сајту. Максимална оцена приказана је као 100/100.
Постоје фактори на које администратор може утицати директно и урадити све да задовољи критеријуме овог сервиса, али постоје и фактори као што је одзив сервера и његове могућности где се не може директно и једноставно утицати, а који захтевају можда чак и промену хостинг провајдера и укључивање додатних сервиса као што је CDN.
Често није могуће добити максималну оцену и не треба се превише оптерећивати око тога. За почетак је битно одредити проблеме, а онда постепено приступити решењу. Није редак случај да је претеривање са оптимизацијом угрозило неке друге аспекте веб-сајта и тиме умањило употребљивости.
Вордпрес на тесту Google PageSpeed Insights-а
Из програмерске тачке гледишта, Вордпрес није најбрже решење. Проблем често може да лежи у додацима, темама и свему ономе што долази од трећих лица са кодом који није увек чист и оптимизован за основну подлогу ове платформе.
Да бисмо видели шта Вордпрес може да уради по овом питању, урадили смо један тест сајт који се налази на локацији http://brzina.iz.rs и на нашем дељеном хостингу, оптимизовали смо платформу и скрипте и постигли скоро максималне резултате.
Овај тест и оптимизација извршени су са темом Twenty Fifteen у издању 1.4. Ова тема долази са Вордпресом и оно што је добро код ње је да су је направили људи који су написали и Вордпрес па нећемо узимати чистоћу кода саме теме као питање за оптимизацију сајта.
Цео тест и оптимизацију записали смо у виду упутства које и ви сами можете искористити за побољшање брзине свог сајта и то без неког посебног предзнања.
Оптимизација сајта за PageSpeed Insights
Сајт смо већ направили и треба извршити тестирање на Google PageSpeed Insights-у. Ту имамо три кључна детаља:
- Поље у које уносимо линк веб-сајта којег тестирамо
- Брзину – тренутна процена
- Сугестије уз помоћ којих се може решити оптимизација сајта
Уношењем адресе веб-сајта у поље 1 и кликом на дугме Анализирај покрећемо тестирање које ће кроз 5-10 секунди приказати оцену брзине сајта (2) и предлоге за оптимизацију и побољшање резултата. У нашем примеру добили смо сугестије да урадимо следеће:
- да омогућимо компресију на веб-сајту
- да елиминишемо JavaScript и CSS који блокирају приказ у садржају изнад прелома
- да смањимо време одговора сервера
- да подесимо кеширање прегледача
- да умањимо CSS
- да умањимо JavaScript
- да оптимизујемо слике
- и да умањмо HTML
Кренућемо од најједноставније оптимизације која се обавља инсталацијом додатака за оптимизацију на Вордпрес.
1. Оптимизација слика на Вордпресу
Google PageSpeed Insights сугестира да се оптимизацијом слика могу постићи бољи резултати
Оптимизација слика, односно, побољшавање њиховог прегледа на интернету може се постићи и без драстичног губитка квалитета уз помоћ EWWW Image Optimizer додатка из званичне архиве Вордпрес додатака.
Након инсталације укључите додатак који се након тога може пронаћи у Подешавања/EWWW Image Optimizer.
Отворите додатак и покрените Bulk Optimize опцију. Све слике које су подигнуте на ваш сајт биће оптимизоване аутоматски без губитка на квалитету. Све будуће слике које будете подизали на сајт биће такође аутоматски оптимизоване.
Процес оптимизације можете пратити у живом прегледу, а у зависности од количине слика процес може и потрајати:
Google PageSpeed Insights потврђује да смо успешно обавили посао:
2. Умањење JavaScript-а, CSS-а и HTML-а
Следеће три сугестије из наслова решићемо инсталацијом још једног додатка који можете пронаћи под називом Autoptimize. Инсталирајте додатак, укључите га и отворите опције. Овај додатак након укључивања можете пронаћи у Подешавања/Autoptimize.
Означите следећа поља:
- Оптимизуј HTML код и Задржи HTML коментаре (у неким случајевима ово је потребно)
- Оптимизација JavaScript Кода
- Оптимизуј CSS Код
Кликните на дугме Сачувај измене и испразни кеш. Ево и потврде о успешно обављеном послу:
3. Елиминација JavaScript-а и CSS-а у садржају изнад прелома
Конкретно у теми коју смо ми користили за тест проблем изазивају Google фонтови. Искључили смо их уз помоћ додатка којег смо већ инсталирали у претходном кораку – Autoptimize. Отворите га опет и означите опцију Уклоните Google Fonts.
Проблем је решен, али сада треба поправити изглед слова па отворите Уређивач из Изглед/Уређивач изборника алата.
Кликните на Подножје теме (Footer) како бисте га уредили:
Тачно пре </body> ознаке убаците следећи код за Google Fontove:
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic, 700,700italic' rel='stylesheet' type='text/css'>
или за Font Awesome, уколико вам се више допадају:
<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">
Сачувајте подешавања кликом на дугме Ажурирај датотеку.
Фонтови ће сада бити повлачени из Подножја па неће сметати више чак ни Google PageSpeed Insights-у. Ево шта смо урадили до сада:
4. Подешавање кеширања прегледача
Најчешћи проблем у овом делу прави нико други до управо Google-ова скрипта за Аналитику са http://www.google-analytics.com/analytics.js . Проблематично је што је животни век ове скрипте у кешу прегледача само два сата. Гоогле се чак и огласио по овом питању и рекао да неће решити овај “проблем” јер омогућава боље перформансе.
Ако се и код вас јави ова грешка, можете користити скрипту са исправком коју је направио Jesse Luoto. Ова скрипта користи Google Analytics Measurement Protocol REST API . Довољно је поставити следећи код у подножје (Footer) пре ознаке </body> и то ће решити проблем:
<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js"
async=""></script><script>// <![CDATA[
var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here
// ]]></script>Да би скрипта радила потребно је да уместо UA-XXXXXX убаците свој код за праћење који ћете пронаћи на вашем налогу Google Аналитике.
Укључивање кеширања за остале материјале, као што су слике, текст, апликације и иконице можете урадити додавањем следећег кода у .htaccess датотеку:
## Podešavanje keširanna pregledača ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## Podešavanje keširanja pregledača ##
.htaccess датотека налази се у кореном директоријуму ваше Вордпрес инсталације. Пожељно је направити њену резервну копију пре било ког уређивања за случај да нешто крене по лошем плану.
5. Укључивање компресије на Вордпрес сајту
Компресија се може укључити додавањем следећих линија кода у .htaccess датотеку код Apache сервера:
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
# Uklanja greske pregledaca (za zastarele pregledace) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Или додавањем следећег кода у nginx.conf датотеку за Nginx:
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
6. Умањење времена одговора сервера
На крају долазимо до редуковања времена одговора сервера. Уколико користите дељени хостинг и желите да уклоните ову грешку у највећем броју случајева потребно је закупити најбржи сервер и обезбедити добру CDN услугу.
Када је брзина сервера у питању Адриахост излази у сусрет корисницима са понудом Cloud VPS Servera код којих се подаци учитавају са SSD уређаја, где корисник бира број језгара процесора и количине RAM-а, што све заједно има утицај на време које је потребно да сервер испуни захтев. Више о овој услужи прочитајте на следећем линку где можете видети и комплетну понуду: Cloud VPS Сервери.
Прочитајте обавезно и текст на тему CDN услуге која вам чак и уз добар хостинг може додатно увећати перформансе и растеретити примарне ресурсе: Како да убрзате ваш сајт, уштедите bandwidth и шта је то CDN?
CDN – Content Delivery Network или Content Distribution Network..
Ако се одлучите за неки од CDN сервиса искористите погодности које доноси додатак за Вордпрес којег у званичној архиви можете пронаћи под именом CDN Enabler и који омогућава лаку интеграцију ове услуге у Вордпрес.
Које смо резултате ми добили на услузи дељеног хостинга
Сајт постављен за ово тестирање инсталиран је на серверу за услуге дељеног хостинга. Резултат који смо при томе добили на Google PageSpeed Insights-у је варирао од 90/100 до 95/100 што спада у одличне резултате када су у питању мобилни и стони рачунари на којима се сајт прегледа.
На слици испод можете видети вредности пре оптимизације, оцена коју смо добили у том тренутку износила је 70/100:
Након предузетих побољшања на основу сугестија које смо добили од Google PageSpeed Insights-а, наш тест-сајт оцењен је одличном оценом, 95/100:
Као што је већ поменуто на почетку, не треба бити превише темељно и опседнуто приступити бројкама. Довољно је урадити што је више оптимизација, тестирати резултате и пазити да они буду на оптималном нивоу и у складу са осталим факторима који утичу на популарност. Међу те факторе спадају и визуелна привлачност и употребљивост, функционалност и квалитет садржаја.
0 Comments