Zrýchlenie načítania stránky – HTML / XHTML – Fórum – Programujte.com

Dobrý deň, chcel by som sa opýtať, prevádzkujem e-shop www.bikeride.sk a mám jeden problém, veľmi dlho načíta stránku, asi po 5s ju začne načítať a naskočí behom zlomku sekundy, cez developer tool v chrome som zistil že stránka čaká na načítanie 5s a potom následne asi 250ms sťahuje dáta zo serveru. Neviete mi poradiť ako tých 5s skresať aspoň na 1-2s? 

Ďakujem

no vicemene je to nejspis to, ze se 5 minut zpracovava stranka a pak teprve se vysledek vyflusne do site...

ale jak to zkratit.. z toho by vznikl dlouhej seznam, zacinajici "nepouzivat php a moc optimalizovanou databazi" a tak

zkusit tam zapnout cache pokud ma ...

zkusit pripadne jestli by to nepodporovalo Fast CGI (FCGI)

odstranit zbytecny dotazy pres ten framework...

sem delal nejaky optimalizace na serveru minutex.cz a jen ten posledni bod snizil vytizeni serveru o 70% tim, ze se to doplneni do vyhledavaciho boxu delalo trivialnim scriptem a ne pres celej framework - mimochodem taky nacteni trvalo obvykle 3-5s

CMS Presta Shop

FF - plugin webdeveloper - menu Informace > Zobrazit informace o strance

4 Dokumenty 124 kb 157 kb
58 Obrázky 585 kb 585 kb
6 Scripty 421 kb 544 kb
27 Soubory stylů 110 kb 110 kb
95 Soubory 1240 kb 1396 kb --- suma

Kazdy soubor pri posilani navic pridava 1k hlavicku, takze celkova velikost prenaseni dat je 1396 + 95, skoro 1500 kb. Navic je to 95 pozadavku. Na jednu jedinou stranku je to prilis.
Nejspis se to nacita frameworkem, ktery ceka, az jsou vsechna data prenesena.

Co s tim?
- Pokusit se sloucit vsechna CSS do jednoho souboru a minifikovat (kdyby se to napsalo od nova, tak to css by mohlo mit treba 4-10k pro tu stranku).
- Totez udelat s JS.
- Omezit pocet obrazku, jejich velikost a pod
--- zbavil bych se treba miniikonek doprava a tipy, u tipu bych ocekaval ikonku spis otaznicek, kdyz uz a u dopravy cernobile auticko a ne jakesi barevne krabicky, ikdyz to je nejspis nakladacek
--- nove produkty / nejprodavanejsi bych mozna omezil na 3
--- uplne bych prepracoval obrazky rotujici galerie (treba 80 kb sedacka, 60 kb bryle) a rozklikove ikonky ponuka bicyklov / dielov
--- zajimave produkty, tam mas proc na konci jeden samotny produkt, ten bych dal pryc
--- "139 kb  Korčule a hokej" - to si delas legraci? ikonka 12x12 a ma 160 kb? (FF - web developer, menu Obrazky > Zobrazit velikost souboru)
- omezit pocet odkazu
--- treba mi neni jasne, proc tam mas tolik menicek rozbalovacich a pod. tak se na to vykasli a udelej pro to horni samostatne stranky a nedelej to rozbalovaci
(zbytek pozdeji)

* oprava: FF - plugin webdeveloper - menu Informace > Zobrazit Velikost dokumentu

Na tehle strance treba pise 1MB

http://www.bikeride.sk/kenzel-detske/

- | Velikost |  Velikost po rozbalení
4 Dokumenty 150 kb 183 kb
60 Obrázky 343 kb 343 kb
0 Objekty
4 Scripty 333 kb 357 kb
28 Soubory stylů 112 kb 112 kb
96 Soubory 938 kb 994 kb

Spravna velikost stranky html+css+js+obrazky je kolem 40k. U shopu je to obvykle vic, kvuli obrazkum. Google indexuje html kod do 40k, treba.
Nespis bych zvazil pouzit jiny CMS. Pochybuji, ze bys dokazal 500 kb JS kodu sam zmensit nebo minifikovat. Na ty efekty, co mas na strance, staci kolem 10 kb.

Google ma pekny analyzacni nastroj, ktery ti nejspis doporuci kesovani (viz KIIV), ukladani do html souboru, zipovani.

Suggestions Summary

* !!! Reduce server response time to under 200ms

In our test, your server responded in 15.9 seconds. There are many factors that can slow down your server response time. Please read our recommendations to learn how you can monitor and measure where your server is spending the most time.

(pisou, ze 16s trvalo, nez to 1.5M prenesl ze serveru)

* !!! Eliminate external render-blocking Javascript and CSS in above-the-fold content

Your page has 2 blocking script resources and 28 blocking CSS resources.
(= sloucit js  css do jednoho souboru)

* !!! Enable compression

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

(zapnout gzip, to by ti usporilo asi 800k, kdyz by ten css a js zkomprimoval)

* !!! Minify CSS

Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time

(minifikovat css, coz je takovy jakysi druh komprese, tez).

* Optimize images

* Properly formatting and compressing images can save many bytes of data.

(obrazky se mu zdaji optimalni, to teda koukam, kdyz tam mas tu ikonu 12x12, co ma 200k :) )

* Leverage browser caching

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

(kesovani pro prohlizece)

* Minify JavaScript

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

(minifikovani js, tez ok, nejspis tvuj js framework uz je minifikovany, asi nejake jquery, nezkoumal jsem to)

* Avoid landing page redirects

* Minify HTML

* Prioritize visible content

https://developers.google.com/speed/pagespeed/
Jo, link jsem asi nedal :)