Скорость загрузки сайта напрямую влияет на поведенческие факторы ваших пользователей - они не любят долго ждать. На основе аналитики поисковых сервисов, при ожидании более 4 секунд только половина потенциальных посетителей останется на Вашем сайте, более 8 секунд - только четверть. Более того поисковые системы учитывают скорость загрузки сайта при распределении мест в топе. Выходит, что чем быстрее загрузится Ваш сайт тем больше пользователей зайдет на сайт и тем больше пользователей совершат на нем целевое действие - оставят заявку, купят товар, воспользуются вашей услугой. Таким образом скорость загрузки сайта напрямую влияет на его конверсию.
Стоит отметить, что есть очень хороший сервис от компании Google, который позволяет оценить скорость загрузки Вашего сайта для компьютеров и мобильных устройств и дать Вам различные подсказки, Lighthouse. Вы можете воспользоваться Lighthouse онлайн через Page Speed Insights или через браузер Google Chrome в инспекторе во вкладке Audits. Если Вы когда-нибудь пробовали оценить свой сайт через этот сервис, то вероятно могли заметить, что изображения оказывают один из самых больших эффектов на скорость загрузки сайта. Довертись этому сервису!
Многие разработчики игнорируют важность и необходимость улучшения скорости загрузки сайта, бросают эту идею в черный ящик и никогда больше его не открывают. Потому что нет никакой уверенности, что их усилия принесут какой-нибудь результат. Сегодня я расскажу Вам о некоторых вещах по улучшению производительности, которые любой (разработчик) может реализовать прямо сейчас!
Итак, что же является первым и самым главным пунктом? Это изображения. Размер изображений может иметь наибольшее влияние на скорость загрузки вашего сайта. На некоторых сайтах изображения могут занимать до несколько мегабайт если их должным образом не оптимизировать для веб страницы! Даже если вы видите, что изображения весят по 200-300 килобайт, попытайтесь их оптимизировать. Только представьте, эти картинки можно вполне уменьшить до 50 килобайт или даже меньше!
Первое, когда Вы сохраняете изображение из Photoshop (если Вы используете его) выберите сохранить для Web. Не сохраняйте изображения вслепую, а всегда обращайте внимание на его размер. При выборе качества не оставляйте всегда 100%, вы можете выбрать от 60 до 80 процентов, разницы в качестве не будет сильно заметно, зато будет заметна разница в размере изображения. Как показывает практика в большинстве случаях вполне хватает 60%, а иногда изображения могут быть настолько большими, что и при выборе даже 10% Вы получите довольно качественную картинку. Здесь Вам нужно будет поэкспериментировать. Далее Вы можете использовать различные сервисы для дальнейшей оптимизации картинок, которые могут еще больше сократить их размер.
Второе, не всегда формат, в котором сохранено изображение, является оптимальным с точки зрения его размера. Есть два популярных формата изображений — это JPG и PNG. Как узнать какой формат лучше использовать для той или иной картинки? Одно из основных преимуществ PNG — это поддержка прозрачности. Но этому есть своя цена - сжатое PNG изображение по сравнению со сжатым JPG будет весить намного больше. В это сложно поверить, но оптимизированное изображение JPG может весить до 10 раз меньше аналогичного изображения в формате PNG! И, соответственно, из этого следует простое правило: если изображение не нуждается в поддержке прозрачности лучше использовать JPG (по крайней мере для WEB). Но GIF, JPG и PNG не являются единственными форматами изображений, которые вы можете использовать на веб страницах.
Существует еще один формат изображений - WebP. WebP — это современный формат изображений, который обеспечивает превосходное сжатие для изображений в Интернете. Изображения в формате WebP весят намного меньше аналогичных изображений в форматах PNG и JPG без потери качества. Почему бы не использовать WebP для каждой картинки в интернете спросите Вы? Проблема в том, что WebP, являясь современным форматом изображений, к сожалению, не поддерживается некоторыми, даже самыми современными браузерами (в основном браузерами от компании Apple). И поэтому, когда пользователь заходит на Ваш сайт, ему нужно показывать изображения в том формате, в котором поддерживает его браузер. Примерно 70% ваших пользователей смогут увидеть изображения в современном формате, соответственно в этом есть смысл. Вы можете определить поддержку WebP браузером, используя JavaScript библиотеку Modernizr.
Также имеет смысл уменьшать размер/качество изображений на определенных страницах вашего сайта, там, где не требуется высокого качества изображений. Представим интернет-магазин и изображение товара (одно из многих). Только представьте сколько вариантов этого изображения Вам нужно хранить:
Миниатюру на странице показа всех товаров и в списке изображений одного товара на странице этого товара в довольно низком качестве
Основное изображение в довольно хорошем качестве
Изображение в оригинальном качестве в том случае если на странице товара есть функция увеличения изображения
Эти изображения желательно хранить в двух форматах, если Вы хотите, чтобы больше половины Ваших пользователей могли получить изображение в формате WebP. Получается, что одно изображение будет хранится в 6 вариантах. А теперь представьте, что для пользователей мобильных телефонов размер изображений должен быть максимально низким, чтобы поддерживать хорошую скорость загрузки изображений и на мобильных телефонах тоже.
Как можно автоматизировать обработку изображений?
Вы можете захотеть автоматизировать весь этот рутинный процесс по обработке изображений и Вам нужно будет думать о том, чтобы создать или использовать скрипт для обработки фотографий после их загрузки – сжатие, оптимизация, преобразование в другие форматы и т.д. Это будет особенно проблематично если Ваш сайт находится не на собственном сервере, а на виртуальном хостинге, где у Вас нет возможности установить дополнительное ПО, в том числе для работы с изображениями.
Вы можете использовать не инструменты, а сервисы, которые будут делать всю эту работу за Вас и трансформировать и оптимизировать изображения «на лету» (в тот момент, когда Вы их будете запрашивать). Поверьте – это очень удобно. На вашем сервере хранится только один вариант изображения (оригинальный), вы просто указываете как вы хотите трансформировать свое изображение.
Вот неполный список таких сервисов:
Далее, далеко не все изображения, которые у Вас есть на странице нужно загружать сразу, потому что это не очень хорошо влияет на скорость загрузки страницы. Подумайте, пока не загрузятся все изображения, даже те, которые находятся в самом низу страницы, и которые пользователь может никогда и не увидеть, сайт не будет полностью загружен. Поэтому, лучше загружать только те изображения, которые находятся в области видимости экрана на момент загрузки страницы, а остальные не загружать вовсе или подставлять вместо них плейсхолдеры – изображения очень низкого качества (10-20 пикселей в ширину) с эффектом размытия. И потом, загружать изображения по мере необходимости, когда они будут находиться в области видимости. Такой подход называется «ленивая загрузка» (lazy loading). Раньше, определение видимости элемента было довольно сложной задачей и решения были ненадежными, но сегодня вы можете использовать Intersection Observer API у JavaScript’а. На его основе уже есть готовые реализации ленивой загрузки изображений, такие как Lozad. Комбинация только оптимизации изображений и их ленивой загрузки может дать Вашему сайту существенный прирост в скорости загрузки.
Вторым шагом после изображений подумайте об оптимизации ваших CSS и JavaScript файлов. Не забывайте всегда минимизировать эти файлы. По умолчанию CSS являются ресурсом, который блокирует отрисовку страницы в браузере. Это значит, что браузер остановит создание HTML элементов пока не загрузит и не прочтет весь ваш CSS. Поэтому всегда минимизируйте CSS, а также удалите неиспользуемые стили. Это особенно важно если Вы используете какой-нибудь CSS фреймворк (на вряд ли вы используете все стили фреймворка). PurgeCSS может помочь Вам автоматизировать процесс удаления неиспользуемых стилей. Если это возможно для Вас, постарайтесь при загрузке страницы загружать только критический CSS, а загрузку остального CSS отложить, пока страница полностью не загрузится. Критический CSS – это CSS, который необходим для стилизации только той части страницы, которая находится в области видимости экрана при загрузке страницы.
Постарайтесь сократить размер JavaScript файлов настолько, насколько это возможно и помните, что JavaScript файл – это не изображение, браузеру кроме того, что загрузить JS файлы нужно их еще и обработать, что занимает определенное время и ресурсы. Именно от размера JavaScript и от скорости его выполнения зависит такой очень важный показатель как скорость загрузки до взаимодействия. То есть может быть такое, что страница полностью загружена, а пользователь все еще не может с ней взаимодействовать или отклик страницы на действия происходит с большой задержкой. Это значит, что браузер еще не обработал весь JavaScript код. Также старайтесь откладывать загрузку большого JS кода (файла), который не используется на всех страницах. Например, у Вас может быть компонент весом в 100-200 килобайт, который используется только на одной странице, а загружается на всех страницах. Постарайтесь разделить Ваш JavaScript на несколько кусочков(файлов) и загружать каждый из них только там, где он необходим. Этого легко можно добиться с помощью таких сборщиков как Webpack.
И помните, создание HTML страницы идет сверху вниз, и если браузер по пути отрисовки страницы встретит JS, он «поставит на паузу» отрисовку страницы пока не скачает (если необходимо) и не выполнит его. Поэтому старайтесь, чтобы ваш основной JS файл подключался ниже всего основного HTML, желательно перед закрывающимся тегом body, чтобы не задерживать отрисовку необходимого HTML. Если вы подключаете JS файл не внизу страницы, то используйте атрибут defer при подключении скрипта, что укажет браузеру на то, что это скрипт нужно обрабатывать только после того, как вся страница будет полностью отрисована.
Есть еще один из самых важных пунктов для улучшение скорости загрузки страницы. Это сокращение времени ответа от сервера или времени до получение первого байта (TTFB – Time to first byte). TTFB – это время, которое необходимо, чтобы отправить запрос от клиента (браузера) и получить первый байт данных от веб сервера.
Этот пункт является, пожалуй, самым сложным для оптимизации, потому что он затрагивает довольно много аспектов, многие из которых специфичны для используемых инструментов, подходов к реализации, фреймворков или CMS. И поэтому нет какого-то универсального решения. Но зато есть несколько советов, на что нужно обратить внимание:
Используйте сервер с хорошей производительностью, потому что чем быстрее ваш сервер читает или записывает данные и быстрее обрабатывает различные процессы тем быстрее ваш сайт вернет ответ пользователю.
Старайтесь использовать самые последние версии языков программирования, фреймворков, библиотек, CMS, веб сервера или чего-либо еще, что работает на вашем сервере, чтобы пользоваться всеми преимуществами обновлений по производительности, которые могли быть выпущены. Так, PHP 7.0 дает прирост производительности в 180% по сравнению с предыдущей версией 5.6
Оптимизируйте запросы к Базе Данных. Посмотрите, может быть вы столкнулись с проблемой n+1 или не добавили индексы там, где необходимо.
Используйте кэширование. Каждый раз, когда пользователь делает запрос, на сервере делается запрос в базу данных (БД), генерируется HTML из данных и возвращается клиенту. Представьте, если у Вас сайт, на котором вы обновляете контент раз в неделю. Но все равно каждый раз, когда ваш сайт открывается, будет происходить запрос в базу данных, даже если информация не обновлялась. Поэтому, когда первый раз пользователь делает запрос на определенные данные вы можете получить их из БД, показать их пользователю и кэшировать (сохранить локально) эти данные на неделю (например). И после этого, в течение недели, все, кто будут открывать эту страницу уже не будут делать запрос в базу данных каждый раз, а им будет показываться сохраненная копия этих данных. Это будет уменьшать время загрузки страницы и нагрузку на сервер. В некоторых случаях вы можете кэшировать не только данные из БД, а страницы целиком.
Оптимизируйте скорость установления защищенного соединения SSL (если вы используете его), т.к. установление защищенного соединения требует больше времени чем незащищенного. Вы можете сделать это самостоятельно или использовать инструменты, которые могут помочь Вам в этом, например Cloudflare. Cloudflare будет выступать как посредник между пользователями и Вашим сайтом, все запросы будут проходить через него. Cloudflare также может справиться с DDoS атаками, которыми может быть подвержен Ваш сайт. Если не обращать на это внимания Ваш сайт может загружаться медленнее после установки SSL.
К ним относятся JS, CSS, файлы, шрифты и изображения. Когда пользователь заходит на Ваш сайт Вы можете дать браузеру выбрать откуда ему брать ресурсы, и это может оказать существенное влияние на время загрузки сайта. Вы можете сохранять статические ресурсы в браузере, когда пользователь первый раз заходит на Ваш сайт. Это и есть кэширование. Вы можете безопасно кэшировать статические ресурсы на долгое время: на 6 месяцев или даже на год. Cloudflare также может кэшировать все статические ресурсы на Вашем сайте. Но, что делать если за это время Вы изменили контент этих файлов, но не изменили название, например добавили пару строчек в свой JS файл? Изменить название файла! Но вы не можете постоянно менять название, но можете добавить какой-нибудь хэш как строку запроса, когда запрашиваете файл. Например, “/js/app.js?v=123456”. Вы будете запрашивать один и тот же файл, но технически для браузера это уже будет другой файл, который еще не был кэширован. Вы можете делать это вручную или, опять же, автоматизировать этот процесс с помощью сборщиков. Это называется контроль версий (versioning) или очистка кэша (cache busting).
Используйте сеть доставки контента (CDN) для статических ресурсов. Когда пользователь запрашивает изображение (например) с Вашего сайта, он должен отправить запрос к Вашему серверу, независимо от того, где находится пользователь и Ваш сервер. CDN может помочь минимизировать расстояние от клиента до ресурса. CDN – это группа серверов, разбросанных по всему миру, которые работают вместе, чтобы предоставить контент пользователю с того сервера, который находится максимально близко к нему. CDN с одним из самым большим количеством серверов по всему миру - это Cloudflare. Как вы видите есть несколько преимуществ начать использовать Cloudflare. Для большинства сайтов бесплатный тариф будет более чем достаточным. (Они не платят мне ☺)
Попробуйте применить эти несложные советы для оптимизации скорости загрузки Вашего сайта, и я уверен время его загрузки существенно сократится. До новых встреч!
Получите бесплатную консультацию на разработку Вашего проекта.