Ускорить загрузку сайта
Добрый день, друзья. Данную статью написал вебмастер Владимир Крамаров. Последнее время большую популярность получили мобильные устройства, и их количество с каждым кодом все больше растет. Поэтому, появилась необходимость оптимизации интернет-проектов именно под их потребности. Самым главным требованием для сайтов является высокая скорость загрузки.
Считается, что, если сайт грузится более 3 секунд, то пользователи гаджетов не будут дожидаться полной загрузки страницы, а просто покинут ее, тем самым дадут сигнал для поисковых систем, что этот сайт не интересен пользователям, со всеми вытекающими последствиями. В этом обзоре мы поговорим об увеличении скорости загрузки сайта. Рассмотрим основные моменты (элементы) страницы, которые требуют особой оптимизации. Более подробную инструкцию с детальным описанием и примера читайте в статье: Как я увеличивал скорость загрузки своего сайта
Сначала зададим себе вопрос, что будет быстрее грузиться: большой файл или маленький? Даже не опытные пользователи с первого раза ответят, что время на загрузку маленького файла уходит меньше. Поэтому, будет учиться сжимать все, что сжимается, а именно:
- CSS-файлы, они же файлы стилей. Это то, без чего ваша страница будет выглядеть пустым набором текста. Они же отвечают и за верстку (макет) страницы.
- Картинки. Если из изображения выкинуть все системную информацию, то ее размер может значительно уменьшиться.
- Java-скрипты.
- HTML код.
По-порядку рассмотрим каждый пункт.
Сжатие CSS
Самым простым способом уменьшить размер таких файлов – это удалить лишние пробелы, переносы строк, комментарии. Все это можно сделать руками, но, с тем условием, что ваш файл не содержит тысячи строк кода. В противном случае, на помощь придут онлайн-сервисы. Они могут вытянуть код в одну строчку, то есть, автоматизировать процесс удаления лишнего. Но, нужно быть острожным, иногда файл перестает работать должным образом, поэтому рекомендуется тестировать его после подобной оптимизации.
Для онлайн-сжатия можно воспользоваться сервисом CSS Optimizer. Его достоинства в том, что, используя настройки по умолчанию, можно получить неплохие результаты сжатия и простоту использования. Вам достаточно вставить ваш код из файла css в форму, указать адрес сайта и нажать кнопку «Process CSS». В результате, вы получите сжатый код, который можно скопировать и вставить в новый файл стилей и пользоваться. Сжатие доходит до 90% и выше. Кроме этого, этот сервис проверяет на валидность ваш исходный код, и, если есть в нем ошибки, то он быстро укажет на них.
Уменьшаем размер изображений
Существует множество способов сжать картинку, но при этом нужно сохранить качество, чтобы пользователям она предстала без искажений и видимых артефактов. В своей работе пользуюсь редактором IrfanView. Он бесплатный и не требует опыта работы в графических редакторах. Степень сжатия вы выставляете самостоятельно в настройках, по личному опыту хочу сказать, что, большие картинки сжимаются очень хорошо, при этом, качество сохраняется на должном уровне.
Ужимаем JAVA
Если вы не специалист в написании скриптов на Яве, то рекомендуется сокращать готовые скрипты специализированными онлайн-сервисами. Я отношусь именно к таким пользователям.
Используем консольную программу YUI компрессор. Запускаем ее и прописываем такую команду:
java -jar yuicompressor-x.y.z.jar myfile.js -0 myfile-min.js
где:
myfile.js — файл, над которым мы будем работать;
myfile-min.js — полученный файл.
Но, можно и обойтись без этого. Дело в том, что браузер загружает страницы сверху вниз, поэтапно. Если на пути рендеринга встречается запрос на подгрузку Ява-скрипта, то, прорисовка останавливается, пока он не будет загружен. В этом случае, нужно или снижать размер самого файла, чтобы он быстрее загрузился или установить ему асинхронную загрузку при помощи «async». В последнем случае, отображение странички не будет приостанавливаться, она будет асинхронно грузиться вместе с Явой, тем самым, увеличится общая скорость загрузки сайта.
Оптимизация HTML
Здесь тоже предлагается масса онлайн-сервисов по сжатию ХТМЛ. Но, будьте осторожны. Как и в случае с CSS конечный код может перестать работать. Желательно руками удалить все лишнее. По правде говоря, большого прироста это не даст, но попробовать можно.
Включаем сжатие на стороне сервера
Следующим шагом для увеличения скорости загрузки сайта – это включение сжатия gzip или zlib на сервере. Все зависит от того, какой модуль установлен на серваке вашего хостера.
Сначала проверим, что установлено на хостинге. Для этого создаем .php файл и в него прописываем такой код:
<?php phpinfo(); ?>
Помещаем этот файлик в корневой каталог, где находится ваш сайт на сервере и запускаем его: http://сайт/файл.php
Для включения будем редактировать файл .htaccess. Если реализовано сжатие по средствам gzip, то добавляем в htaccess команды:
Мы указываем серверу, что нужно ужимать html, txt, css, js, php, png и все файлы текстовых, графических типов и скрипты.
Включаем кэш браузера
Нужно его включить, чтобы пользователь, при повторном посещении страницы, не загружал вновь ее элементы, которые не изменились. Это полезно сделать для всей статики (CSS, HTML, картинок, java). Сделать это можно в настройках htaccess.
- Проверяем, какой модуль поддерживает хостинг. В природе существует их два: mod_expires и mod_headers. Принцип работы у них схожий. Они устанавливают срок хранения файлов в кэше браузера.
- Прописываем срок для каждого типа файлов (в секундах, в днях, неделях, месяцах)
Настройка модуля mod_expires:
Во всех случаях работы с htaccess нужно проверять подключения того или иного модуля командой проверки <IfModule mod_expires.c>. Если этого не сделать, то сайт загружаться не будет.
Кроме этого, рекомендуется воспользоваться CDN сервисами, где также можно настроить кэширование этих файлов. Используя такой подход, вы не только включите кэш, но и обезопасите себя от DDOS атак, и ваш сайт постоянно будет доступен даже при проблемах с сервером у хостинг-компании (его копия будет храниться на CDN-серверах).
Удалить блокирующие элементы
Это те элементы, которые блокируют прорисовку верхней части страницы. Как говорилось выше, браузер считывает код сверху вниз и, встречая команду на загрузку внешнего файла (CSS, скрипты), он останавливается и ждет, когда она выполниться. Именно эти команды и нужно постараться удалить из верхней части страницы. Про асинхронную загрузку Явы я рассказывал выше, то же самое нужно сделать и с файлами стилей. Но, в этом, случае «async» не поддерживается, поэтому, нужно использовать способ асинхронной загрузки CSS при помощи специального скрипта. Его реализация также описана по ссылке в начале обзора.
Кроме этого, для каждого обговоренного пункта существуют свои нюансы, которые нужно учитывать и в результате вы получите ощутимое увеличение скорости загрузки сайта. Мне удалось достигнуть 1,7-2 секунды. Но, если доводить до такого «фанатизма» как я, то можно потерять часть функционала сайта. Конечно, это все индивидуально, в моем случае отказался работать скрипт кнопок социальных сетей для мобильных устройств. Поэтому, я был вынужден пожертвовать некоторым временем загрузки в пользу работоспособности этих кнопок.
Так что решайте сами, пробуйте, а практические советы и примеры читайте по ссылке в шапке этой статьи. Всем удачи!!!
Если будут вопросы, то, задавайте их в комментариях.
С уважением Владимир Крамаров 24.12.2017 г.
