Како да убрзате Вордпрес сајт за Google PageSpeed Insights

Покретање теста брзине сајта путем 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.

Гоогле-ПагеСпеед-Инсигхтс-слика-1

Постоје фактори на које администратор може утицати директно и урадити све да задовољи критеријуме овог сервиса, али постоје и фактори као што је одзив сервера и његове могућности где се не може директно и једноставно утицати, а који захтевају можда чак и промену хостинг провајдера и укључивање додатних сервиса као што је CDN.

Често није могуће добити максималну оцену  и не треба се превише оптерећивати око тога. За почетак је битно одредити проблеме, а онда постепено приступити решењу. Није редак случај да је претеривање са оптимизацијом угрозило неке друге аспекте веб-сајта и тиме умањило употребљивости.

Вордпрес на тесту Google PageSpeed Insights-а

Из програмерске тачке гледишта, Вордпрес није најбрже решење. Проблем често може да лежи у додацима, темама и свему ономе што долази од трећих лица са кодом који није увек чист и оптимизован за основну подлогу ове платформе.

Да бисмо видели шта Вордпрес може да уради по овом питању, урадили смо један тест сајт који се налази на локацији http://brzina.iz.rs и на нашем дељеном хостингу, оптимизовали смо платформу и скрипте и постигли скоро максималне резултате.

Гоогле-ПагеСпеед-Инсигхтс-слика-2

Овај тест и оптимизација извршени су са темом Twenty Fifteen у издању 1.4. Ова тема долази са Вордпресом и оно што је добро код ње је да су је направили људи који су написали и Вордпрес па нећемо узимати чистоћу кода саме теме као питање за оптимизацију сајта.

Цео тест и оптимизацију записали смо у виду упутства које и ви сами можете искористити за побољшање брзине свог сајта и то без неког посебног предзнања.

Оптимизација сајта за PageSpeed Insights

Сајт смо већ направили и треба извршити тестирање на Google PageSpeed Insights-у. Ту имамо три кључна детаља:

  1. Поље у које уносимо линк веб-сајта којег тестирамо
  2. Брзину – тренутна процена
  3. Сугестије уз помоћ којих се може решити оптимизација сајта

Гоогле-ПагеСпеед-Инсигхтс-слика-3

Уношењем адресе веб-сајта у поље 1 и кликом на дугме Анализирај покрећемо тестирање које ће кроз 5-10 секунди приказати оцену брзине сајта (2) и предлоге за оптимизацију и побољшање резултата. У нашем примеру добили смо сугестије да урадимо следеће:

  • да омогућимо компресију на веб-сајту
  • да елиминишемо JavaScript и CSS који блокирају приказ у садржају изнад прелома
  • да смањимо време одговора сервера
  • да подесимо кеширање прегледача
  • да умањимо CSS
  • да умањимо JavaScript
  • да оптимизујемо слике
  • и да умањмо HTML

Кренућемо од најједноставније оптимизације која се обавља инсталацијом додатака за оптимизацију на Вордпрес.

1. Оптимизација слика на Вордпресу

Како-убрзати-сајт-за-ПагеСпеед-Инсигхтс-слика-4

Google PageSpeed Insights сугестира да се оптимизацијом слика могу постићи бољи резултати

Оптимизација слика, односно, побољшавање њиховог прегледа на интернету може се постићи и без драстичног губитка квалитета уз помоћ EWWW Image Optimizer додатка из званичне архиве Вордпрес додатака.

ЕWWW Имаге Оптимизер

Након инсталације укључите додатак који се након тога може пронаћи у Подешавања/EWWW Image Optimizer

ЕWWW Имаге Оптимизер слика 1

Отворите додатак и покрените Bulk Optimize опцију. Све слике које су подигнуте на ваш сајт биће оптимизоване аутоматски без губитка на квалитету. Све будуће слике које будете подизали на сајт биће такође аутоматски оптимизоване.

ЕWWW Имаге Оптимизер слика 2

Процес оптимизације можете пратити у живом прегледу, а у зависности од количине слика процес може и потрајати:

ЕWWW Имаге Оптимизер слика 3

Google PageSpeed Insights потврђује да смо успешно обавили посао:

ЕWWW Имаге Оптимизер резултат

2. Умањење JavaScript-а, CSS-а и HTML-а

Аутоптимизе слика ЈаваСцрипт и ЦСС 1

Следеће три сугестије из наслова решићемо инсталацијом још једног додатка који можете пронаћи под називом Autoptimize. Инсталирајте додатак, укључите га и отворите опције. Овај додатак након укључивања можете пронаћи у Подешавања/Autoptimize.

Означите следећа поља:

  • Оптимизуј HTML код и Задржи HTML коментаре (у неким случајевима ово је потребно)
  • Оптимизација JavaScript Кода
  • Оптимизуј CSS Код

Аутоптимизе слика 2

Кликните на дугме Сачувај измене и испразни кеш. Ево и потврде о успешно обављеном послу:

Аутоптимизе слика резултати

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:

Оптимизација WордПресс сајта за Гоогле ПагеСпеед Инсигхтс

Као што је већ поменуто на почетку, не треба бити превише темељно и опседнуто приступити бројкама. Довољно је урадити што је више оптимизација, тестирати резултате и пазити да они буду на оптималном нивоу и у складу са осталим факторима који утичу на популарност. Међу те факторе спадају и визуелна привлачност и употребљивост, функционалност и квалитет садржаја.

ПРИЈАВИТЕ СЕ ЗА НАЈНОВИЈЕ ТЕКСТОВЕ СА НАШЕГ БЛОГА!

Tags: , , , , ,

Нема коментара.

Пошаљи коментар