От автора: помните эту знаменательную сцену из очень известной «Пародии на Звездные войны» на фото ниже? Тогда мы просто посмеялись над тем, как нелепо звучало заявление — Скорость света слишком медленная. Но технологии настолько продвинулась вперед, что загрузка медиа должна быть мгновенной, иначе люди не получат их. Терпение — это добродетель эонов. Но нам этого недостаточно. Нам нужно знать, как оптимизировать скорость загрузки сайта.
Итак, давайте поговорим о том, почему ваш сайт должен двигаться со сверхсветовой скоростью, иначе вы потеряете бизнес. Будь то сайт электронной коммерции, сайте B2B, через который вы хотите связывать с людьми, или даже просто сайт, на котором вы хотите, чтобы люди наслаждались вашими отзывами, советами по жизни или видеороликами.
47% всех пользователей ожидают, что веб-страница загрузится через две секунды или меньше.
40% всех пользователей Интернета покидают веб-сайт, который загружается более трех секунд.
73% мобильных пользователей говорят, что они столкнулись со слишком медленно загружающимися веб-сайтами.
40% всех пользователей. Проиллюстрируем это в цифрах. Если у вас на сайте было только 100 просмотров, и он был недостаточно быстрым, вы просто потеряете 40 потенциальных клиентов, читателей или клиентов.
И здесь все довольно сложно. Многое даже не зависит от вас, как от владельца веб-сайта. Например, на мобильных устройствах многие люди используют бесплатный Wi-Fi в Starbucks, публичных точках доступа или даже устаревшее 3G-подключении к Интернету.
Похоже здесь много проблем. Но есть также и множество вещей, которые вы можете предпринять:
Проверьте хостинг-провайдера
Что вы используете, и какова ваша серверная среда? Прекратите использовать эти общие бюджетные среды. Получите выделенный VPS! Да, это стоит немного больше, но если это дает вас на 40% больше пользователей ежедневно, то оно того стоит.
На чем построен ваш сайт?
Является ли код очень громоздким, используются ли у вас устаревшие протоколы? Рассмотрите возможность перестройки на более современных движках, таких как React.JS или WordPress.
Размер изображений не должен превышать 100 КБ
Если на то нет веских причин, например, если требуется прозрачный фон. Если вам не нужен прозрачный фон, замените все эти большие .png, .bmp и другие изображения на файлы .jpg.
Кроме того, не загружайте изображения напрямую со своего смартфона с поддержкой HD-камеры. Обрезайте их сначала до меньших размеров, например, 800×800. Для 90% изображений этого достаточно, если только вам не нужны большие полноразмерные изображения или похожие элементы дизайна.
Кэш вашего (очень) большого сайта
Если у вас большой сайт, содержащий сотни продуктов, страниц и записей, у вас должен быть кэш. Кэш предварительно загружает весь контент, чтобы быстрее его обслуживать. Представьте себе загрузку изображения, а затем посмотрите, как оно будет загружаться по сравнению с уже имеющимся на вашем телефоне изображением. Последнее будет загружаться намного быстрее.
Как измерить скорость
На данный момент вы наверняка должны быть заинтересованы в том, чтобы узнать, насколько быстр ваш сайт, не так ли? Потому что интернет пользователя может быть медленным. Хотя у вас очень быстрый. Или вы можете подумать, что, поскольку вы находитесь на одном побережье США, сайт может быть быстрее / медленнее, когда ваш сервер ближе. И да, вы правы — вы никогда не сможете точно измерить, насколько быстро загружается ваша страница. Но есть такие инструменты:
Google Developers Pagespeed Insights
GTMetrix.com
Webpagetest.org
Если ваш хостинг имеет WHM, вы можете увидеть средние значения загрузки в верхнем правом углу. Средние значения указаны в среднем для 1, 5, 15-минутных интервалов (цифры на скриншоте ниже приведены для сайта, который содержит немного больше, чем просто «Привет, мир!»).
Поэтому помните: если ваш сайт не сверхбыстрый — вы теряете посетителей. Вам нужно сделать его очень быстрым.
Один хлопок, два хлопка, три хлопка, сорок?
Хлопнув определенное количество раз, вы можете сообщить нам, какие статьи действительно вам понравились.
Автор: Andreas Lopez
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.