Увеличение скорости загрузки страницы

Вы наверно уже подключены к Интернету? Наверно глупый вопрос - если вы читаете статью с названием "Увеличение скорости загрузки страницы", то у вас есть не только Интернет, но и возможно своя страничка в сети. И вас интересует, почему страница грузится 20-30 и более секунд, против ожидаемых 8 cек.

Любой пользователь сети Интернет подключен к одному из провайдеров, стартовые условия у которых практически одинаковые т.к. все мы выросли в одной стране, в которой линии связи Телекомов составляют 99% от всех существующих. А дальше уже кому как повезет - выделенка или стандарные 32,6 и еще блокиратор вдобавок. Но несмотря на все это страница на экране монитора может грузится быстрее, а может медленнее.

Рассмотрим два варианта: как сделать, чтобы страницы загружались быстрее на вашем экране и как сделать, чтобы ускорить загрузку уже ваших страниц на экране пользователя.

Первый вариант: загрузка страницы на вашем экране.

Начнем с браузера. 90% пользователей применяют IE. К нему привыкли и менять его не хочется. Не спорю IE хороший браузер, но некоторые его версии при отрытии 10-15 окон тормозят не только себя, но и всю систему. Это следует учитывать с самого начала и если вы входите в Интернет после продолжительной работы на компьютере, то лучше его перезагрузить.

Итак вы уже в сети. Загрузите вашу любимую страницу. Обратите внимание на графику. Безусловно, она служит украшением страницы, но в это же время значительно тормозит ее загрузку, т.к. ее объем обычно составляет 30-50кб.

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

Кроме рекламмы. На следующей странице грузятся уже другие банеры опять по 30-50кб. и т.д. Из этого можно сделать вывод, что убрав рекламу страница будет грузиться гораздо быстрее.

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

Но пользователь не может исключить их самостоятельно из станицы, находящейся на сервере. Можно только запретить их выполнение на вашем компьютере. Для этого есть специальные программы, которые можно найти и на нашем сайте.

При применении данных программ на моем компьютере время загрузки страниц сокращается приблизительно на 30%, чтобы было понятнее, если эти проценты выразить в мегабайтах, то за месяц набежит около 7мб съэкономленного трафика, а это уже и какие то деньги. Еще бы, если средний размер страницы составляет 60-70кб, то при обрезки банеров и скриптов он уменьшается до 40-45кб.

Хотя можно конечно было бы пойти и другим путем - отключить графику и скрипты в самом браузере, но в этом случае страницы выглядели бы ну очень убого, хотя как говорят "на вкус и цвет..."

Второй вариант: загрузка вашей страницы на экране пользователя.

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

Вы делаете сайт, конечно он будет самый...самый... самый посещаемый. А посещаемым он будет в том числе если он будет и быстрым. Быстрым не в плане высокоскоростного хостинга, а в плане четкой организации структуры сайта, удобной навигации. Именно отсюда начинается любой сайт, именно здесь можно и нужно использовать возможность создать сайт или страницу, чтобы он нравился не только вам, но и посетителям, а от того насколько быстро он будет загружаться, будет зависеть первое мнение о нем. Встечают у нас по одежке.

Ниже приведены несколько советов которые, на наш взгляд, помогут не только в создании Web сайта, но и в успешной и быстрой его работе.

Размер страницы. Скорость загрузки страницы на экране пользователя напрямую зависит от размера страницы. Давайте попробуем разобраться, что же входит в "размер страницы":

- HTML код. Обычно он занимает около 4-6 кб.

- графика, необходимая для оформления страницы. На наш взгляд ее объем не должен превышать 10 кб.

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

- рекламные банеры. При их использовании этот пункт будет самым "тяжелым", поэтому хорошо подумайте стоит ли их устанавливать. Дело в том, что из 1000 показов ваших банерев на ваш сайт прийдет всего 3-4 человека. И если у вас посещаемость гораздо меньше 100 хостов в сутки стоит повременить с размещением банерной рекламы. Если же вы ее все таки используете, попробуйте ограничить ее размер вместе со скриптами и графикой 30 кб. учитывая то, что при пользовании бесплатным (хотя бесплатного ничего не бывает) хостиногом его реклама вставляется тоже.

