Witam. Mam pewien problem z optymalizacją tworzonej strony, używam Google Chrome i wykonałem pewien test a mianowicie otworzyłem tę stronę i rozciągałem przeglądarkę w lewo i w prawo. Podczas przesuwania widoczne jest dość duże przerywanie płynności, dla testy otworzyłem inne strony takie jak onet czy tvn24 w których takiego efektu nie ma. Strona stworzona jest w standardzie html5/css3 i prawie zgodna ze standardami w3c (posiada kilka mniej ważnych błędów). Problem w tym, że nie wiem jak by się tego pozbyć, z tego co się zorientowałem to winę za to ponosi spora ilość kodu css3 który dość spowalnia stronę czyli gradienty, obramowania czy zaokrąglenia. Czy można temu zaradzić?
“…z tego co się zorientowałem to winę za to ponosi spora ilość kodu css3 który dość spowalnia stronę…”
A ile linii ma Twój arkusz stylu, jaki jest jego rozmiar? Rozumiem, że nie masz jakiś animacji (js/flash/gif) na stronie, jest zastosowane tylko to co podałeś?
Jeśli to faktycznie wina “rozpasanego” css’a to będziesz miał najprawdopodobniej niemiły zaszczyt jego optymalizacji, która będzie polegała na:
-
scaleniu wartości/własności powtarzających się, np. z
.element1 {color:red; width:100px;}
.element2 {color:green; width:200px;}
.element3 {color:red; width:100px;}
na
.element1, .element3 {color:red; width:100px;}
.element2 {color:green; width:200px;}
-
dokonaniu kompresji plik(u)ów css (usuwane są niepotrzebne białe znaki, cały kod będzie w jednej linii - przed kompresją rób kopię, żebyś mógł dokonywać zmian w css’ie w cywilizowany sposób ;), a to co będzie na serwerze będzie skompresowaną wersją)
-
rozdzielaniu kodu na kilka plików css, oczywiście jeśli wiesz, że jakaś część nie jest używana na danej stronie (po co ma być wczytywana, skoro leży odłogiem)
-
zastosowaniu sprite’ów, jeśli korzystasz z plików graficznych (scalone w jedno grafiki, mniej odwołań, zmniejszone zapotrzebowanie na zasoby systemowe itp.)
W ostateczności będziesz musiał pójść na kompromis i zrezygnować z części fajerwerków wizualnych lub zastosować ekwiwalent, np. zamiast gradientu w css, dać zamiennik w postaci grafiki z repeat’erem (“klonowany” cienki pasek grafiki, “udający” tło gradientowe).
To chyba tyle (może mi coś z głowy wyleciało ;))
Rozpocząłem budowanie kodu od początku, bo dodaniu jednego większego elementu zawierającego gradient i zaokrąglenia już był odczuwalny spadek płynności. Po za tym co napisałeś manieKMP , to jedyne co mogłem zrobić to dokonanie kompresji pliku, bo reszta jest względnie w najkrótszej postaci. Będę zmuszony używać standardowych grafik. Może gdy silniki przeglądarek będą już na tyle dopracowany by najnowsze technologie działały sprawnie wrócę do takiego budowania stron. Ok, dziękuję.