Szybkość ładowania

[Marys]

Witam,
ostatnio coś mi się obiło o uszy, że można zwiększyć wydajność strony stosując sprites (czy jakoś tak). Może wiecie więcej coś o tym? Kiedy to stosować i jak?

[Storm]

Generalnie chodzi o umieszczenie (wszystkich) elementów graficznych w jednym pliku i użycie background-position. Zmniejszasz w ten sposób liczbę requestów podczas ładowania dokumentu. Nie ma się co rozpisywać, bo na ten temat jest już mnóstwo tekstów. http://css-tricks.com/158-css-sprites/

[Kartofelek]

I ogólnie nie chodzi tylko o sprites dla brazków. To samo stosuje się (choć o wiele rzadziej) dla dźwięku.
Pliki JS, Style ect też dobrze na zakończenie tworzenia strony umieszczać w jednym pliku. A przynajmniej starać się zmniejszać ich liczbę. Im mniej odwołań tym szybciej leci strona

[Marys]

aha czyli zasad jest taka, że odwoływać się do jak najmniejszej ilości plików. Dobra jak już jesteśmy przy wydajność to spytam się jeszcze o css. Poniżej przestawiam dwa rozwiązania i które z tego jest lepsze?

Przykład 1

Kod:

#div1{
width: 500px;
margin: 0 auto;
text-align: center;
background-color: #111;
}
#div2{
width: 500px;
margin: 0 auto;
text-align: center;
background-color: #999;
}

Przykład 2

Kod:

#div 1, #div2{
width: 500px;
margin: 0 auto;
text-align: center;
}
#div 1{
background-color: #111;
}
#div 2{
background-color: #999;
}

[Kartofelek]

To zależy do czego.
Jeżeli oba bloki są niezależne to wtedy 1. Jeżeli oba są zależne (w sensie jeżeli jeden się zmienia to drugi też) to oczywiście 2. I nie chodzi tutaj tylko o długość CSS, bo wtedy mógł byś jeszcze
to wszystko spakować, ale nie o to zawsze chodzi. Po prostu style tak samo jak reszta strony mają być pisane mądrze.

[Raalsky]

Co do skróconego kodu to można jeszcze tak:

Kod:

#div 1, #div2{
width: 500px;
margin: 0 auto;
text-align: center;
background-color: #111;
}
#div2{
background-color: #999;
}

Pamiętając, aby tło dla #div2 było jako drugie w pliku CSS (przed definiowaniem wartości dla obu elementów), ponieważ parser leci z góry na dół. Jednak Kartofelek ma rację - zależy od sytuacji. Lepiej byłoby w ogóle zastosować klasę dla dwóch obiektów i dać identyfikator tylko dla jednego z nich. Ewentualnie pokombinować z pseudoklasą :nth-of-type(...) lecz tutaj już mogą być problemy z optymalizacją względem przeglądarek.