+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Szybkość ładowania (/thread-szybko%C5%9Bc-ladowania)
Szybkość ładowania - Marys - 06-08-2011
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?
RE: Szybkość ładowania - Storm - 06-08-2011
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/
RE: Szybkość ładowania - Kartofelek - 07-08-2011
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
RE: Szybkość ładowania - Marys - 08-08-2011
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;
}RE: Szybkość ładowania - Kartofelek - 09-08-2011
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.
RE: Szybkość ładowania - Raalsky - 11-08-2011
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.