Czy warto umieszczać CSS w kodzie strony lub w osobnym pliku

[Schlesier]

Chciałbym się dowiedzieć jakie macie zdanie nt. umieszczania kodu CSS w metatagu <style> zamiast w osobnym pliku. Pytam ponieważ chciałem zoptymalizować moją stronę internetową tak aby maksymalnie zmniejszyć ilość zapytań do serwera, zajmowała jak najmniej miejsca, zużywała mało transferu, była szybka i zgodna w 100% z wytycznymi Google.

No i pojawił mi się problem mianowicie Google speed test zaleca umieszczenie kodu CSS bezpośrednio w pliku wyjściowym zamiast osobnym, to ma swoje zalety ponieważ ilość zapytań do serwera się automatycznie zmniejsza o 1 plik z CSS, natomiast ma też wadę ponieważ kod strony jest zawsze większy o rozmiar CSS, a na dodatek na każdej podstronie przeglądarka musi wykonywać CSS osobno.

Wady CSS bezpośrednio w kodzie:
- konieczność wczytywania CSS dla każdej podstrony osobno
- zwiększony rozmiar kodu strony o CSS
- zwiększenie transferu w przypadku odwiedzin przez użytkownika na wielu podstronach serwisu

Zalety CSS bezpośrednio w kodzie:
- 1 zapytanie do serwera mniej
- szybsze ładowanie strony w przypadku odwiedzin wyłącznie na 1 podstronie

Zalety CSS w pliku osobnym:
- jednorazowe ładowanie stylu dla odwiedzin na wszystkich podstronach portalu
- zmniejszenie zużycia transferu jeżeli użytkownik odwiedzi kilka podstron

Tak więc jakie wy macie zdanie na ten temat? chętnie poznam wasze opinie.

[Morfidon]

Tak ładnie przeanalizowałeś temat, że ciężko tu coś dodać

Moim zdaniem zdecydowanie CSS powinien być jeden i na wszystkie podstrony dołączany z tagu link ze względu na to, że jak coś będziesz chciał zmienić to wystarczy to zrobić tylko w jednym pliku. Sytuacja może wyglądać trochę inaczej na potężniejszych serwisach, ale wtedy szybkość wczytywania wielu plików CSS można zrekompensować wczytywaniem z wielu domen (o czym napiszę na końcu tego posta).

Osoba, która odwiedza Twoją stronę ponownie również ma Twój stary styl CSS więc nawet jeśli wczyta tylko jedną podstronę to będzie to dalej szybciej.

2-3 zapytania do serwera mogą być wysłane natychmiast, także jeśli masz akurat plik .js, html i .css to nie zauważysz żadnej różnicy w prędkości ładowania.

O szybkości wczytywania strony szerzej mówię w kursie pozycjonowania:
W lekcji 39 - szybkość wczytywania strony

Nie ma właściwie konkretnego bez żadnych minusów powodu dla którego powinno się korzystać ze styli CSS w jednym i tym samym pliku gdzie jest kod HTML poza prezentacjami (tutorialami), gdzie stworzenie pliku to niepotrzebnie tracony czas.

Myślę, że jeśli styl CSS wykorzystany zostanie wyłącznie na jednej jedynej podstronie na cały serwis to można go umieścić lokalnie - wtedy nie trzeba dodawać zbędnego wczytywania w zewnętrznym pliku styli. Problem polega na tym, czy gwarantujesz sobie, że na pewno tak będzie oraz czy będziesz o tym pamiętał za 2 lata, gdy będziesz chciał coś zmienić

Jeśli chcesz przyspieszyć wczytywanie to możesz umieścić styl CSS na innej domenie (subdomena też wystarczy) co przyspieszy wczytywanie strony - jest to zdecydowanie lepsze rozwiązanie zgodne z google speed (więcej w kursie pozycjonowania)

Pozdrawiam

PS Jakby każde pytanie było zadane jak Twoje świat byłby piękniejszy M.

[Schlesier]

Widzi Pan, a ja rozwiązałem wszystko kompromisowo chociaż Google Speed Test nadal wyświetla mi że Strona zawiera blokujące zasoby CSS (1), oczywiście uważam to za przesadę żeby na każdej stronie bezpośrednio umieszczać styl CSS o tej samej treści.

