Способы решения проблем, связанных со скоростью загрузки сайта
Как известно, быстрые сайты пользуются популярностью у посетителей и приносят своему владельцу больше финансовой пользы. С этим утверждением согласны все и доказательства здесь не нужны. При этом не каждый заинтересованный человек знает эффективные способы ускорения работы сайта. На какие факторы следует обращать внимание в первую очередь?
Любой сайтовладелец Калининграда, сталкивающийся с вопросами скорости загрузки, желает узнать универсальный «рецепт» решения этой проблемы. Однако его не существует в принципе, поскольку каждый ресурс имеет свои особенности, которые в совокупности и определяют набор характеристик (в их число входит и загрузочная скорость). Между тем, специалисты настаивают на существовании методов, которые позволят на длительный период позабыть об этой проблеме. Что же необходимо предпринять для получения желаемого эффекта?
| Для начала необходимо узнать реальную скорость загрузки сайта - с этой целью рекомендуется составить для какой-либо страницы (лучше главной) соответствующую диаграмму. Выполнить это можно посредством использования специальных сервисов, либо средствами расширений браузера. |
Правильно составленная диаграмма позволит детально проанализировать особенности загрузки всех компонентов, находящихся на странице. При этом также будут обозначены временные промежутки, которые затрачивались на различные стадии загрузки. К примеру, вы сможете подробно проследить за процессом установки контакта с сервером или получения IP-адреса.
Ключевым информативным компонентом диаграммы загрузки считается промежуток времени, в течение которого сервер отвечает на запрос HTML-страниц. Помимо этого, внимание уделяется времени появления первых элементов сайта и загрузке его последнего компонента. Идентификация этих параметров на диаграмме загрузки указывает на то, что вы находитесь на правильном пути, можете смело переходить к следующим действиям, о которых мы поговорим позже.
Пять основных факторов, влияющих на скорость сайта
Чтобы ускорить реакцию сайта на действия пользователя, рекомендуется поработать со следующими параметрами:
- Временной промежуток, затрачиваемый на загрузку первого объекта
- Временной промежуток, затрачиваемый на отображение всей страницы
- Объем информации, загружаемой в промежутке между появлением первого и последнего элементов страницы
- Период, в течение которого страница загружается полностью
- Процессы, происходящие после загрузки страницы
Загрузка HTML-страницы
Для пользователей наиболее значимым параметром является загрузка самой страницы. Возникновение даже малейших проблем с ним чревато серьезными проблемами. А потому зачастую ускорение сайта расценивают с позиции обеспечения своевременной реакции со стороны сервера. Получение IP-адреса осуществляется в течение 60-250 мс, а на стыковку с сервером затрачивается порядка 25-95 мс. Впрочем, даже при безупречных настройках сервера пользователь не намерен тратить время на ожидание - полностью страница должна загружаться не дольше 500 мс. При этом следует учитывать, что порядка 100 мс из них потратятся на процесс доставки данных по сети.
Таким образом, на получение отклика от сервера остается не более 350 мс (за этот период страница должна быть полностью сгенерирована на стороне сервера). Как показывает практика, даже при самых плохих условиях время, затрачиваемое на ожидание отклика от сервера, для основной части запросов не должно переваливать за 200 мс. Проверяя скорость сайта, сразу старайтесь оценивать скорость получения пользователями HTML-страницы. Превышение значения 800 мс указывает на необходимость проведения восстановительных работ в этом месте.
Время загрузки первого элемента страницы
Здесь все зависит от скорости предыдущего параметра. Однако после настройки адекватности реакции сервера, перед появлением первого элемента страницы в браузере может появляться «белый экран». Было бы неплохо сократить этот этап по 1,3 секунд. В противном случае придется заниматься анализом всего процесса загрузки.
То есть, необходимо составить перечень данных, загружаемых до появления первого элемента на странице с указанием места их начального расположения. Основную часть JavaScript рекомендуется отправить в подвал страницы. Далее следует заняться настройкой загрузки отложенного либо асинхронного типа. Не исключено, что некоторые компоненты стилей можно исключить из списка первичной загрузки страницы: многие из них применяются лишь на выборочных страницах. Помимо этого, специалисты советуют прибегать к практике архивирования файлов для сокращения их объема - впоследствии это позволит ускорить их загрузку с сервера. Прилежно выполнив все эти условия, вы сможете существенно сократить период «белого экрана». Это станет достаточно весомым достижением, поскольку в большинстве случаев пользователи отказываются от посещения сайта именно из-за чрезмерного превышения этого интервала.
Количество информации до загрузки всех компонентов страницы
Настало время уделить внимание основной процедуре загрузки. На этом этапе нам придется повозиться с объемными картинками, всевозможными анимационными элементами и сторонними скриптами (рекламными баннерами, счетчиками и прочими объектами). Они несут в себе массу полезных функций, но одновременно существенно тормозят скорость загрузки. Так, на отображение каждого виджета затрачивается порядка 3% конверсии.
Оптимизацию этого параметра можно начинать с работы с изображениями (применяя специальные решения для снижения их массы и сохранения начального качества). Также следует позаботиться об объединении маленьких картинок в спрайты и сведении к минимуму размеров JavaScript-библиотек. Как показывает практика, превосходных результатов на этом этапе удается добиться использование сервисов CDN для сайта. Не стоит жадничать 50-100 мс, необходимыми для определения месторасположения сервера загрузки статических файлов, ведь в итоге он позволит мгновенно загружать все файлы.
Полная загрузка сайта
На этом этапе можно проанализировать уже проделанную работу и оценить достигнутые результаты. Отлично, если вам удалось сократить загрузку сайта до 4 секунд - этого вполне достаточно для прекращения оптимизационных работ. В противном случае придется продолжить, для достижения большей эффективности подключив ряд дополнительных мер. Так, осуществляется ревизия всех загружаемых на сайте скриптов (проверяется степень их полезности, рассматривается возможность их удаления или применения отложенной загрузки), загрузка картинок переводится в «ленивый» режим.
Применяется отсрочка загрузки всех элементов, которые не являются для пользователя объектами первостепенной важности. Для посетителя важно на начальном этапе загрузки увидеть появление хотя бы какого-нибудь функционала. Было бы неплохо, если бы первые элементы подготавливали его к появлению всех «фишек» сайта.
Процессы, происходящие после загрузки сайта
Итак, вы добились того, что загрузка полноценной страницы входит в рамки отведенных для нее четырех секунд. Пользователь получает полноценный функционал, готовый к дальнейшему взаимодействию. Однако «за кадром» остается достаточное количество недогруженных данных, с которыми тоже нужно что-то делать. Если они весьма объемны, можно составить план загрузки - строгая последовательность появления компонентов сделает загрузку логически функциональной. Так, большой текстовый материал вначале можно снабдить эффектными картинками, а после загрузить компоненты второй степени важности (комментариями, ссылками и т.д.).
Тщательная проработка пяти описанных выше параметров позволит эффективно выявить основные факторы загрузки сайта, поможет разработать план по устранению проблем со скоростью. Собственно, методы решения подобных задач мы и обсудим в оставшейся части материала.
Время расстояния
Понятие «скорость» скрывает в себе множество технических особенностей. Чтобы разобраться в нем, приведем несложный пример. Так, одно изображение на странице весит порядка 200 Кб - в сравнении с объемами серверов в сотни гигабайт, это сущие пустяки. Тем не менее, на загрузку этого элемента в браузер уходит около 0,1 секунды (при скорости передачи 20 Мбит/с). Для пользователей мобильных устройств время загрузки увеличивается до 1 секунды (при скорости передачи 2 Мбит/с). Десяток таких картинок, размещенных на странице, будут стоить пользователю мобильного девайса целых десяти секунд жизни!
Возможно, для кого-то такой объем времени не критичен или сайт не ориентирован на мобильных пользователей. Однако, помимо скорости передачи данных, также следует учитывать расстояние, которое информации приходится преодолевать при каждом обращении к серверу. На получение одного объекта «времени расстояния» тратится дважды (на языке специалистов это звучит, как «пинг»). То есть, браузер передает серверу информацию о требуемом ему файле, после чего сервер отправляет его.
Наглядно разобраться в этом алгоритме позволит представление записи длинного перечня по междугородней телефонной линии. В условиях неудовлетворительного качества связи вам приходится каждую позицию зафиксировать в своем блокноте и чуть ли не по буквам передать собеседнику на другом конце провода. На передачу большого количества позиций уйдет немало времени. Современные веб-ресурсы обладают достаточным количеством таких пунктов: среднестатистическая страница может содержать на себе до 150 объектов, для каждого из которых в обязательном порядке проводится описанная выше проверка.
Размер имеет значение
Емкость страницы в среднем составляет 3 Мб. То есть, даже если полностью исключить проблему с «временем расстояния», пользователи смогут любоваться содержимым страницы не ранее двух секунд. В итоге сайт вряд ли уложится в установленные регламентом четыре секунды ожидания. С пользователями мобильных устройств дело обстоит еще печальнее.
Устранить проблему в этом случае можно путем оптимизации размера. Тексты подвергаются сжатию (опция активируется в хостинг-аккаунте), а графические объекты можно подвергнуть обработке посредством таких пакетных решений, как Image Catalyst. Для увеличенного количества картинок (свыше 100) специалисты рекомендуют применять специальные плагины, позволяющие осуществлять отложенную загрузку.
Отдельное внимание уделяется размеру шрифтов. Необходимо понимать, что «вес» каждого отдельного шрифта сопоставим с массой десяти изображений. Для уменьшения размера шрифта рекомендуется исключить из него ненужные символы.
Сторонние компоненты сайта
На скорость сайта, помимо указанных выше проблем, также влияют различные виджеты, компоненты сторонних ресурсов. Загрузка каждого подобного блока сопровождается добавлением к домену DNS-запроса и увеличением времени обращения к серверу. Тормозить загрузку страниц подобные компоненты также могут по причине необходимости рендеринга областей, расположенных за ними. Порой задержка скорости загрузки может достигать 50% общего «веса» страницы.
Задержки, спровоцированные загрузками сторонних компонентов, «съедают» порядка 3% конверсии. При отсутствии эффективности подобных виджетов в плане монетизации сайта, их рекомендуется удалять в срочном порядке.
Прочие методы ускорения сайта
Инструмент PageSpeed Insights, разработанный компанией Google, предлагает ускорить загрузку страниц, используя данные полного анализа сайта. Как отмечают специалисты, сервис достаточно эффективен даже при необходимости устранения серьезных проблем со скоростью. Подробно рассмотрим алгоритм действий в случае обращения к этому инструменту.
Оптимальный контроль за скоростью сайта предполагает наличие у вас грамотных вариантов решения любых текущих проблем с минимальными затратами и высокой результативностью. Так, проблему с расстоянием можно устранить путем изменения расположения серверов либо использования сети кэширующих серверов. К слову, не станет лишним привлечение любого проксирующего или кэширующего инструмента, предназначенного для уменьшения сетевых расстояний.
Что касается сетевых расстояний, то, к примеру, от Владивостока до Москвы оно ориентировочно составит 120 мс, а от Америки до столицы РФ - порядка 140 мс. Собственно, это и объясняет низкую скорость загрузки сайтов, созданных за рубежом - создание быстрого ресурса, ориентированного на мировую аудиторию, считается почти невыполнимой в техническом плане задачей. При этом она предполагает существенные финансовые вложения, которые вряд ли окупятся. А вот внутри страны сделать быстрый сайт очень даже возможно.
Проблема размера решается просто: необходимо разработать оптимальную стратегию обновления, способствующую минимизации размера данных сайта (текстов, картинок, скриптов, таблиц стилей). Любой, даже самый мизерный объем дополнительной информации влечет за собой удваивание задержки «времени расстояния». Снизить воздействие этого фактора позволит регулярное обновление данных, обеспечивающее оптимизацию и сжатие файлов. Вполне приемлемым вариантом может стать автоматизация этого процесса.
Виджеты на страницах сайта следует детально проанализировать и систематизировать. При выявлении ненужных и потенциально вредных для скорости загрузки элементов, принимается решение об их удалении.
Комплексный подход и последовательность выполнения действий, направленных на ускорение загрузки страниц сайта, способны приносить вполне достойные результаты, в том числе и положительно влиять на продвижение вашего сайта. При этом не стоит забывать о юзабилити сайта, ведь в первую очередь он создан для удовлетворения потребностей пользователей. Чтобы проанализировать скорость загрузки в браузерах реальных пользователей, следует использовать соответствующие счетчики. 
Команда 39saitov.ru, 26.04.2016
|
Мы написали этот пост на совесть. Будем благодарны, если вы поделитесь им.
|