Prezentácia z WordCamp Žilina 2016 by xKatka | Katarína Novotná Čo spôsobuje pomalé načítavanie stránok a ako to vyriešiť? Optimalizujte obrázky, nastavte si dobre cache a používajte kvalitný hosting ;)

1. Ako na rýchly web
xKatka

2. 47% používateľov
opustí stránku
po 2 sek. načítavania
*podľa Kissmetrics

3. PageSpeed Insights
GTmetrix.com
Webpagetest.org
Tools.Pingdom.com
Page Load Time / čas
načítania stránky
Total Page Size / celková
veľkosť stránky
Requests / počet požiadaviek
Waterfall

4. 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/

5. Šablóna: Free VS prémium

6. Od čoho závisí rýchlosť stránky?
▪ počet pluginov
▪ šablóna
Aká je realita:
▪ obsah
▪ cache
▪ hosting

7. 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, ...

8. Obrázky
Tŕň v oku pre mnohé weby

9. 6000x4000px 7,65MB
1200x800px 147kB

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

15. Nastavenia - Multimédiá Force Regenerate Thumbnails

16. 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ť

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

18. 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

19. WP Super Cache
W3 Total Cache
WP Fastest Cache

20. NO CACHE
WP 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
composerom
1.26s / 1.3s 0.87s / 459ms 0.76s / 379ms 0.92s / 426ms
gtmetrix.com / tools.pingdom.com

23. Hosting
To, kde je vaša stránka uložená.

24. Hľadáme dobrý hosting
▪ PHP 7
▪ Podpora pre WordPress
▪ Lokalita
▪ Výkon
▪ Support

25. Súboj hostingov

26. 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

27. Elbia hosting
https://gtmetrix.com/reports/www.dognet.sk/hf2FWS2x
WY pre WordPress
https://gtmetrix.com/reports/mojefaktury.top/kMV5sCtV
Websupport
https://gtmetrix.com/reports/www.dognet.4rka.sk/FABkzuhN

28. Elbia hosting s cache
https://gtmetrix.com/reports/www.dognet.sk/9zUGr861
Websupport s cache
https://gtmetrix.com/reports/www.dognet.4rka.sk/tj8VRyNy

29. Case study č. 1

31. 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

32. Case study č. 2

33. Predtým
Potom

34. 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

36. Predtým
Po migrácii na WY hosting pre WordPress (vypnutie cache, zapnutie Autoptimize)

37. 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

38. Case study č. 3

41. 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

42. Ako teda na rýchly web?

43. 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

44. 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

45. Vďaka ;)
xKatka.sk
ahoj@xkatka.sk
@xKatka