Ускоряем скорость загрузки сайта

Ю2сайт

Создание сайтов

Ускоряем скорость загрузки сайта

Ускоряем скорость загрузки сайта

Первым важным моментом, который нужно сделать, это проверить ошибки:

1) Ошибки в коде бэкэнда (серверной части)
Был случай когда ко мне обратились с просьбой посмотреть, что-то долго грузится сайт. Я уже приготовился к тому, что сейчас будем ускорять милисекунды.
А оказалось, что сайт загружается за 31 секуду. Как думаете, что это было? Правильно, таймаут в php. Убрав одну ошибку в серверной часте кода я ускорил сайт до 1 секунды. Занавес.

2) Ошибки в коде фронтэнда (отображаемой части)
Самая частая ощибка, это когда ссылка есть, а картинки или файла нет. Советую нажать на F12 в хроме и открыть исследуемую страницу.

3) Медленный хостинг
Тоже имеет место быть, тут главное не впадать в крайности и перекладывать все проблемы на плохой хостинг. В гугле есть проверка ниже описан сервис, вот если там на хостинг не ругается то всё хорошо.
Слишком много развелось в последнее время маркетологов которые впаривают "специальный хостинг для битрикс", раз этак в 5 дороже обычного, а разницы никакой! 

Второй этап, идем в специальный инструмент от Google 
Смотрим какие цифры он показывает, если там меньше 50, то однозначно надо что-то делать.



1) Оптимизация картинок
Картинки много весят их нужно сжимать это понятно.
Тут 2 варианта или фотошоп или онлайн сервисы. Лично я для себя открыл http://optimizilla.com неплохо справляется, сжимает картинки в среднем на 60% почти без потери качества.
Ну и как вариант, что бы не ставить фотошоп можно использовать быстрый и легкий pain.net (не путать с обычным пэйнтом)

2) Минимизация js и css
Кроме python я не знаю в вебе языков которые требуют отступов и пробелов для корректной работы.
Поэтому легко можно их убирать тем самым делая вес страницы меньше. 
Я пользуюсь вот этим сервисом http://refresh-sf.com/
Берете ваш файл css минимизируете и заливаете назад с приставкой .min.css так что бы если нужно будет внести правки, у вас всегда был оригинал.

3) Кэш в htaccess
Если сайт у вас готов вы его выкатили и каждую неделю не вносите правки (контент не считается)
То стоит прописать в файле .htaccess следующий код


Header set Cache-Control "max-age=604800, public"


там где перечисляются типы файлов добавьте те которые подскажет вам google
max-age это время жизни этого кэша в секундах, в данном примере устанавливаем 7 дней
Т.е. пользователь заходит на сайт и неделю у него будет храниться кэш, если планируются изменения на сайте то можно будет добавить Last modified, тем самым показать что сайт поменялся и надо снова всё скачать.
Кстати, этот способ хорошо подходит для сайтов у которых не одна страница и пользователи регулярно заходят, или наоборот, если у вас лендинг с постоянно новыми посетителями вам этот способ особо не поможет, разве что они будут жать F5 часто.

4) Убрать тяжесть вниз
Помню года 2 назад я сидел в офисе mail.ru на ленинградкском проспекте и слушал как умные дядьки расказывали как загружается главная страница mail.ru
Там конечно много всяких хитростей, но суть в том, что сначала грузятся стили для первого блока, затем сам блок, потом грузятся стили для воторого и второй блок и т.д.
В общем случае я бы посоветовал просто перенести вниз подключение css, тех что на прямую не влияют напервый экран сайта (т.е. то что видно без прокрутки вниз)
Если это сделать не возможно, а файлы эти тяжелый и их больше 3-х, я бы посоветовал вынести из этих файлов всё, что влияет на первый экран в отдельный файл например first.css
Да и в целом при разработке серьезного проекта я бы советовал создавать общий файл стилей и файл для первого экрана (особенно если это длиный лендинг)

Есть ещё способы ускорить сайт, что то вроде сжатия gzip или хитрости с подгрузкой через ajax, но об этом как-нибудь потом.

И главное помните, не надо ставить целью сделать 99 в этом инструменте от Google так как это всё относительно, достаточно того что-бы было больше 50-60, пример такому подходу простой, я просто проглал гугловский ютуб, вот результат:



Ну и на последок обязательно проверьте сайт инструментом от яндекса