15 вещей из-за которых тормозит ваш сайт - Блог Александра Куртеева:
Автор: Александр Куртеев
Разберем самые популярные проблемы большинства сайтов из-за которых мы теряем посетителей, глубину просмотров и платим больше денег за трафик.
1. Плохая конфигурация сервера
Самой банальной проблемой в скорости сайта является конфигурация сервера на котором находитесь.
Здесь возможны 2 ситуации:
- Если у вас vps или выделенный сервер, то хостер, без особой просьбы не настраивает сервер на максимальное быстродействие для вашего сайта, а обычный пользователь не знает, что нужно попросить сделать. Поэтому некоторые пользователи платят хорошие деньги за сервера и vps, а получают совсем незначительный прирост скорости.
- Если у вас виртуальный хостинг, то, как правило, не включены или не активированы функция сжатия передаваемых файлов и кэширование на стороне пользователя.
Сжатие позволяет сократить объем передаваемых данных в 2-3 раза, как следствие грузить нужно меньше. Но для процессора - это дополнительная нагрузка, поэтому часть хостинг компаний могут отключать данную функцию в угоду большему количеству, обслуживаемых, сайтов.
Кэширование на стороне пользователя (в браузере) позволяет некоторые элементы вашего сайта повторно загружать не с вашего сервера, а непосредственно с компьютера пользователя, что, естественно, быстрее для пользователя, а для вас меньше нагрузка.
2. Желание сэкономить на хостинге
Естественно и желание платить меньше за размещение сайта на хостинге. Но знайте, что хостинг очень сильно влияет на скорость вашего сайта.
Если ваш сайт недоступен или грузится медленно, то вы сэкономите несколько сотен рублей в месяц, но потеряете гораздо больше. Нормальный хостинг стоит от 300-400 рублей в месяц.
Важно! Не нужно ожидать 10000 посетителей в сутки, чтобы наконец-то переехать на VPS. Такого не произойдет (в литровую банку, не влезет 2 литра воды), столько людей не придет на сайт, который работает медленно. Поэтому с ростом посещаемости заранее увеличиваем качество хостинга.
3. Неправильное размещение сервера
Если посетители вашего сайта в основном из России, то сайт должен быть размещен на хостинге, чьи сервера размещены в России.
Чем ближе сервер для ваших посетителей, тем быстрее у них будет грузиться ваш сайт.
Если вы получаете трафик со всего мира, то я настоятельно рекомендую вам использовать сеть доставки контента (CDN), чтобы изображения, CSS, javascript загружались с ближайшего к пользователю сервера.
4. Супер тяжелый сайт
Нет сомнений, в том, что страница размером 4 МБ со 180 запросами будет грузиться медленнее, чем страница весом 1 МБ для генерации, которой используется 60 HTTP запросов.
Один из простых способов - это минимизация размера каждой страницы вашего сайта. Т.е. не делать партянки на десятки экранов (это не относится к лэндингам).
Если сократить размер страницы нельзя, то включаем отложенную загрузку изображений, для того, чтобы картинки грузились по мере надобности.
5. Не оптимизированные изображения
Вы знаете, что изображения вашего сайта грузятся примерно 60-70% времени?
Вы можете оптимизировать запросы к базе данных и php код, но если вы не оптимизировали изображения, то ваш сайт будет медленным.
Для примера, файл с расширением png размером в 460 кбайт можно сжать до 90 кбайт.
Если вы не оптимизируете изображения, то время загрузки вашего сайта серьезно пострадает.
Для оптимизации изображений можно использовать photoshop, fireworks или сервис под названием tinypng.com.
6. Неправильные размеры изображений
Очень плохо, если вы масштабируете изображения (изменяете размер) в визуальном редакторе или средствами html.
Правильно будет изменить размер большого изображения в программе, например, в фотошопе и использовать уже уменьшенное изображение.
Например, у вас есть изображение 1200 * 600 px и вы хотите его уменьшить до 300*150.
Тогда, открываем фотошоп, изменяем размер, сохраняем и уже данное изображение загружаем на сайт. Таким образом, вы уменьшите размер подгружаемых изображений и улучшите качество эскиза, т.к. библиотека сервера, отвечающая за масштабирование, работает хуже, чем photoshop.
Пример. На многих сайтах изображение иконок социальных сетей размером 256*256 и весом в 150 кб, вместо нужной иконки 32*32 и весом в 2 кб.
7. Неверный тип файла для изображений
На данный момент лучшими форматами считаются jpg и png.
Если вам нужны прозрачные изображения, то используем формат изображение png. Для всех остальных изображений используем формат jpg. Никогда не используем png без надобности, т.к. размер изображений увеличивается в несколько раз, что, естественно, сказывается на скорости сайта.
Так же, не используем изображения с текстом тогда, когда этот текст можно написать напрямую на сайте. Такое, к сожалению, встречается. Сайт составленный из большого количества картинок с текстом - это мега-плохо, т.к. затрудняет редактирование текста и увеличивает объем загрузки.
8. Тяжелые фоновые изображения
Многие пользователи ставят фоновое изображение на сайт, которые едва заметны, но очень тяжеловесны, потому что имеют большой размер.
Вы действительно нужно фоновое изображение в 500 килобайт, а то и в 1.5 мбайта? Лучше использовать CSS3, когда это выполнимо, цвет фона или заполнение текстурой.
Также очень плохая практика, загружать звуковые файлы в фоне. Ваш сайт начинает на пустом месте грузиться в 3-5 раза дольше, плюс посетители в 90% случаев не рады вашей музыке и вкусу.
9. Чрезмерное использование рекламы
Чрезмерное использование google adsense и яндекс директ может быть дополнительным источником дохода, но также это может сильно замедлить ваш сайт.
Сайт, который загружает объявления в заголовке, в правой боковой панели, в теле поста и в нижней части страницы, используя 2 или 3 различных услуг объявления, будет гораздо медленнее, чем веб-сайт только с 1 объявлением в правой боковой панели или в теле поста.
Объявления не только раздражают пользователя, но и замедляют ваш сайт.
Поэтому при размещении большого количества рекламных кодов подумайте целесообразно ли это.
10. Чрезмерное использование социальных сетей
Сейчас популярно размещать кнопки социальных сетей, группы вконтакте, facebook, одноклассники и твиттера на всех страницах сайта.
Но учтите, что каждый кусок кода - это отдельные запросы на удаленный сервер и отдельное время на соединение.
Поэтому размещать ради того, чтобы было не имеет смысла. Подумайте, какие кнопки социальных сетей вам нужны в материале, чтобы пользователи делились и какие группы в соц.сетях актуальны, а какие нет.
Слишком много сценариев социальных сетей могут убить производительность вашего сайта
Также является плохой практикой ставить десятки счетчиков на ваш сайт. Невероятно, но факт, что от этого на ваш сайт не придет больше посетителей. Да и точной картины о посетителях вы не получите, т.к. у каждого счетчика есть погрешность.
Поэтому используем 1-2 счетчика. Всякие хотлоги, liveinternet, рамблеры, маилы легко заменяются на удобный и популярный счетчик - яндекс.метрику.
11. Бессмысленные редиректы
Небольшой тест для вас.
Какой из следующих урл для загрузки изображения быстрее, A, Б, В или Г?
А. http://www.site.ru/image.jpg
Б. http://site.ru/image.jpg
В. https://www.site.ru/image.jpg
Г. https://site.ru/image.jpg
Правильный ответ в том, что это зависит от вашего сайта!
Если ваш сайт https://www.site.ru, то, запросив изображение по версии без HTTPS (http://www.site.ru/image.jpg) в браузере будет дополнительный редирект с http://www.site.ru/image.jpg на https://www.site.ru/image.jpg в браузере, чтобы загрузить изображение.
Если используется не-WWW версия для вашего сайта (http://site.ru/), то вы не должны использовать www во всех ваших урлах.
Такие бессмысленные редиректы замедляют ваш сайт.
Самым простым способом избавления от данной проблемы является использование относительных URL-адресов для ваших файлов (например, <IMG SRC = "/ image.jpg" />).
Примечание. Данная проблема актуальна если вы:
- сами делаете шаблон
- перешли с www версии сайта на без www
- перешли на загрузку сайта по безопасному протоколу https.
12. Не распределения нагрузки
Если на ваш сайт начинает приходить все больше посетителей, то время загрузки сайта может быть оптимизировано с помощью балансирования нагрузки.
Рассмотрим популярные приемы.
- Воспроизводить видео и аудио со своего хостинга - это плохо, излишняя нагрузка на сервер.
Рекомендую все видео хранить на сервисах youtube или vimeo, а аудио на сервисе soundcloud - это очень сильно снизит нагрузку на ваш сервер.
- При большом количестве комментариев лучше использовать сервисы: disqus, intensedebate или cackle.me. На данном сайте я использую cackle.me.
- Javascript и изображения лучше размещать на CDN. Для автоматического размещения и смены путей есть специальные расширения.
13. 404 ошибка
Если вы пытаетесь загрузить файл, который не существует или браузер не может найти его, то время загрузки вашего сайта сильно замедлится в связи с 404 ошибкой (отсутствие).
Вы всегда должны проверять наличие 404 ошибок во время рендеринга страниц для достижения лучшего время загрузки. Проверить наличие таких ошибок можно с помощью Webpagetest.org
Если Webpagetest показывает красные линии на графике загрузки, то вы должны немедленно устранить их.
Важно! Проверяем не только главную страницу, но и все остальные.
404 ошибки могут сильно испортить время загрузки вашего сайта.
14. Сотни HTTP запросов
Для загрузки каждого файл CSS, JavaScript или изображения создается отдельный запрос по http, а это дополнительное время на соединение. Чем больше загружается файлов, тем медленнее будет ваш сайт.
Как правило, на обычном сайте подгружается порядка 20-30 файлов стилей и 10-20 javascript. Каждый из этих файлов грузится только после того, как был отправлен запрос на предыдущий файл и он был загружен.
Вы в разы сократите время загрузки если произведете объединиение файлов, т.е. все файлы стилей в один и все яваскрипты в один файл. Кроме этого, нужно сжать данные файлы, активировать асинхронную загрузку, отложенный запуск яваскриптов и переместить загрузку css и js файлов вниз документа.
15. Отсутствие кэширования контента вашего сайта
Каждая система управления сайтом использует базу данных для того, чтобы хранить данные.
Это очень удобно для управления большим сайтом, но также это создает дополнительную нагрузку на ваш сервер. Серевер вынужден по каждому запросу пользователя генерировать новую страницу, отправляя запросы в базу данных.
Чтобы сократить время загрузки сайта нужно загружать кэшированные версии сайта, а не генерировать каждую страницу снова и снова.
В Джумла вы можете использовать стандартное кэширование или компонент jotcache, последний лучше, но требует дополнительного объяснения.
Даже 10-минутный период кэширования сильно оптимизирует время загрузки вашего сайта.
Важно! Кэширование всегда является последним шагом в оптимизации сайта.
16. Ошибка - ускорение сайта методом тыка
Моя задача была предоставить вам информацию для того, чтобы вы могли понять причины медленной медленной загрузки сайта.
Ускорение загрузки сайта - это всегда выигрыш как для вас, так и для посетителя.
Быстрый сайт дает:
- большую посещаемость,
- большую глубину просмотров
- более высокие результаты в поисковой выдаче.
- меньше расходов на трафик, если используете CDN
Ускорение сайта - это комплекс мероприятий, а не одно волшебное действие. Например, переезд на CDN без оптимизации сайта, добавит чуть-чуть скорости, но при этом вы будете платить в 3-4 раза больше денег за трафик (чем без оптимизации), т.к. ваш сайт очень тяжелый.
Многие пользователи не доводят дело до конца так как наступают на стандартные грабли, появляются ошибки и благое дело забрасывается с оправданием, что мол знаний не достаточно.
А так как при ускорении сайта результат в разы выше вложенных усилий, то я подготовил специальное пошаговый видеокурс с помощью которого каждый пользователь, даже новичок без знаний html, css и php, сможет ускорить свой сайт в 2-5 раз.
