Насколько важна скорость работы сайта и как её увеличить?
Сейчас я сообщу ужасную для многих владельцев интернет-платформ новость – согласно новейшим исследованиям 57% посетителей покинут вашу страницу, если скорость загрузки превысит 3 секунды. Чуть дольше согласны ждать владельцы мобильных устройств, но не намного. О какой конверсии можно говорить, если больше половины покупателей уже нет? О том, как проверить скорость работы сайта и что делать, если она недостаточна, поговорим со мной — Иваном Бурыкиным. Поехали…
Узнать скорость сайта можно, воспользовавшись сервисом от Google PageSpeed Insights. Меряет правда не в секундах, а в баллах эффективности от 1 до 100, зато сразу предлагает варианты по ускорению.
- Анализ скорости работы сайта можно произвести с помощью платформы Pingdom Tools. Показывает количество обращений к серверу за каждым видом контента (стиль, скрипты, изображения…) и соответственно — время загрузки по каждому виду. Сразу становиться видно, что именно вас тормозит.
- Проверка скорости загрузки сайта Web Page Analyzer — простой, но эффективный инструмент оценки загружаемого контента.
- Тест скорости сайта из разных частей света можно пройти тут.
- Измерить скорость сайта в часы наибольшей загруженности трафика можно с помощью сервиса Loadimpact. Он создает небольшую DDOS атаку на ваш ресурс, эмитируя десятки виртуальных пользователей. Заодно проверяет устойчивость платформы и увеличивает её посещаемость, что приветствуется поисковиками при сортировке выдачи. Только не увлекайтесь слишком, а ваш сайт может на время отключится!
Теперь вы точно знаете свою быстроту, что с этим делать?
Если у вас выходит гораздо больше, чем 3 секунды, например 10-12. То, может пригодиться такая элементарная хитрость, как использование в качестве заставки прогресс-бара (индикатора загрузки). Любая динамика положительно воспринимается посетителем и он готов ждать значительно дольше, как показали исследования — до 38 секунд. Уже победа! С остальным придется попотеть…
-
- Уменьшаем размер страниц
Чем больше «вес», тем всё работает медленнее – это аксиома. Значит, нам надо всё сжать в интернет протоколе HTTP используя всем известные технологии zip и gzip. Пользоваться ими умеют даже начинающие юзеры. Чтобы включить возможность сжатия необходимо связаться с хостинг-провайдером и попросить администратора сервиса включить такую опцию для вашего протокола HTTP. После того как вы всё сжали и админ подтвердил, что опция включена, проверьте степень сжатия вот тут. Это позволит ужимать до половины «веса» страницы, соответственно возрастает и быстродействие. - Убираем «тяжесть» графики
Внимательно посмотрите, в каком формате выложены фотографии на ваших страницах. Если они выложены в формате PNG, то конвертируйте их в JPEG, после чего сжимайте их. Так фото весом 1 МБ легко сжимается до 140 КБ. И хотя правоверные от PNG кричат о том, что мы теряем при этом качество, но я этого на практике не заметил. К тому же — это ведь легко самим посмотреть, а уж потом применять. И да, PNG позволяет больше, например, эффект прозрачности. Но стоит ли визуальный эффект замедления? Думается, что нет.
Ещё одним шагом для экономии может стать уменьшение качества изображений в JPEG. Так снижение на 50% — практически незаметно для взгляда, а вот экономия размера будет значительная.
Очищайте фото от не нужного цифрового мусора. Вы даже не представляете, сколько его там может быть, включая данные гео-локации и прочего, включая комментарии к нему. Очистку можно произвести здесь, заодно посмотрите, как можно улучшать изображение при необходимости, но за «весом» следим и выбираем оптимальное сочетание. - Упрощаем и перемещаем JavaScript и CSS
Часто на сайтах применяются технологии и большие библиотеки JavaScript и CSS. И многие просто не знают, что существует возможность их упростить и тем самым облегчить наши страницы. Это можно сделать онлайн. Выигрыш даже будет больше, чем от сжатия изображений. Еще одним способом может стать перемещение элементов кода JavaScript и CSS в самый конец загрузки, таким образом, они загрузятся позднее, но посетитель уже увидит текст и функционал ресурса, что тоже немало. - Используем системные шрифты
Если для вас не принципиально использование уникальных и часто платных шрифтов. То используя распространенные типографские наборы, которые уже стоят на каждом компьютере и мобильном устройстве, вы существенно экономите время для загрузки контента. Не всегда стоит увлекаться типографикой, ей можно и поступиться, временами.
- Уменьшаем размер страниц
Вы никогда не задумывались, почему главная страница Google выглядит так аскетично?
Зато грузиться почти мгновенно! Да для того, чтобы экономить на количестве запросов отправляемых браузерами. Не изображений – нет и запроса. Нет элементов JavaScript – не будет команды на открытие. Различные элементы CSS и JavaScript склеены? Команда будет лишь одна. При неоднократном посещении ресурса срабатывает кеш-память браузера, и загрузка ускоряется в разы!
Ну да, Google может позволить себе аскезу, его и так все знают. Можете ли вы сделать подобное, очень сомневаюсь, мы вынуждены завлекать дизайном и элегантной графикой. А потому попросите вашего администратора хостинга включить функцию кэширования памяти. При повторном заходе посетителя скорость уже увеличится. Мелочь, но пренебрегать не стоит.
Склеивайте и объединяйте файлы CSS и JavaScript, количество браузерных вопросов сократится, как и время. Для этого есть специальные прикладные программы, онлайн можно потренироваться тут.
Увеличить скорость сайта реально, если на вашей платформе используются множество небольших фото, иконок, маленьких рисунков… Их тоже можно объединить в единый спрайт- CSS. Найти программу для этого несложно, в поисковиках она так и называется.
Да, всё это выглядит трудно для применения. Но, как только вы узнаете, что увеличение времени загрузки всего на 1 секунду уменьшает количество просмотров на 11%, степень удовлетворенности посетителя снижается на 16%, а конверсия на 7%. То, наверное, вы озаботитесь этой проблемой, ведь это прямые потери вашего бизнеса. Так что вызываете вашего сисадмина и вручайте ему эту статью и пусть работает, а как проверить — вы уже знаете.
До связи, Иван.