Wracając do mojego rozwiązania to aby osiągnąć zamierzone cele tj. maksymalnie zminimalizować szybkość wczytywania strony oraz zużycie transfer, to postanowiłem załatwić sprawę tak, żeby przeglądarka od razu bez pobierania CSS wiedziała jakie obrazki załadować to umieściłem część kodu CSS odpowiadającego za tła i obrazki bezpośrednio w kodzie strony. Zaś część z danymi poszczególnych elementów umieściłem w zewnętrznym pliku CSS. W konsekwencji przeglądarka po pobraniu kodu, pobiera jednocześnie CSS i resztę multimediów w tym obrazki niezbędne do poprawnego wyświetlania się elementów strony.

Oczywiście o kompresji kodu i multimediów nawet nie wspomnę bo to dla mnie podstawa przy tworzeniu strony.

A swoją drogą to zainteresował mnie pomysł aby CSS używany wyłącznie na 1 podstronie wsadzić bezpośrednio w kod wyjściowy witryny, aktualnie zdążyłem dodać tą opcję do mojego CMS-a na którym mam nadzieję mieć okazję do wykorzystania tego rozwiązania w przyszłości, (aktualnie działa to tylko na subdomenie sklepu). Pozwoli to zaoszczędzić pewnie te kilka KB transferu na każdorazowych odwiedzinach w przypadku ruchu utrzymującego się na poziomie 10K - 40K ma nie lada znaczenie ponieważ 3,3KB zaoszczędzonego transferu na stronie z ruchem 38K uu/dzień. zaoszczędziło mi 3,7GB transferu miesięcznie.

Co do pomysłu umieszczania stylu na subdomenie to nie mam co do tego zdania ponieważ wielkie serwisy takie jak Twarzoksiążka, NK czy onet wykorzystują te rozwiązania jednak ja jeszcze tym się nie zajmowałem chociaż przez przypadek zastosowałem to o czym napisałeś na subdomenie sklepu sklep.zgoda.eu ponieważ aby zaoszczędzić miejsca na dysku i transferu w przypadku powracających użytkowników to umieściłem styl CSS wspólny w obrębie domeny www.zgoda.eu i sklep wczytuje się 542ms, zaś strona główna 568ms jednak myślę że powodem tego nie jest styl na zewnętrznej subdomenie

P.S. Jak Pan ocenia rozwiązania które zastosowałem w CSS na stronie pod względem optymalizacji czasu wczytywania?

[Morfidon]

Myślę, że najlepszym rozwiązaniem jest wczytywanie obrazków z pomocą AJAX:
http://perishablepress.com/3-ways-prelo ... ript-ajax/

Ale przy tak małej stronie nie ma to raczej większego znaczenia. Obrazkom powinno się zdecydowanie nadać odpowiednie cache w .htaccess oraz rozmiary (które najlepiej jak są identyczne z oryginałem, wtedy nie trzeba skalować). Dużym atutem jest umieszczenie również na różnych domenach tła strony etc.

Można jeszcze skorzystać z serwera z dyskiem SSD + np. GZIP.

[modelmt87]

Witam czasem warto takie rzeczy robić,ponieważ są przydatne

[mariayuyu]

Myślę, że najlepszym rozwiązaniem jest wczytywanie obrazków z pomocą AJAX:
http://perishablepress.com/3-ways-prelo ... ript-ajax/

Wczytywanie obrazków za pomocą AJAX ma niestety swoje minusy, szczególnie wtedy, gdy zależy nam na indeksowaniu ich w google images. Obrazki wczytywane wraz ze scrollowaniem strony niestety nie indeksują się w google images, bot google ich nie widzi.

[Morfidon]

Myślę, że najlepszym rozwiązaniem jest wczytywanie obrazków z pomocą AJAX:
http://perishablepress.com/3-ways-prelo ... ript-ajax/

Wczytywanie obrazków za pomocą AJAX ma niestety swoje minusy, szczególnie wtedy, gdy zależy nam na indeksowaniu ich w google images. Obrazki wczytywane wraz ze scrollowaniem strony niestety nie indeksują się w google images, bot google ich nie widzi.

Oczywiście, że tak, dlatego stara się zawsze zrobić się wersję dla bota i nie bota.

[andrzejkoziol11]

Warto mieć taki osobny plik bo łatwiej jest wtedy zarządzać całością strony, od innych technik już powoli będzie się odchodzić. Taki plik np. ułatwia prostą edycje gdy mamy kilkaset zdjęć na stronie.

[gumbal]

no co wy tylko osobny plik css. W pliku html mamy szkielet strony, stylujemy w css lub w sass - hello dobre praktyki?