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

Иногда мимо меня пролетает вопрос про скорость загрузки сайта. Люди навязчиво спрашивают, как сделать так, что бы сайт грузился максимально быстро, что бы клацнул и полоса загрузки даже не запускалась. Я уверен на 90%, что если владелец сайта задумывается над этим вопросом с того момента как сайт только запустили - поздравляю, Ваши разработчики идиоты. И в этом случае увеличить скорость сайта до идеального показатель особо не получится, потому что разработчики изначально делали все криво.

Но не переживайте, мы уже не в 2015 году, для любого проекта есть решение проблемы. В этой статье Вы узнаете 6 самых эффективных методов улучшения скорости загрузки Вашего сайта. И прямо после прочтения данной статьи, Вы сможете внедрить некоторый из моих советов, которые помогут вашему сайту стать немножко быстрее.

И так, сегодня мы рассмотрим такие методы как : 

1. Включение кэширования на хостинге;
2. Сжатие изображений которые были загружены на сайт;
3. Обязательное использование Gzip;
4. Использование CDN сервисов;
5. Расширение ресурсов на хостинге;
6. Оптимизация CSS и JS кода.

Это далеко не все что можно сделать для ускорения проекта. Но я выбрал 6 самых эффективных методов ускорения сайта, которые мы и рассмотрим в данной статье. Я разместил их специально в "самом рентабельном" порядке, что бы Вы понимали что необходимо делать изначально, а что может и подождать. Но что бы скорость загрузки сайта добралась до показателя в 1 секунду и меньше - необходимо применять абсолютно все. Давайте рассмотрим самое простое что можно сделать прямо сейчас - включить кэширование элементов на Вашем сайте, но перед этим - разберемся с порядком загрузки страницы.

Так как изначально что бы решить проблему - нужно найти проблему... пройдемся по этапам загрузки среднестатистической страницы в поиске:

1. Браузер посылает DNS-запрос на доменное имя сайта, что бы получить 200 ответ;
2. После этого Ваш браузер подрубает сервер, на котором лежит сайт;
3. Дальше устанавливается защитное соединение HTTPS, если оно есть;
4. Начинается загрузка HTML структуры сайта;
5. Дальше самый трудозатратный процесс - подгрузить все скрипты стилей и логики;
6. Перед Вами появляется финальная версия страницы.

Как минимум 6 этапов, которые могут помочь увеличить скорость сайта. На каждом этом этапе может быть определенная проблема и если она есть - ее необходимо обнаружить. А делается это супер волшебным способом - с помощью сервиса от Google https://developers.google.com/speed/pagespeed/insights/. Просто забиваете адрес своего сайта, и Page Speed Insights показывает, в каком месте скорость Вашего сайта тормозит. В большинстве случаев, это будут графические изображения и CSS стили.

Давайте разберем 6 лучших методов по ускорению работы Вашего сайта! 

Как увеличить скорость загрузки сайта - начнем с кэширования

Если простыми словами, то это такая интересная настройка на хостинге где лежит Ваш сайт, которая позволяет браузеру клиента запоминать почти 60% всей информации на Вашем сайте. То есть, последующая загрузка Вашего сайта будет выше чем в 2 раза. Почему только 60%? Да потому что можно адекватно кэшировать только статические файлы. 

Это крутой метод оптимизации скорости загрузки сайта, но у него есть несколько минусов:

• Быстрее будут грузиться только те пользователи, которые уже были на Вашем сайте;
• Необходимо иногда думать про очистку кеша, потому что места на хосте не хватит, это 100%.

К сожалению, я не могу адекватно описать как включить кэширование именно для Вас, так как все сайты размещаются на разных хостингах. Возможное местонахождение включения данной функции - это настройки сайта и пункт "Статические файлы", он есть на любом хостинге. И там уже в настройках можно включить длительность кэширования файлов браузером пользователей.

Сжатие изображений загруженных на сайт

