Намаляване на времето за зареждане на страницата с CSS, CSS

Въпреки нарастващото разпространение на широколентовия достъп до Интернет, проблемите със скоростта на зареждане на HTML страници все още не са безразлични за много интернет потребители, особено в пространствата на бившия Съветски съюз. CSS (Cascading Style Sheets) може да помогне с това, спестявайки ни време и трафик.

1. Избягвайте да използвате таблици за оформление на страницата

Ето шест причини, поради които трябва да използвате CSS вместо таблици за оформлението на вашата страница:

  • Браузърите анализират таблиците два пъти: първият път, за да оценят структурата на таблицата, и вторият път, за да определят тяхното съдържание.
  • Таблиците се показват веднага изцяло, а не както са заредени.
  • Таблиците са принудени да използват прозрачни картини, за да определят ширината на колоните и т.н.
  • CSS изисква много по-малко код от претоварените таблици.
  • Целият CSS код може да бъде поставен във външен файл, който ще бъде зареден само веднъж и съхранен в кеша на браузъра.
  • Използвайки CSS, можете да контролирате реда на зареждане на елементите на страницата.

2. Не използвайте картини за показване на текст

Повечето бутони и етикети могат да бъдат изобразени с помощта на CSS. Разгледайте един пример:

Този CSS дефинира прост бутон, който променя външния си вид при задържане. По този начин могат да се създават и по-сложни обекти.

3. Зареждане на изображения чрез CSS

Някои фонови изображения се зареждат най-добре чрез CSS. Например, за да покажете изображение 200x100, можете да използвате следния код:

И съответния CSS:

Това може да изглежда безсмислено в началото, но всъщност може да направи страницата много по-бърза. В този случай браузърът ще започне да се изтеглякартина само след като се покаже целият текст, а не по едно и също време. Така потребителите могат да работят със страницата, като в този момент изображението все още ще бъде заредено.

Тази техника е най-добра за зареждане на чисто декоративни, фонови елементи на страницата. Ако изображението е част от съдържанието, пак трябва да използвате IMG тага.

4. Използване на контекстуални стилове

Този код не е ефективен:

Вместо да се присвоява клас на всеки параграф, те могат да бъдат групирани в един DIV елемент със същия клас:

Този код казва на браузъра, че всеки абзац в елемент с класов текст ще има цвят #03c и размер на шрифта 2em.

Може би сте забелязали, че цветът тук се обозначава само с три знака, а не с шест. В този случай #03c е съкращение за стойността на цвета #0033cc.