Как ускорить загрузку своего сайта

Скорость загрузки страницы важна. Помимо повышения конверсии и уменьшения отказов, быстрые сайты стоят выше в поисковой выдаче. Как ускорить загрузку?

1. Перенесите стили CSS в начало, а скрипты jQuery в конец страницы

Это на самом деле важно — CSS должны быть перед </head>, а jQuery перед </body>.

Браузер читает страницу сверху вниз. Кодировка, стили CSS, тело страницы с текстом и изображениями, а уже затем скрипты для счетчиков, таймеров, виджетов, попапов и прочих наворотов. Если поставить скрипты сверху, то браузер не откроет тело страницы пока не загрузит все скрипты.

2. Сожмите код CSS, jQuery и HTML

• http://csscompressor.com/ (CSS compressor)
• http://refresh-sf.com/ (JavaScript Compressor)
• https://htmlcompressor.com/ (HTML compressor)

Создайте важный CSS для шаблона страницы сайта и вставьте его перед ссылкой на полный CSS.

Критический CSS позволит «отрисовать» страницу быстрее.

3. Уменьшите число локальных и внешних запросов

Для полного открытия страницы выполнено 74 запроса.

Прежде чем показать посетителю вашу веб-страницу браузер делает множество запросов — к файлам CSS, локальным и внешним скриптам, изображениям, иконкам, шрифтам, рекламным ссылкам, счетчикам, фотографиям, комментариям, оценкам и прочим компонентам. Таких обращений много — десятки и сотни. Чем больше обращений — тем дольше грузится страница. На рисунке, например, 74 запроса. Логично количество таких обращений сократить. Как?

1. По возможности используйте локальный шрифт, без подключения внешних веб-шрифтов.
2. Объедините несколько файлов CSS в один файл.
3. По возможности сложите файлы скриптов в один файл.
4. Если позволяет вёрстка, сложите несколько маленьких изображений в один спрайт.
5. Если используете лишь несколько иконок Font Awesome фиксированного размера — замените их картинками png.
6. Если вы не придаете должного значения данным Яндекс.Метрики, Google Analytics или LiveInternet — удалите коды счетчиков со страниц.
7. Спросите себя — полезны ли вам онлайн-консультант, кнопка обратного звонка, всплывающие рекламные попапы, комментарии, отзывы, кнопки «Поделиться» и виджеты соцсетей? Если они не приносят ни трафика, ни денег — удаляйте скрипты.

4. Оптимизируйте изображения

1. Уменьшайте вес изображений. Безусловно, потери в качестве будут, однако они незначительные и практически незаметны для глаза при просмотре страниц сайта.
2. Не используйте изображения бо́льшего размера, чем вам необходимо.

5. Уберите индикатор прогресса загрузки

Если страницы вашего сайта открываются только после лицезрения крутящейся гифки или процента — удалите скрипт предзагрузки. Пассивное ожидание открытия — зло. Кстати, Internet Explorer 8 может замерзнуть на таком скрипте и не открыть страницу вообще.

6. Главная страница — вовсе не главная

Желание впихнуть всё в одну страницу — беда. Видео, слайдер, отзывы, грамоты, фреймы с пдф, ценники, фотографии, комментарии, баннеры, виджеты каждой соцсети… Для одной страницы — это каша. При том, что посетитель может и вовсе не зайти на главную страницу.

Разбейте контент на страницы: товары/услуги, целевая страница, отзывы, о нас, документы, цены и т.п. Разгрузите главную страницу. Она станет быстрее открываться и легче восприниматься посетителями.