Следующий метод оптимизации скорости загрузки сайта - это сжатие изображений. Некоторые "умные" вебмастера делают это с помощью CSS. Смысл в том что бы сжать исходное изображение, а не то, как оно будет отображаться для пользователя. То есть, если загружена картинка на 10 мегабайт, какой бы Вы маленькой ее не вывели, все равно пользователь будет грузить все 10 метров картинки. 

Лично я использую несколько простых сервисов для сжатия картинок, вот прямо до минимального размера но почти без потери качества, так особо и не различишь. Это вот эти вот проекты:

• TinyPNG;
• Kraken.io; 
• JPEGmini.

Вы будете просто в шоке, я Вам гарантирую, картинки кушают очень большой процент скорости загрузки сайта. А эти сервисы уменьшают изображения в 4-5 раз минимум! Вот и думайте, как после этого взлетит скорость загрузки Вашего сайта!

Использование метода Gzip для компрессии файлов

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

Gzip так же можно включить на любом хостинге. Я работал только с серверами на Apache, по этому скажу что для этого нужен модуль mod_gzip. После того как Вы его установите, в .htaccess необходимо прописать несколько строчек кода:

mod_gzip_on Yes

mod_gzip_item_include mime ^application/x-javascript$

mod_gzip_item_include mime ^application/json$

mod_gzip_item_include mime ^text/.*$

mod_gzip_item_include file .html$

mod_gzip_item_include file .php$

mod_gzip_item_include file .js$

mod_gzip_item_include file .css$

mod_gzip_item_include file .txt$

mod_gzip_item_include file .xml$

mod_gzip_item_include file .json$

Подрубили модуль, скопировали этот код в свой .htaccess и вуаля - скорость Вашего сайта растет на глазах, так как Gzip начинает работать.

Оптимизация скорость загрузки сайта - еще 3 простых метода

Я считаю что мы УЖЕ разобрали 3 самых эффективных метода оптимизации загрузки Вашего сайта. Но если и это не помогло Вам достичь необходимых результатов - идем дальше. Сейчас разберем CDN серверы, оптимизацию кода и расширение файлов на сервере.

Использование CDN для ускорения проекта

Это самый современный и при этом самый эффективный метод ускорения сайта. Почему тогда я его поставил аж на 4 место? Потому что они платные и платить надо каждый месяц. Стоят они не дорого, но я уверен что сайт можно оптимизировать и без них. В чем вообще логика CDN серверов - это система доставки контента. Смысл в том, что Ваш сервер например находится в Киеве.

Посетители которые будут заходить со столицы, будут получать ответ быстрее чем к примеру человек, который будет заходить с Черновцов. CDN решают этот вопрос, так как смысл в том, что копии Вашего сайта лежат на множестве хостингов и человек грузит Ваш проект с самого ближайшего сервера. Таким образом скорость загрузки сайта не варьируется по регионам, везде все будет очень быстро.

Расширение ресурсов на хостинге

Тут все просто. Если тормозит фотошоп - надо более мощный комп. Так же и здесь, если тормозит сайт, значит надо более мощный хостинг. Вы можете докупить параметры оперативной памяти, общего места и быстродействия сервера, на котором размещается Ваш проект. Но это не решает проблему до конца, так как потребности быстродействия будут только расти и стоимость увеличения ресурсов на хостинге может достигнуть космических цен. По этому необходимо использовать все возможные методы оптимизации Вашего сайта.

Оптимизация CSS и JS кода Вашего проекта

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

Размещаем в независимости от спецификации CMS систем - CSS в начале кода, а JS скрипты в конце. Почему? Да потому что CSS грузится быстро а JS более медленно и обычно их объединяют. Таким образом JS мешает быстрой загрузке нужных элементов CSS кода. А при разделении их - сначала грузится все необходимые визуальные и контент элементы для пользователя, а уже потом JS код, который на старте загрузки не нужен. Это конечно совковый, но рабочий вариант. А так то есть инструменты для его оптимизации, такие как Jsmin и Packer code. 

Как увеличить скорость сайта - подведем итог

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

Я надеюсь что данная статья была для Вас полезна и Вы узнали что то новенькое. Если ДА - подписывайтесь на мой канал в Youtube, там много интересной информации!