Performanse sajta — Kompletni vodic

Sve o brzini ucitavanja: Core Web Vitals, optimizacija i 6 detaljnih vodicaa

53%
Korisnika napusta sajt posle 3s
7%
Manje konverzija po sekundi kasnjenja
6
Detaljnih vodicaa
9
Performance provera u skeneru

1. Zasto je brzina sajta bitna?

Brzina ucitavanja vaseg sajta direktno utice na tri kljucna aspekta vase online prisutnosti:

  • Konverzije — istrazivanja pokazuju da svaka sekunda kasnjenja u ucitavanju smanjuje konverzije za 7%. Amazon je utvrdio da bi 100ms sporije ucitavanje kostalo 1% prodaje godisnje.
  • SEO rangiranje — Google koristi brzinu sajta kao direktan faktor rangiranja. Od 2021. godine, Core Web Vitals su zvanican deo algoritma pretrage.
  • Korisnicko iskustvo (UX) — 53% mobilnih korisnika napusta sajt koji se ucitava duze od 3 sekunde. Brz sajt znaci zadovoljne posetioce koji se vracaju.
Amazon statistika: 100ms sporije ucitavanje = 1% manje prodaje godisnje. Za Amazon to znaci gubitak od $1.6 milijardi godisnje.

2. Core Web Vitals — kljucne metrike

Google je definisao tri kljucne metrike koje mere korisnicko iskustvo na sajtu:

  • LCP (Largest Contentful Paint) — meri koliko brzo se ucitava najveci vidljivi element na stranici (slika, video, blok teksta). Cilj: ispod 2.5 sekunde.
  • CLS (Cumulative Layout Shift) — meri vizuelnu stabilnost stranice, tj. koliko se elementi pomeraju tokom ucitavanja. Cilj: ispod 0.1. Fiksne dimenzije za slike i oglase resavaju vecinu problema.
  • INP (Interaction to Next Paint) — meri odzivnost stranice na korisnicke interakcije (klikove, tapove, unos teksta). Cilj: ispod 200 milisekundi. Zamenio je stariju metriku FID od marta 2024.
MetrikaDobarTreba poboljsatiLos
LCP< 2.5s2.5s – 4s> 4s
CLS< 0.10.1 – 0.25> 0.25
INP< 200ms200ms – 500ms> 500ms

Ove metrike mozete pratiti u Google Search Console, pod odeljkom "Core Web Vitals".

3. Tehnike optimizacije brzine

Konkretni koraci koji mogu dramaticno ubrzati vas sajt:

  • Kompresija slika — koristite moderne formate poput WebP ili AVIF umesto PNG/JPEG. Alati poput Squoosh ili TinyPNG mogu smanjiti velicinu slika za 60-80% bez vidljivog gubitka kvaliteta.
  • Browser caching — postavite Cache-Control i Expires headere da browser cuva staticke resurse (CSS, JS, slike) lokalno, umesto da ih preuzima pri svakoj poseti.
  • Lazy loading — ucitavajte slike i iframe elemente tek kada korisnik skroluje do njih. Jednostavno dodajte loading="lazy" atribut na img i iframe tagove.
  • CDN (Content Delivery Network) — distribuirajte sadrzaj na servere sirom sveta. Posetilac dobija sadrzaj sa najblizeg servera, sto dramaticno smanjuje latenciju.
  • Minifikacija CSS i JS — uklonite nepotrebne razmake, komentare i nekorisceni kod. Alati poput Terser (JS) i cssnano (CSS) automatizuju ovaj proces.
  • Gzip/Brotli kompresija — omogucite kompresiju na serveru da smanjite velicinu prenosa podataka za 70-90%.

4. Alati za merenje performansi

Koristite ove alate za analizu i pracenje brzine vaseg sajta:

  • Google Lighthouse — ugraden u Chrome DevTools (F12 > Lighthouse tab). Daje sveobuhvatan izvestaj o performansama, pristupacnosti, SEO-u i najboljim praksama sa ocenom od 0 do 100.
  • PageSpeed Insights — Google-ov online alat koji analizira stranicu i daje preporuke. Prikazuje i realne podatke korisnika (CrUX) i laboratorijske testove.
  • WebPageTest — napredniji alat koji omogucava testiranje sa razlicitih lokacija, browsera i brzina konekcije. Pruza detaljan waterfall dijagram ucitavanja.
  • GTmetrix — kombinuje podatke iz razlicitih izvora i prikazuje istoriju performansi tokom vremena.

5. Nasi detaljni vodici

Svaki aspekt performansi smo obradili u posebnom vodicu:

Metrike

Core Web Vitals

LCP, CLS, INP detaljno: kako meriti, optimizovati i pratiti u Search Console.

 Slike

Optimizacija slika

WebP, AVIF, srcset, lazy loading, CDN za slike, Squoosh, width/height za CLS.

 Cache

HTTP Caching

Cache-Control, ETag, CDN cache, Service Worker, cache-busting strategije.

 Kompresija

