Sunt anumite lucruri pe care nu sunt foarte sigur că le înțeleg. Cum ar fi: cum servești CSS doar pentru ce este „above the fold”? Ce se întâmplă cu stilurile pentru restul elementelor?
Faci două request-uri (unul pentru above, altul pentru below the fold)? Contează ordinea definițiilor în fișierul CSS?
Cum decizi ce este above the fold? Se face automat? Faci o medie și dai cu zarul?
Above the fold este o tehnica pt. “perceived performance”, in ideea ca extragi din fisierul CSS style-urile pt. elementele care apar in pagina cand se face initial load, ca sa para ca s-a incarcat instant.
Sa presupunem ca in urma unui research pe analytics (traficul curent) observi ca majoritatea au browsers cu un height de 1050px, care va fi marker pt. “above the fold”.
Ideal este sa creezi un tool (cu phantom.js e relativ usor) care automat sa-ti faca parse la ‘landing page’ si sa extraga toate elementele care sunt vizibile in browser intre 0 si 1050px. Apoi faci parse la CSS si extragi style-ul pt. elemente si clase. Le pui inline in head si creezi un “perceived loading speed” de aproape instant.
Tehnica o consider utila in situatiile in care folosesti cache si ai ceva complex ca si continut care ar lua 2+ sec, timp de incarcare, pana sa apara ceva functional in pagina.
Ok, are sens ce zici tu, dar tot câștigul al stilurilor inline ăsta nu înseamnă mai puțin caching?
Pentru că practic va trebui să aplici tehnica asta tuturor „entry-points” din site, nu? Asta înseamnă de fapt că majoritatea CSS-ului va fi inline (presupunând că se face o distincție clară între elemente) sau că nu se poate aplica această tehnică (dacă folosești un concept de genul OOCSS).
Chestia cu above the fold este si cum zici tu @navaru . In acceptiunea addyosmani lucrurile sunt un pic “altfel”
Cand explica metoda: https://github.com/addyosmani/above-the-fold-css-tools foloseste aceeasi exprimare ca in https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent, ca above the fold, insemnand “critical path” al contentului pe care tu ca dezvoltator il consider important. Ca poate fi sliderul din homepage sau contentul articolului dintr-o pagina de interior.
Cu totii am vazut pagini de articole asteptand dupa content irelevant pentru a se renda.
@iamntz: nu cred ca va fi mai putin caching. Cred ca acel critical path va fi foarte mic. Adica dintr-un 200K css, sa poi inline doar vreo 2-10k care reprezinta critical path pentru acea pagina. Iar restul caching dar cu incarcare intarziata, pentru ca el vrea sa treaca peste simpla optimizare cu cache.
Per total, desi eram bucuros (daca nu mandru) de tehnicile mele de optimizare (sprites, inline image,css min, gzip, unused) acum imi dau seama ca iar s-a ridicat stacheta si e mult de sarit 
@Catalin_Banu intradevar, n-am specificat motivatia, a fost oarecum intentionat, raspunsul era mai mult pt. intrebarile lui @iamntz
Eu sunt cam dezamagit pe nivelul de cunostinte al designerilor care fac design pt. web si nu tin cont de:
- mobile first
- content strategy
- layout structure
- visual hierarchy
Consider ca este necesar sa fie facuta o separare intre layout / template si continut (module). Daca ai o separare clara, poti extrage usor ce elemente vrei sa fie in “above the fold” - ex. page template (layout), main navigation, module x, module y.
Ca si implementare, eu incerc sa tin cont de “single responsibility principle”:
<div class="panel-articles">
<div class="grid">
<div class="gird-cell"> [article box template] </div>
</div>
</div>
in contrast cu:
<div class="grid panel-articles">
<div class="gird-cell article-box"> ... article template content ... </div>
</div>
Apropo de slider, personal, consider ca este o structura ineficienta pt. a prezenta informatii importante / relevante. Daca te astepti ca un utilizator sa astepte 12 secunde sa vada ce-l de-al 3-lea slide, o sa ai o surpriza. Eu am facut un test si din 15k vizite pe un site, doar 179 au vazut si-al 3-lea slide.
Orice designer va ofera ca solutie un slider pe prima pagina, spune multe despre cunostintele lui despre UX.
Cred ca am spus o prostie mai sus. Scuze @navaru. Dar e posibil ca above folul sa fie generat de o inaltime arbitrara, si nu un content anume. Vad https://github.com/pocketjoso/penthouse
By default penthouse gives you the css needed to render a viewport of size 1300x900.
Ramane sa aplic lucruriel de acolo si sa revin cu feedback.