Ako na rýchly webxKatka

47% používateľov opustí stránku

po 2 sek. načítavania*podľa Kissmetrics

PageSpeed InsightsGTmetrix.comWebpagetest.orgTools.Pingdom.com

Page Load Time / čas načítania stránky

Total Page Size / celková veľkosť stránky

Requests / počet požiadaviek

Waterfall

Mizernú rýchlosť webu nespôsobuje nedostatok...skôr prebytok- Karol Vörös: Rýchly WordPress pre návštevníka aj správcu

http://wordpress.tv/2016/05/12/karol-voros-rychly-wordpress-pre-navstevnika-aj-spravcu/

Šablóna: Free VS prémium

Od čoho závisí rýchlosť stránky?

▪ počet pluginov

▪ šablóna

Aká je realita:

▪ obsah

▪ cache

▪ hosting

Ako môže obsah webu obmedziť rýchlosť?

Obrázky

▪ Neoptimalizované obrázky (viac ako 0,5 MB)

▪ Zbytočne veľké obrázky (nad 1500px)

Externé scripty

▪ Google Maps

▪ Youtube/Vimeo/... video

▪ Google Fonts

▪ Facebook like/share/feed box

▪ Twitter feed

▪ AddThis, Hotjar, ...

ObrázkyTŕň v oku pre mnohé weby

6000x4000px 7,65MB

1200x800px 147kB

Víťaz súťaže Bloger roka 2015 v kat. Móda

Nastavenia - Multimédiá Force Regenerate Thumbnails

Ako optimalizovať obrázky

Automaticky pomocou pluginov

▪ EWWW Image Optimizer

alebo

▪ WP Smush - Image Optimization

Ručne

Zmenšiť veľkosť

▪ aj v trápnom Ms Paint

Optimalizovať:

▪ tinyjpg.com

▪ compressor.io

NIKDY nepoužívať plnú veľkosť

CacheUloží vygenerované stránky do medzipamäte odkiaľ ich zobrazuje návštevníkom

Pluginy pre cache

▪ W3 Total Cache

▪ WP Super Cache

▪ WP Fastest Cache

▪ Autoptimize

▪ Gator Cache

▪ Lite Cache ▪ Flexicache

▪ Cachify

▪ Alpha Cache

▪ Hyper Cache

▪ AIO Cache▪ Next Level Cache

▪ Super Static Cache

▪ Wordfence with Falcon

▪ WP Fast Cache

▪ WP Rocket

WP Super CacheW3 Total Cache

WP Fastest Cache

NO CACHEWP Super

Cache

W3 Total

Cache

WP Fastest

Cache

Eshop s prémium šablónou 4.5s / 4.73s 1.9s / 1.27s 2s / 1.29s 1.6s / 1.31s

Blog s free šablónou 2.7s / 1.69s 1.4s / 949ms - 1.6s / 665ms

Firemný web s prémium šablónou 2.3s / 1.95s 1.6s / 828ms 2.1s / 1.22s 1.5s / 961ms

Web s free šablónou a visual

composerom1.26s / 1.3s 0.87s / 459ms 0.76s / 379ms 0.92s / 426ms

gtmetrix.com / tools.pingdom.com

HostingTo, kde je vaša stránka uložená.

Hľadáme dobrý hosting

▪ PHP 7

▪ Podpora pre WordPress

▪ Lokalita

▪ Výkon

▪ Support

Súboj hostingov

gtmetrix.com / tools.pingdom.com

Bez Cache

S Cache

Elbia WY pre WP Websupport

Web 3.4s / 2.29s 2.7s / 1.52s 3.2s / 1.64s

Eshop - 1.5s / 1.57s 2.2s / 1.39s

Elbia WY pre WP Websupport

Web 4.9s / 2.95s 2.7s / 1.52s 5.2s / 3.94s

Eshop - 1.5s / 1.57s 4.1s / 3.51s

Elbia hostinghttps://gtmetrix.com/reports/www.dognet.sk/hf2FWS2x

WY pre WordPress https://gtmetrix.com/reports/mojefaktury.top/kMV5sCtV

Websupporthttps://gtmetrix.com/reports/www.dognet.4rka.sk/FABkzuhN

Elbia hosting s cachehttps://gtmetrix.com/reports/www.dognet.sk/9zUGr861

Websupport s cachehttps://gtmetrix.com/reports/www.dognet.4rka.sk/tj8VRyNy

Case study č. 1

Riešenie:

Problémy:

▪ 6 x Youtube video

▪ Google maps na hlavnej stránke

▪ Hotjar

▪ 12 rôznych fontov

▪ Neoptimalizované a zbytočne veľké obrázky

Websupport hosting, MariaDB 5.5

Zrýchlenie webu o 5,037 sek

• 6x screenshot videa s preklikom namiesto 6x Youtube iframe

• zníženie počtu fontov• optimalizácia obrázkov• Google Maps presunutý na

stránku kontakt• vypnutie nepoužívaných

pluginov• prečistenie DB (WP Sweep)• lepšie cachovanie

Case study č. 2

Predtým

Potom

Riešenie:

Problémy:

▪ Nenastavené cache

▪ Pofidérny hosting

ipartner.sk, MySQL 5.1

Zrýchlenie webu o 1.9 sek

• WP Fastest Cache• Defer JS

Predtým

Po migrácii na WY hosting pre WordPress (vypnutie cache, zapnutie Autoptimize)

Riešenie:

Problémy:

▪ Pofidérny hosting, na ktorom ani cache nefunguje

ipartner.sk, MySQL 5.1 -> WY pre WP, MariaDB 10.0

Zrýchlenie webu o 2.4 sek

• Migrácia na WY• Autoptimize

Case study č. 3

Riešenie:

Problémy:

▪ Žiadne :D

▪ PS: na stránke bol aktivovaný aj WooCommerce ;)

WY pre WP hosting, MariaDB 10.0

Zrýchlenie webu o 20%

• Lazy Load• Autoptimize

Ako teda na rýchly web?

TO DO list:

▪ Vyhoďte iframy

▪ Prejdite na PHP 7

▪ Optimalizujte obrázky

▪ Používajte kvalitný hosting

▪ Zapnite si cache a všetko minifikujte

▪ Nepotrebné pluginy deaktivujte a zmažte

▪ Advance: Lazy Load, Defer/Async JS

Extra

Optimalizácia DB

▪ Znížte počet revízii

define( 'WP_POST_REVISIONS', 3 );

do wp-config.php

▪ Prečistite DB pomocou WP Sweep

Pluginy len tam, kde ich treba

Načítavajte css/js pluginu len na tých stránkach, kde sa reálne používa

▪ Ručne v kóde

▪ Plugin Organizer

Vďaka ;)

xKatka.sk

ahoj@xkatka.sk

@xKatka