Gzip i Brotli

HTTP kompresija: Gzip vs Brotli, konfiguracija za Nginx/Apache/Express, benchmarks.

 CDN

Content Delivery Network

Cloudflare, AWS CloudFront, Vercel Edge. Setup, DDoS zastita, cache invalidation.

 Loading

Lazy Loading

Native lazy loading, Intersection Observer, code splitting, fetchpriority atribut.

6. Sta nas skener meri

Nas Web Security Scanner proverava 9 aspekata performansi:

  • TTFB (Time to First Byte) — vreme odgovora servera
  • Velicina stranice i HTML optimizacija
  • Gzip/Brotli kompresija
  • Cache-Control headeri za staticke resurse
  • Broj eksternih resursa
  • Optimizacija slika
  • Lazy loading implementacija
  • Minifikacija CSS/JS
  • HTTP/2 podrska
Besplatno: Skeniranje je brzo, anonimno i ne zahteva registraciju.
Proverite performanse svog sajta →

Website Performance — Complete Guide

Everything about loading speed: Core Web Vitals, optimization and 6 detailed guides

53%
Users leave after 3s
7%
Less conversions per second delay
6
Detailed guides
9
Performance checks

1. Why does website speed matter?

Your website's loading speed directly impacts three key aspects of your online presence:

  • Conversions — research shows that every second of loading delay reduces conversions by 7%. Amazon found that 100ms of additional latency would cost 1% of annual sales.
  • SEO rankings — Google uses page speed as a direct ranking factor. Since 2021, Core Web Vitals have been an official part of the search algorithm.
  • User experience (UX) — 53% of mobile users abandon a site that takes longer than 3 seconds to load. A fast site means satisfied visitors who return.

2. Core Web Vitals — key metrics

Google has defined three key metrics that measure user experience on a website:

  • LCP (Largest Contentful Paint) — measures how quickly the largest visible element loads on the page (image, video, text block). Target: under 2.5 seconds.
  • CLS (Cumulative Layout Shift) — measures visual stability of the page, i.e., how much elements shift during loading. Target: below 0.1. Fixed dimensions for images and ads solve most issues.
  • INP (Interaction to Next Paint) — measures page responsiveness to user interactions (clicks, taps, text input). Target: under 200 milliseconds. Replaced the older FID metric as of March 2024.

You can track these metrics in Google Search Console, under the "Core Web Vitals" section.

3. Speed optimization techniques

Concrete steps that can dramatically speed up your site:

  • Image compression — use modern formats like WebP or AVIF instead of PNG/JPEG. Tools like Squoosh or TinyPNG can reduce image size by 60-80% without visible quality loss.
  • Browser caching — set Cache-Control and Expires headers so the browser stores static resources (CSS, JS, images) locally instead of downloading them on every visit.
  • Lazy loading — load images and iframe elements only when the user scrolls to them. Simply add the loading="lazy" attribute to img and iframe tags.
  • CDN (Content Delivery Network) — distribute content to servers worldwide. Visitors receive content from the nearest server, dramatically reducing latency.
  • CSS and JS minification — remove unnecessary whitespace, comments, and unused code. Tools like Terser (JS) and cssnano (CSS) automate this process.
  • Gzip/Brotli compression — enable server-side compression to reduce data transfer size by 70-90%.

4. Performance measurement tools

Use these tools to analyze and monitor your site's speed:

  • Google Lighthouse — built into Chrome DevTools (F12 > Lighthouse tab). Provides a comprehensive report on performance, accessibility, SEO, and best practices with a score from 0 to 100.
  • PageSpeed Insights — Google's online tool that analyzes a page and provides recommendations. Shows both real user data (CrUX) and lab tests.
  • WebPageTest — an advanced tool that allows testing from different locations, browsers, and connection speeds. Provides detailed loading waterfall diagrams.
  • GTmetrix — combines data from various sources and displays performance history over time.

5. Our detailed guides

Metrics

Core Web Vitals

LCP, CLS, INP in detail: how to measure, optimize and track in Search Console.

 Images

Image Optimization

WebP, AVIF, srcset, lazy loading, image CDN, Squoosh, width/height for CLS.

 Cache

HTTP Caching

Cache-Control, ETag, CDN cache, Service Worker, cache-busting strategies.

 Compression

Gzip & Brotli

HTTP compression: Gzip vs Brotli, Nginx/Apache/Express config, benchmarks.

 CDN

Content Delivery Network

Cloudflare, AWS CloudFront, Vercel Edge. Setup, DDoS protection, cache invalidation.

 Loading

Lazy Loading

Native lazy loading, Intersection Observer, code splitting, fetchpriority.

6. What our scanner measures

Our Web Security Scanner checks 9 performance aspects:

  • TTFB, page size, Gzip/Brotli compression
  • Cache-Control headers, external resources count
  • Image optimization, lazy loading, minification
  • HTTP/2 support
Check your site's performance →