Използване на 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.

5. Използване на съкращения.

Шрифт

шрифт: 1em/1.5em получер курсив сериф

Граници

рамка: 1px плътно черно

border-width: 1px; border-color: черен; border-style: плътен

Фон

фон: #fff url(image.gif) без повторение горе вляво

фонов цвят: #fff; фоново изображение: url(image.gif); фоново повторение: без повторение; фонова позиция: горе вляво;

Попълване и граници

поле: 2px 1px 3px 4px (горе, дясно, долу, ляво)

поле: 5em 1em 3em (горе, ляво и дясно, долу)

поле: 5% 1% (отгоре и отдолу, отляво и отдясно)

Тези правила се прилагат за атрибутите на полето, рамката и подложката.

Всеки символ - буква или интервал - заема един байт. Всеки допълнителен знак само увеличава размера на страниците. Затова се опитайте да натискате по-малко Enter и Tab по време на процеса на оформление. Също така, не забравяйте да обедините CSS стилове.

7. Използвайте относителни връзки.

Абсолютните връзки заемат много повече място от относителните. И освен това създава допълнително натоварване на браузъра, което е по-важно. Пример за абсолютна връзка: . Би било много по-добре да пишеш. Но какво ще стане, ако желаният файл е в друга директория? Ето няколко примера, които да ви помогнат да разберете този проблем:

8. Не се увличайте с META тагове

Повечето META тагове са напълно ненужни. При интерес можете да разгледате всички съществуващи опции. Най-важните тагове (ключови думи и описание) се използват за оптимизация за търсачки. Когато използвате атрибута content в META тага, опитайте се да не надвишавате 200 знака. Големите описания и много ключови думи може да се считат за спам от търсачките.

Всеки знае това, но не винаги го използва. Ето как изглежда CSS извикване от външен файл:

И съответно Javascript:

Всеки външен файл се зарежда само веднъж и след това се съхранява в локалния кеш. Няма ограничения за броя на "свързаните" външни файлове.

10. Поставете / (наклонена черта) в края на връзките към директорията

Това е грешен правопис на връзката:

Трябва да напишете така:

Може да се интересувате от:

Благодаря ви, опитахме!

Между другото, абонирани ли сте за нашия бюлетин? Ако не, тогава е време да опознаете Катя.

Съжаляваме, че не отговорихме на вашите очаквания (( Може би ще ви харесадруги статии в блога.

Ръководство стъпка по стъпка за самореклама на сайта

  • Всички необходими стъпки за промоция
  • Инструкции как да го направите сами
  • Приблизителни цени на специалисти

Запазете с 1PS.RU

Разгледайте секция "Промоции" и се възползвайте от актуалната оферта: актуални промоции, отстъпки, подаръци и бонуси са събрани на едно място.

След това разгледайте други статии

Отидете в секцията SMM и SMO ​​и разберете последните новини от света на социалните мрежи. Актуални актуализации, ръководства стъпка по стъпка, лайфхакове и идеи за създаване на съдържание - споделяме само работещи техники, тествани от нашите SMM специалисти.