Оптимизация страниц сайта – статья первая.

Автор: ValdeZ

Категория: Web » Оптимизация

Доброго времени суток, уважаемые пользователи. От всей души поздравляю Вас с наступившим 2010-м годом Оптимизация страниц сайта – статья первая.

Эта статья - мой «дебют» на этом замечательном сайте Photoshopics.ru в качестве редактора. И сегодня я хочу затронуть немаловажную и весьма интересную тему для администраторов, верстальщиков и вообще для всех тех, кто неравнодушен к своему сайту. Эта тема - «Оптимизация (ускорение загрузки) страниц сайта». В статье для Вас будет представлен разнообразный материал по этой теме, а так же полезные ресурсы и программы.

-------------------------------------------------------------------------------------------------------


Введение, теория.
Что такое скорость загрузки сайта, думаю, объяснять не стоит. Возьмём из этого главное, а главное в этом случае - время, за которое загрузился сайт. Согласитесь, для каждого пользователя скорость загрузки будет разная, из-за индивидуальных параметров (скорость интернета, браузер). Поэтому, чем она меньше, тем лучше и для пользователя и для добросовестного администратора. Если сайт будет загружаться не прилично долго, то посетителю просто надоест ждать и он уйдёт. Так же сделают и многие другие. И вот уже потеря клиентов, посетителей... К тому же, совсем недавно поисковая система Google официально объявила, что вес страниц будет влиять на их рейтинг в поисковой выдаче - прочитать подробно.
Так как же сделать свой сайт более быстрым? Для начала выясним причины, из-за которых сайт может долго грузиться:

- Плохо написанный код.
- Излишний вес или большое количество графики.
- Много подключаемых javascript
- Всплывающая реклама, рекламные баннеры или фреймы.

Это основные причины сей проблемы. НО, это не значит, что нельзя использовать много картинок, подключать различные javascript - библиотеки и т.д. Просто нужно знать, как грамотно уменьшить вес тех же изображений или кода. Именно об этом пойдёт речь дальше.

Решаем проблему избыточности кода.
Под словом «Код» имеется введу не только HTML-код, но так же CSS(Cascading Style Sheets и JS(javascript). Можно было бы ещё рассматривать исполняемые скрипты на стороне сервера, но это отдельная тема для разговора.
По сути, эта проблема не самая страшная, но не стоит не обращать на неё внимание. Например, сильно «грязный» код может похудеть на 30-50 килобайт. «Грязным» код становится из-за того, что в нём присутствует много ненужного. Что конкретно? Посмотрите примеры:


...
<body>
<p>
<!-- Я - параграф. Он создаст небольшой отступ, на то он и параграф.-->

Привет!
Я текст, во мне нет ничего
особенного, я написан просто для примера
.


</p>
</body>
...

Это пример простого кода, не стоит вникать в его подробности, пока-что это не важно.
Добавив остальные нужные теги мы получим около 0.4 килобайт информации. Ничтожно мало, согласитесь.
Теперь посмотрите этот код:


...
<body>
<p>Привет! Я текст, во мне нет ничего особенного, я написан просто для примера.</p>
</body>
...

Я убрал из него лишние пробелы, отступы и бессмысленный комментарий.
Теперь наш код весит 0.3 килобайт. Разница ещё более маленькая, но представьте ситуацию, когда код вашей странички весит порядка 100-200 килобайт, и избавившись от всего лишнего Вы уменьшите вес кода, тоесть страничка станет загружаться быстрее.

Хочу заметить, что для обладателей высокоскоростного интернета разница будет незаметной, но для посетителей с медленным интернетом и для поисковых машин разница будет ощутима.

Ещё не уверенны в этом? Тогда специально для Вас реальный пример:
Я взял исходный код главной страницы нашего сайта Photoshopics.ru, сохранил и посмотрел, сколько он весит.
Вышло 62.9 килобайт.
Потом я убрал из него ненужные отступы, пробелы и т.д. и вновь сохранил. Результат на лицо:
Вышло 50.1 килобайт.
Вот так, потратив немного времени мне удалось сэкономить 13 килобайт. И это только HTML код.
Пройдясь по javascript и CSS файлам я убрал в сумме ещё 30 килобайт лишнего.
В итоге вышло почти 45 килобайт, а это уже не мало.

Что касается подключаемых javascript, тут всё просто:

На заметку:
Если к странице подключено слишком много скриптов, то их лучше ставить так, чтобы они загружались после загрузки основного контента страницы.
Объясню проще: в таком случае скрипты нужно прописывать после всей конструкции сайта, почти в самом конце кода перед закрывающим тегом body.

-------------------------------------------------------------------------------------------------------


Так что дерзайте оптимизировать свой сайт, оно того стоит.
В этой статье мы затронули первые две проблемы, в следующий раз я напишу про оптимизацию графики и про рекламу.
Всего доброго и удачи bully


Полезные ресурсы:
Webo.in - проверка скорости загрузки сайта, статистика, оптимизация.
Duris.ru - оптимизация страниц на лету.
Web-optimizator - программа по улучшению качества страниц сайта.
  • 85
1-01-2010, 19:43
 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
<

2 января 2010 13:49
admiral
Администратор
Поздравляю с дебютом) Хорошая статья получилась. Хочю только заметить, что не всегда скрипты ставятся в конец страницы, перед </body>, например скрипт какого нибудь эффекта для открытия страницы, его надо выше ставить, до того как страница начнет загружаться. А лучший вариант на мой взгляд это подключение скрипта из внешнего файла (<script src="script.js"></script>), при правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново ;)
По поводу этого сайта, да можно немного оптимизировать его еще, только пока пишу еще кое какие функции, поэтому пока использую по возможности чистый код :)
Спасибо ValdeZ за статью и тебя с Новым Годом fellow

Кстате поделюсь на мой взгляд одним из лучших сервисов по оптимизации CSS файлов:
CLEANCSS - CSS Formatter and Optimiser

--------------------

<

2 января 2010 15:25
ValdeZ
Посетитель
admiral,спасибо большое smile
Вообще с самого начала нужно следить за чистотой кода, ещё когда верстаешь каркас.
Сегодня-завтра напишу вторую статью, про оптимизацию изображений.
<

24 апреля 2010 18:04
AndreyKiev
Посетитель
Много чего понял это и интересно будет больше свободного времени пересмотрю все ссылки тоже интересные.

Опросы

«    Июнь 2018    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 

Друзья сайта

Наверх
  • www.megastock.ru