Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ako na rýchly web - WordCamp Žilina 2016 - xKatka

592 views

Published on

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 ;)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ako na rýchly web - WordCamp Žilina 2016 - xKatka

  1. 1. Ako na rýchly web xKatka
  2. 2. 47% používateľov opustí stránku po 2 sek. načítavania *podľa Kissmetrics
  3. 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. 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. 5. Šablóna: Free VS prémium
  6. 6. Od čoho závisí rýchlosť stránky? ▪ počet pluginov ▪ šablóna Aká je realita: ▪ obsah ▪ cache ▪ hosting
  7. 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. 8. Obrázky Tŕň v oku pre mnohé weby
  9. 9. 6000x4000px 7,65MB 1200x800px 147kB
  10. 10. Víťaz súťaže Bloger roka 2015 v kat. Móda
  11. 11. Nastavenia - Multimédiá Force Regenerate Thumbnails
  12. 12. 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ť
  13. 13. Cache Uloží vygenerované stránky do medzipamäte odkiaľ ich zobrazuje návštevníkom
  14. 14. 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
  15. 15. WP Super Cache W3 Total Cache WP Fastest Cache
  16. 16. 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
  17. 17. Hosting To, kde je vaša stránka uložená.
  18. 18. Hľadáme dobrý hosting ▪ PHP 7 ▪ Podpora pre WordPress ▪ Lokalita ▪ Výkon ▪ Support
  19. 19. Súboj hostingov
  20. 20. 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
  21. 21. 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
  22. 22. Elbia hosting s cache https://gtmetrix.com/reports/www.dognet.sk/9zUGr861 Websupport s cache https://gtmetrix.com/reports/www.dognet.4rka.sk/tj8VRyNy
  23. 23. Case study č. 1
  24. 24. 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
  25. 25. Case study č. 2
  26. 26. Predtým Potom
  27. 27. 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
  28. 28. Predtým Po migrácii na WY hosting pre WordPress (vypnutie cache, zapnutie Autoptimize)
  29. 29. 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
  30. 30. Case study č. 3
  31. 31. 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
  32. 32. Ako teda na rýchly web?
  33. 33. 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
  34. 34. 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
  35. 35. Vďaka ;) xKatka.sk ahoj@xkatka.sk @xKatka

×