Tag Archives: share

Noul Emag.ro: analiza a site-ului si optimizarile necesare

Update 11 noiembrie: La sesizarile trimise prin e-mail, am primit raspuns de la emag.ro. Le multumesc pentru raspuns, le urez succes la modificari si la Black Friday. Sper sa fie de ajutor comentarile mele si vor ajuta la o mai buna functionare.

Buna ziua, … conduc departamentul de Software Development din eMAG.

Vreau pe aceasta cale sa va multumesc si apreciez faptul ca v-ati alocat timp​ scrierii articolului de mai jos. Datele descrise ne sunt foarte utile si le luam in considerare.​ Am dat lista in analiza si dezvoltare, iar punctele cele mai grave o sa le rezolvam pana in evenimenul Black Friday​. De exemplu punctul 21 deja a fost ​fixat si pus in productie.

Multumesc inca o data pentru timpul acorda analizei.

Cu stima,

Software Development Director

Alo Emag.ro? Dormiti acolo? Stiam ca faceti angajari si ca aveti o echipa buna la programare, formata din seniori, juniori etc. Cum poti sa lansezi asa NOU site? Am mai vazut asa site-uri varza, dar calitatea oferita foarte joasa. NU stiu cum va ganditi sa aveti site-ul acesta si de Black Friday.

Deci… mi-am alocat aproape o ora si cu scris articol, pentru a va analiza noul site. Am intrat si ieri parca si nu mi se incarca. Mi-am zis ca nu merge “net”-ul, dar pana la urma era de la Production-ul vostri si de la codul primei pagini. Intrebare: aveti echipa de liceeni in spate? Nu schimbati nimic in stilul de programare de cativa ani, cu toate trend-urile, tehnologiile si angajarile noi?

Nu discut despre SEO, share, UI aici, ci doar de cod brut: HTML, JS. Pentru restul sper ca aveti ceva mii de euro alocati, pentru a putea va putea compara cu altii care au aceste sisteme puse la punct. Le au de cativa ani. Eu nu stiu care sunt factorii de decizie la voi si puteti lansa asa ceva, la dimensiunile si prestanta pe care o aveti, un fel de amazon al Romaniei.

eMAG.ro - noul site noiembrie 2015

Urmeaza analiza mai tehnica mai jos, nu spun ca e 100% corecta, dar are elemente de baza, de “bun simt” al constructiei site-urilor. Cei care lucreaza cu ele zilnic, vor intelege si se vor minuna. Cei care nu inteleg, isi vor da seama ca reducerea de la 514 kb la 258 kb, adica 50% este imensa. Firmele se lupta sa reduca 5%, 10% cu tot felul de articifii: cache, cloud, minify etc.

Succes EMAG la optimizari, integrare cu Facebook, SEO. Bine ai venit in anul 2015.

Atasez si fisierul cu codul paginii analizate: html / zip.

—-

Prima pagina
Continut initial: 517 Kb

1. Aranjare intend

2. Meta Description trunchiat. Se termina cu ". Beneficiezi"

3. Comasare cod onWindowLoad + init _sf_startpt

4. Mutare cod JS incepand cu "var userPixelH=userPixelH" in head_js_01.js

5. Mutat cod comasat in pct.3 in fisier head_js_01.js => 8 kB

6. Mutare cod JS incepand cu "var strCancel = 'Anuleaza'" in head_js_02.js => 4Kb

7. Analiza cod /cache/js/homepage.js?1446833749 => are minimizat 269 Kb
(Are cod de jquery + toate functiile folosite de site)

8. Rand cu emag.ro//resources/js/custom-select.js are 2 //

9. Lasate initializarile de JS cu site_url = "";

10. Mutat cod JS incepand cu "var OA_zones = {};" in head_js_03.js => 4Kb

11. Mutat cod JS incepand cu "dataLayer.push({" si "siteLocale = 'ro';" in head_js_04.js => 4Kb

12. Intend la </head> + <body>

13. Mutat cod js "var deliveryTimeEnabled = ''" in head_js_01.js

14. Lasat cod "Google Tag Manager" in body si nu e scos in fisier separat

15. Tagul de head s-a terminat: nu are OpenGraph pentru sharing
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.emag.ro => Varza => s-au generat automat

16. Codul JS "$(document).ready(function() {" lasat in body
Totusi contine cod ce poate fi scos in afara:
ex: var question_add = []

17. Functiile de testare AB (runAb)
- Avem in document.ready runAb(53); runAb(62); runAb(66); runAb(57); runAb(69); runAb(74);
- In variabila activeAbs exista doar 62, 66, 68, 70, 74 => se executa pentru 62, 66, 74
- se trimit rezultate de la functia generateAB prin Ajax la ablogger.php?name=" + name + "&value=" + currentOpt + "&source=www
=> deci 3 apeluri de ajax

18. Funcitile AB mutate in header_js_05.js. Inclus codul JS in head

19. Mutat codul CSS ".emg-top-menu" in css/css_01.css

20. Codul meniului contine spatii goale foarte mari. Linia incepand cu 'div class="emg-menu-box emg-col8">'
Salvat codul gol de la un item de meniu si pe disk are 350 bytes

21. Meniul contine blocuri imense de spatii goale. Timpul alocat analizei nu mi-a permis sa sterg aceste blocuri. Reprezinta mai mult de 3/4 din lungimea fisierului

22. Sarit peste meniu si ajuns in zona CSS " body._ #page-content.no"

23. Mai sunt optimizari in ultima parte a paginii: functii emgFluidOverlayShow, texte de la var datePicker, functii get_browser_version

24. Am salvat continutul meniului (<nav id="emg-mega-menu">) pe disk separat si are 254 Kb.

24. Ca sa fac o estimare a optimizarii codului, am sters codul imens din zona de meniu (deci tot <nav id="emg-mega-menu">) si am obtinut 258 Kb