Ускоряем сайт

Не так давно я заметил, что страницы моего сайта стали грузиться медленней. В общем-то, не удивительно: хочется ведь разместить максимум информации. Но ведь это при том, что скорость Интернет-соединения стала больше! Я подумал: «Если я заметил замедление загрузки страниц, то что говорить о пользователях, у которых скорость соединения всё ещё маленькая?» И решил поискать информацию о том, как ускорить web-страницы.

В этой статье делюсь результатами своих «раскопок».

Первое.

Стандартный совет оптимизировать графику. На эту тему у меня есть три статьи, с которыми вы можете познакомиться здесь. (Или освежить память, если читали раньше.)

Второе.

Если пользуетесь визуальными web-редакторами, проверяйте регулярно, что они «творят». Потому что большинство таких редакторов грешат тем, что создают такую гору ненужного кода, что мама не горюй! Особенно я в этом плане ругаю Front Page, о чём также рассказывал в статье «Что такое html и нужно ли его изучать?» (Впрочем, Macromedia Dreamweaver 8, которым я обычно пользуюсь, тоже далеко не безгрешен.)

Например, чего стоит такой «перл»:

<font face="Courier">Текст1</font>
<font face="Courier">Текст2</font>
<font face="Courier">Текст3</font>

Вместо

<font face="Courier">Текст1 Текст2 Текст3</font>

Или такой:

<font face="Courier"><font size="3">Текст</font></font>

вместо

<font face="Courier" size="3">Текст</font>

Короче, такие моменты проверяйте.

Третье.

Если открыть хотя бы в Блокноте html-код страницы, мы увидим очень красивый и заботливо отформатированный программой html, ну, чтоб и читался удобнее, и редактировался быстрее. Однако фишка в том, что такой код ещё и грузится медленней. Потому что браузер читает не только код, но все пробелы в нём,  а на это уходит… правильно, время. И трафик.
Так что следующий совет – убираем лишние пробелы из кода. Хоть и понимаю: когда страниц на сайте уже очень больше, чем одна, делать править код нудновато.

Четвёртое.

Комментарии типа

<!--тут таблица для навигации -->

Или ещё какие-нибудь комментарии, то есть, шпаргалки для себя. Напоминаю: хоть на страницу они и не выводятся, но вес имеют! Так что, прежде чем добавлять, стоит задуматься о их нужности вообще и о их же краткости в частности.

Пятое.

О теге <font> я «намекнул» несколькими строками выше. Однако хочется уточнить: если уж прописывать цвет, размер, тип шрифта для текстов, так не лучше ли делать это при помощи css? Риторический вопрос: однозначно лучше! Потому что благодаря css уменьшается размер как каждой страницы, так и суммарный размер сайта.

Шестое.

Что ещё можно удалить из html-кода?

- Высоту таблиц (<table>) и их ячеек (<tr>), прописываемую атрибутом height.

- Лишние пробелы в конце тэга или в середине:

<p>Абзац  </p>,
<p>Текст1    Текст2</p>

- Повтор выравнивания:

<td align="center">
<div align="center">
<center>
<p align="center">Абзац по центру</p>
</center>
</div>
</td>

- Можно убрать кавычки. Потому что в реальности кавычки нужны только в атрибутах alt и href. И в meta-тегах.

Кстати о meta-тегах.

- Слишком длинный список ключевых слов (keywords) и длинное же описание (description) сайта тоже не хорошо. Поисковые сервера и каталоги этого не любят, потому список слов не должен превышать длину в 1000 символов, а описание — 200 символов. Кстати, некоторые поисковики вообще игнорируют такие meta-теги.

- В исходном тексте любой страницы много места занимают имена файлов — вставленные картинки, ссылки на другие страницы сайта. Отягощать сайт, на каждой странице многократно обращаясь к картинке или к странице с одним названием, конечно же, неразумно.

- На страницах много картинок, хранящихся в одной отдельной папке (обычно Images). Простое переименование ее в Im или I существенно уменьшит размеры сайта. Это же касается названий других папок.

- Скрипты очень полезная штуковина с точки зрения добавления сайту возможностей. Например, для организации удобного управления сайтом, для приёма оплаты за услуги или товары, для обратной связи с пользователями…

Но какой смысл размещать на странице часы или календарь?! Для склеротиков? Для тех, кто «после вчерашнего»? Напомню: в правом нижнем углу экрана уже есть часы; если же навести на них курсор, всплывёт подсказка и о нынешней дате – как говорится, разумному достаточно.

Я понимаю: освоив несколько примочек из программирования, от восторга, что, ну, вот, получилось, тотчас хочется поведать о своём успехе миру. Что тут скажешь? Освойте что-нибудь действительно полезное. А снегопад или листопад приятней наблюдать в окно, а не на экране при чтении текста.

К тому же стоит помнить: чем больше скриптов, тем страница тяжелее. Со всеми вытекающими.

А теперь я сам себе буду противоречить. Но это только на первый взгляд.

Иногда для того, чтобы браузер открывал страницу или ее основную часть как можно быстрей (т. е. чтобы посетитель сразу увидел то, зачем пришел) кое-где придется увеличить код страницы.

В первую очередь это касается таблиц, ведь именно на них держится дизайн большинства сайтов. Браузер открывает таблицу только загрузив ее полностью, поэтому лучше разбить основную таблицу на несколько отдельных таблиц. Совет очень действенный и очень широко применяется профессионалами. Ведь сделать это просто, а эффект очевиден. Если вы поинтересуетесь кодом страниц моего сайта, то обнаружите: «шапка» страницы в одной таблице, ссылки на курсы Е. Попова в отдельной, всё остальное – тоже в отдельной.

Ещё о картинках.

Браузеры хранят все загруженные рисунки в особой папке — кэше — и при повторной загрузке рисунков подхватывают их оттуда. Поэтому на разных страницах не рационально использовать одинаковые рисунки из разных папок. Правильный вариант — собрать все изображения в одну папку.

Кстати, обязательно пропишите атрибуты width и height тэга <img>. Только таким образом можно дать браузеру информацию о том, сколько пикселей надо выделить для картинки.

Из-за возможности параллельной закачки картинок в современных браузерах получается, что одна большая картинка в 40 Кб будет грузиться медленнее, чем четыре картинки по 10 Кб. Разрежьте большие картинки и почувствуйте разницу. Режутся картинки в, например, программе Photo Shop. О том, как это делается на практике (и о многом другом) подробно рассказывается здесь.

Баннеры и счетчики, загружаемые с других сайтов.

Серверы, с которых они загружаются, часто медленны сами по себе, да к тому же перегружены. Выход в том, чтобы или отказаться от таких «довесков» вовсе или ограничиться их количеством. (Кстати, для чего несколько счётчиков посещаемости, если на них одна и та же информация?)

Вот, в общем-то, и всё, что я хотел рассказать об ускорении web-страниц. Согласитесь, ничего сложного в этом нет. Однако, проделав даже такие нехитрые манипуляции со страницами своего web-ресурса, вы добьетесь весьма ощутимых (и приятных) результатов

Успехов.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Новое на сайте

Другие статьи...

Видеокурсы

Другие видеокурсы >>>

Скачать книги

Другие книги...

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Разделы Сайта