Все статьи

Размер страницы имеет значение. Следующая страница будет подана через 10 секунд

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

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

Критерии высококачественного сайта

1. Полезная, качественная, своевременная и достоверная информация на сайте (задача для копирайтеров и редакторов сайта).
2. Наличие надёжного круглосуточного доступа к сайту (задача для хостинга).
3. Комфортная, удобная навигация по сайту (задача для дизайнеров и программистов).

Например, Вам, как пользователю Интернета, очень нравится?

• когда звоните в интернет-магазин и Вам сообщают, что товара нет или цена на него в 1,5 раза выше указанной на сайте;
• когда говорят, что вся информация размещена на сайте компании, но он оказывается недоступен;
• когда при навигации по сайту, приходится тратить по 20 секунд на загрузку каждой страницы.

Уверены, что с похожими проблемами Вы сталкиваетесь довольно часто. Не повторяйте ошибок других владельцев сайтов — делайте качественные сайты! Уберегите посетителей своих сайтов хотя бы от одной из проблем — от длительного ожидания загрузки страницы.

Известно, комфортное время ожидания загрузки страницы сайта — 1-3 секунды. Более длительные задержки в получении запрошенной информации не делают навигацию по сайту комфортной для посетителя.

Проблема долгой загрузки страниц актуальна для сайтов с большими объёмами информации и стоит особенно остро для пользователей с низкоскоростным подключением к Интернету.

Когда стоит задуматься о размерах страниц сайта

1. Целевую аудиторию сайта составляют пользователи, имеющие низкоскоростное подключение к Интернету

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

Например, рассмотрим ситуацию:

• посетитель сайта подключен к Интернету через модем. Скорость подключения 54 Кбит/сек (не худшая скорость для модемов).
• большинство страниц сайта размером более 80 КБ*.

При подобных условиях подключения пользователя страница в 80 КБ будет грузиться секунд 10. Заметим, что при подключении 54 Кбит/сек реальная скорость передачи может быть в 1,5 раза ниже! Т. е. на ожидание загрузки страницы сайта посетителю потребуется 15 секунд. Согласитесь, что 10 секунд ожидания — это уже было перебором.

Чем не повод пойти навстречу своей аудитории, сделав сайт для неё более комфортным и доступным?

* Размер страницы сайта, не учитывая загрузку картинок и фотографий.

2. Страницы сайта имеют большой размер

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

Например, рассмотрим ситуацию:

• страницы сайта размером более 200 КБ. Подобный размер страниц на сайтах — это не редкость (проверьте на www.yandex.ru, www.rbc.ru, www.top4top.ru и других популярных ресурсах).
• посетитель сайта подключен к Интернету со скоростью 128 Кбит/сек.

При подобных условиях страница сайта в 200 КБ будет грузиться более 10 секунд, что в три раза дольше времени комфортного ожидания.

Чем не повод пойти навстречу своей аудитории, сделав сайт для неё более комфортным и доступным?

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

Позаботившись о посетителях сайта, уменьшив размер страниц, Вы можете сократить передаваемый трафик в несколько раз и существенно уменьшить время ожидания загрузки сайта. Дополнительно к этому, пользователь сэкономит не только своё время, но и деньги на оплату Интернета (в регионах интернет-трафик недешёвый).

Как максимально уменьшить время загрузки сайта? Чтобы выяснить это, необходимо понять, что же вносит основной вклад в подобные

Основные составляющие времени загрузки сайта

1. Обработка запроса сервером

Любые обращения к страницам сайта передаются на сервер. Сервер, получив запрос, создаёт и подготавливает к передаче в браузер пользователя соответствующую страницу. Большинство современных сайтов имеют систему управления. Скрипты, обрабатывающие запросы, и базы данных, хранящие информацию. Страницы подобных сайтов обычно создаются «на лету» (динамические страницы). Это требует времени.

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

От чего зависит время обработки запроса сервером:

1. от настройки сервера хостинг-провайдера;
2. от загруженности сервера;
3. от «чистоты» кода. Используемого языка программирования, качества реализации алгоритмов, применения тяжёлых шаблонизаторов и т. п. надстроек.

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

Определяем время генерации страницы:

Для отладки работоспособности сайта и выявления узких участков написано много полезных скриптов, один из которых class.profiler.php.

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

Допустим, вы желаете узнать, сколько времени требуется серверу на генерацию главной страницы сайта. При обращении к ней, обычно, вызывается скрипт index.php, лежащий в корне веб-сайта.

Допишите в файле index.php несложный код PHP:

1. В самом верху скрипта запомните время, в которое поступил запрос к странице, добавив код <?php $start_time=time(); ?>
2. Далее, оставьте основной код страницы и только в самом конце добавьте код, вычисляющий затраченное время <?php $gen_time=time()-$start_time; echo "<p>Время генерации страницы: ".$gen_time." сек.</p>"; ?>

В самом низу страницы вы увидите уведомление, например, «Время генерации страницы: 1 сек.». Если вы увидите времена более 1 секунды, то это повод задуматься: соответствуют ли подобные временные затраты сложности сайта?

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

Уменьшаем время генерации страницы:

Если вы заметили, что время генерации страниц на Вашем сайте ощутимо велико (более 3-5 секунд), то советуем обратиться к специалистам — «сисадминам» и программистам.

• Системный администратор сможет разобраться с загруженностью сервера и принять решение о необходимости смены хостинга или покупки нового более мощного серверного оборудования.
• Программист выявит «узкие» места в скриптах сайта и в случае необходимости оптимизирует их работу.

