Ako na rýchly web - WordCamp Žilina 2016 - xKatka
45
Ako na rýchly web xKatka
-
Upload
katarina-novotna -
Category
Technology
-
view
448 -
download
3
Transcript of Ako na rýchly web - WordCamp Žilina 2016 - xKatka
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