- текст или текстовое содержание страницы. Естественно страницу нужно заполнить и желательно при этом ограничиться 10 кб. При большом тексте лучше его разбить на несколько частей - если содержимое будет интересным, то посетитель просмотрит все, увеличив тем самый ваш рейтинг и количество показов банеров. Если же посетителю что-то не понравится, то его не будет раздражать долгая загрузка страницы и скорее всего он просмотрит еще несколько.

Итого оптимальный размер страницы не должен превышать 60 кб.

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

Это же касается и изображений. Если вы вставили в страницу большое изображение, то для ускорения загрузки его было бы целесообразней разрезать на несколько частей. Для этого можно воспользоваться популярной программаой PictureDicer или другой аналогичной, которая не только правильно разрежет ваше изображение, но и сформируют код для вставки разрезанных участков в страницу.

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

Вам будет значительно легче и удобнее управлять сайтом и вносить в него изменения (при изменении всего одного файла изменения произойдут на всех страницах сайта), а компьютер пользователя будет кэшировать загружаемые скрипты (при просмотре следующих страниц загружать их уже не из удаленного сервера, а из своего кэша). Как все это работает. Вы создаете (или используете уже готовые) файлы script (например soft.js и menu.js) и сохраняете их в отдельной папке (например link). При использовании готовых файлов скриптов их конечно следует изменить под конкретный сайт.

В дальнейшем при их использовании следует вставить строчку <SCRIPT language=javascript src="link/soft.js"> </SCRIPT> между тэгами <head> ...</head>. Этот скрипт содержит команды управления и определяет выполнение .js файла. Теперь осталось в отведенное на странице месте для меню вставить скрипт <script language=javascript src="link/menu.js"></script>. И так на всех страницах. Все. Те же самые операции можно повторить с повторяющиммся текстом, изображениями и т.д.

Стили. При создании страниц вы естественно размечаете и обрабатываете текст. Вносите дополнительные параграфы, изменяете размер и тип шрифта, делаете выделения, выравнивания и т.д. При этом страница прибретает более симпатичный вид и одновременно увеличивается в размерах.Чтобы этого не произошло следует использовать стили CSS.

Оптимизация. От нее тоже ни куда не денешься. Начинать следует с графики. Естественно для этого понадобятся специальные программы. Их много и я думаю, вы без особого труда их найдете. Я же советую остановиться на программе Macromedia Fireworks. У нее довольно мощный и удобный оптимизатор графики. После оптимизации размер файла изображения уменьшается на 20-30%, а часто и в 3-4 раза. Для примера, размер шести рисунков входящих в тело этой статьи до оптимизации составлял 38,8кб, а после - всего 10,3 (разница составляет приблизительно 7 сек. при загрузке).

Когда страница готова, ее перед размещением на сервере следует тоже оптимизировать. После перебора нескольких программ оптимизиции HTML кода страницы я остановился на программе Advanced HTML Optimizer, которая работает корректно и качественно, а после оптимизации размер HTML файла уменьшается в среднем на 20%.

Сжатие. При сжатии страницы ее размер может уменьшиться в несколько раз. Этот метод хорошо применять в случаях применения длинного текста в теле страницы. При сжатии происходит кодирование исходного кода страницы, при этом сам ее размер значительно уменьшается.

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

На самом же деле все выглядет иначе. Что по вашему лучше для пользователя: ждать несколько минут пока загрузится страница, чтобы прочесть ее содержимое или быстрая, в течении нескольких секунд загрузка? Код же при желании можно посмотреть на главной странице сайта, она как правило небольшая. Если вам интересен этот метод - присмотритесь к программе Web Encrypt 2.2

Заключение.
Все вышеперечисленные способы если не значительно, то довольно ощутимо ускоряют загрузку страниц. Возможно некоторые из них окажутся спорными. Но автор этой статьи и не претендует на абсолютную точность - его цель разобраться в механизме уменьшения размера страницы и ускорения ее загрузки.

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

ma3ca

<< назад...