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

Давайте перед тем, как начать говорить об увеличении скорости загрузки сайта, скажем пару слов о самой структуре и о том, что непосредственно грузится в момент ожидания сайта в окне браузера.

Наш сайт состоит из HTML кода, который читает ваш браузер и на его основании грузит стили, скрипты и контент (картинки, текст и т.д.).

Пару слов о том, что такое стили и скрипты. Стили отвечают за оформление вашего сайта, в них прописываются правила для всех элементов, что где и как должно отображаться на сайте. Обычно все стилевые правила хранятся в отдельном файле. Скрипты отвечают за обработку событий на сайте их код, также выносят в отдельный файлик.

Получается, что современный сайт состоит из файлов стилей, скриптов и контента (картинки, видео и т.д.). Все эти файлики хранятся на сервере (хостинге).

В процессе загрузки сайта, ваш браузер подает запросы на сервер, требуя загрузить тот или иной файл.

Вот теперь давайте перейдем к обсуждению того, как нам ускорить процесс загрузки сайта :)

1. Уменьшить количество HTTP-запросов

Мы свами уже знаем, что браузер подает запросы на сервер, чтобы загрузить файл стилей, скриптов или картинку. Спецификация HTTP/1.1 советует загружать не более 2-х компонентов сайта с одного хоста.
Отсюда следует, чем меньше запросов нам нужно сделать для загрузки сайта – тем лучше.
На чем мы можем сократить запросы?

1.1. Проанализируйте строение файлов стилей и скриптов, а также картинок (иконок и т.д.), которые используются у вас в дизайне.

1.2. Скомпонуйте файлы стилей в один документ. Нередко бывает, что в дизайне мы можем встретить несколько файлов стилей, один основной, второй, например для слайдера. Старайтесь скомпоновать все в одном документе.

1.3. Скомпонуйте все файлы скриптов в один документ. Со скриптами та же ситуация, есть основной файл и много разных сторонних плагинов. При компоновке скриптов в один документ, вначале должен идти код библиотек и плагинов, а после них - код который их вызывает.

1.4. Все иконки, которые используются в дизайне лучше реализовать через один спрайт файл или заменить шрифтом с иконками. Это существенно сократит количество запросов к серверу.

2. Минимизируйте CSS код файла стилей

Обычно код CSS имеет развернутую структуру, т.к. с ней удобно работать, но для браузера это не имеет значения, ему также понятен и минимизированный вариант.
Сжать CSS код можно с помощью онлайн сервиса:  http://csscompressor.com/
Скорее всего, вы выиграете 10-30% в размере файла стилей и не заметите  изменений в скорости загрузки странице, но поверьте гугл оценит ваши старания :)

3. Минимизируйте JavaScript

Такая же ситуация с кодом скриптов, его тоже нужно минимизировать по аналогии со стилями. Для это можно воспользоваться онлайн сервисом: http://javascript-minifier.com/

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

Не маловажным фактором является оптимизация самих изображений.  На платформе Gollos вы можете загрузить самостоятельно изображения для логотипа, слайдера и баннеров. Предварительно оптимизируйте их, воспользовавшись онлайн сервисом: https://compressor.io/compress

Есть один момент с галереями в дизайне, если там прописан размер, то перед тем как загрузить оптимизированное изображение вам нужно:

4.1. Создать картинку указанного размера.

4.2. Прописать в галереи нули вместо указанных размеров и нажать Сохранить

4.3. Все теперь можно загружать картинки

5. Используйте CDN для загрузки файлов стилей и скриптов

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту.

6. Не загружайте сайт сторонними скриптами

Не стоит захламлять свой сайт множественными счетчиками и плагинами соц. иконок.

Порой вреда от них намного больше, чем пользы. Вместо сторонних счетчиков вам будет достаточно установить аналитику от гугла, а кнопки соц сетей уже встроены на платформе Gollos.

7. Помещайте javascript в конец страницы

Дело в том, что отрисовка сайта начинается только после загрузки скриптов именно поэтому так важно их закинуть в самый низ страницы.
На платформе Gollos вскоре будет реализована возможность переноса файлов через админку.

Сейчас я покажу как это сделать вручную:

7.1. На главной странице вашего сайта, нажмите правой кнопкой мышки и в консольном меню, выберите пункт «Просмотр кода страницы».

7.2. Выделяем код скриптов (см. скрин)

7.3. Открываем текущий дизайн на редактирование и в пункте «Разметка дизайна» в самом конце вставляем скопированный код

7.4. Теперь переходим в раздел «Мета теги» текущего дизайна и удаляем скрипты, т.к. мы их прописали вручную

Выводы

Процесс увеличения скорости загрузки весьма индивидуальный и шаги описанные выше не представляют собой исчерпывающего руководства, но являются основополагающими.

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

Поэтому предлагаю воспользоваться следующими сервисами:
Google сервис - https://developers.google.com/speed/pagespeed/insights/
Сервис отображающий процесс загрузки - http://tools.pingdom.com/fpt/

После каждой оптимизации, производите замеры и читайте рекомендации по дальнейшим шагам.