Страница сгенерирована сервером и подготовлена к отправке пользователю. Переходим к следующему, наиболее жадному ко времени этапу.

2. Передача данных в браузер пользователя

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

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

Определяем размер страницы сайта:

Узнать сколько весит страница сайта совсем нетрудно.

1. Зайдите на сайт.
2. Дождитесь загрузки страницы сайта.
3. Затем, выберите в своём браузере меню «Файл» подменю «Сохранить как…».
4. В открывшемся диалоговом окне сохранения файла выберите в списке «Тип файла»: «Веб-страница, полностью».
5. Нажмите «Сохранить».

При сохранении данных на компьютере будет создан один файл с кодом HTML (назовём его index.html) и директория (условно назовём её index_files).

В файле index.html вы увидите вперемешку с кодом HTML текст страницы. Хорошо, если сохранённая страница будет весить не более 50 КБ. Именно этот объем данных передаётся в браузер в первую очередь.

В директории index_files вы увидите всё подгружаемые медиа-элементы страницы: картинки, файлы скриптов, файлы стилей CSS, фреймы и т. п. Именно картинки дают существенную прибавку к весу страницы. Не случайно, пользователи Интернета часто отключают в браузере загрузку картинок. Это позволяет существенно экономить на платном трафике.

Вы уже посмотрели, сколько весит директория index_files? Оптимальным размером всех подгружаемых файлов можно считать 50-100 КБ.

Определяем время передачи данных:

Точно определить время, потраченное на передачу данных, достаточно сложно.

Грубую оценку можно сделать из расчёта отношения размера переданной информации к скорости подключения или засекая время по часам.

Более точную оценку можно сделать, используя JavaScript.

Как уменьшить время передачи данных?

Есть два способа минимизации времени на передачу данных:

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

Если первое нам почти неподвластно, то оптимизировать размер передаваемых данных не только можно, но и нужно.

Уменьшаем размер передаваемых данных:

• Оцените дизайн своего сайта. Не перегружен ли он фотографиями и иллюстрациями.
• Внимательно просмотрите все тексты на странице. Исправьте ошибки. Дайте проверить профессиональным редакторам. Они смогут сделать текст короче и эффективнее.
• Проверьте, корректно ли оформлены файлы стилей CSS и JavaScript. Нет ли в них заведомо избыточной информации.
• Каждую фотографию или картинку перед размещением на сайте необходимо оптимизировать «под веб». Без предварительной подготовки одна фотография может весить более 10 МБ. Это очень много по меркам Интернета! Поэтому, для размещения подобных объёмных изображений необходимо создавать как минимум два файла:
  • Файл «превью» — изображение уменьшенных размеров, которое можно смело размещать на странице сайта с соответствующими комментариями и текстами. Например, «превью» размером 100x100 px весит порядка 5 КБ. На одной странице можно разместить десяток подобных «превью» — это будет вполне приемлемым решением.
  • Файл «основное изображение» — увеличенное изображения в деталях, которое должно быть оптимизировано под веб и весить в разумных пределах! Например, «основное изображение» размером 700x700 px весит прядка 160 КБ. Файл с увеличенным изображением открывается по клику на «превью». Подобная реализация хорошо прижилась в фотогалереях и архивах.
• Не стремитесь вывести сразу 50 фотографий на одной странице. Попробуйте сами дождаться загрузки подобной страницы сайта.
• Используйте, по возможности, сжатие передаваемых данных с помощью gzip.

Остановимся поподробнее на использовании механизма сжатия данных с помощью встроенной возможности gzip.

Сжатие передаваемых данных с помощью gzip

Сжатие передаваемой информации один их эффективных способов уменьшить трафик от сервера к компьютеру пользователя. Сжимать следует только текстовые данные. Для этого очень хорошо подходит текстовый контент с кодом HTML, который при сжатии может быть уменьшен на порядок. Т. е. код HTML вместе с текстом размером 100 КБ легко сжимается до 10-15 КБ. Пересылка значительных объёмов информации может быть существенно улучшена.

Необходимо учесть:

• что сжатие данных происходит «на лету» одновременно с генерацией страницы и подготовкой к отправке пользователю. Подобный процесс очень требователен к ресурсам веб-сервера и может существенно снизить его производительность. Поэтому, принимать решение о применение подобного механизма сжатия пересылаемых данных стоить только после консультаций со специалистами.
• что отсылать сжатые данные необходимо только в ответ тем браузерам, которые умеют с ними работать. Для этого браузеры, способные правильно обрабатывать сжатые потоки данных, вместе с запросом к серверу отправляют дополнительную информацию, сообщающую об их возможностях. Отсылают следующий заголовок: "Accept-Encoding: gzip,deflate"

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

Сжатый контент от сервера передаётся в браузер пользователя. Браузер, распаковывает полученные данные и обычным образом отображает пользователю.

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

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

Пусть пользователи сайтов будут довольны их качеством, надёжностью и удобством.

Ещё рекомендуем прочитать:

Зачем нужен сайт? Всё о пользе создания своего сайта
Разработчиков сайта Министерства обороны России подозревают в крупных хищениях
Создание простых сайтов
За создание сайта о культурном наследии России обещают 76 млн рублей
За апгрейд сайта госзакупок обещают 26 млн долларов

Внимание!
Цитирование авторских материалов допускается только при условии прямой гиперссылки на «Introweb.ru»!

К списку статей