Быстрая загрузка сайта - это комплексный подход к разработке проекта. Как правило, для получения наивысшей скорости загрузки сайта, нужно начать с правильной настройки сервера. В данной статье мы предоставим несколько полезных советов, при соблюдении которых вы сможете сэкономить время своих клиентов, заинтересованных вашим продуктом, что в дальнейшем положительно отразится на ваших продажах или восприятии вашего имиджа.
Порядка 57% населения, у которого нет такого же стабильного и хорошего интернета, как у вас, как следствие более ярко видят проблему долгой загрузки сайта! Известно, что слабый интернет в основном встречается и у мобильных операторов в регионах. К сожалению, мобильная связь не везде и не всегда стабильная и высокоскоростная, что в конечном итоге отражается на вашем продукте. Сэкономьте секунду для вашего клиента, заботьтесь о нем и он будет с вами надолго.
Даже тогда, когда ваш сайт загружается всего на 1-2 секунды дольше, вы можете потерять потенциального клиента. Разница загрузки сайта в 1 секунду или 3 секунды, это не математические 2 секунды. На самом деле это достаточно большой промежуток времени, который не оправдывает ожидания вашего посетителя.
1. Настройте кеширования на стороне сервера
Настоятельно рекомендуем кешировать статичные данные на стороне сервера. Под статичными данными подразумеваются как минимум файлы форматов: jpg, jpeg, png, gif, svg, css, js, swf, txt, pdf, rtf, docx, xlsx, ico.
Если у вас сервер на Nginx и вы не специалист в данной области, ниже приведем пример настройки кеширования.
server {|=RN=||=TAB=|listen 80;|=RN=||=TAB=|server_name mysite.com;|=RN=||=TAB=|...|=RN=||=TAB=|location ~* ^.+.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js|svg)$ {|=RN=||=TAB=||=TAB=|root /path/to/document/root/; # путь к корню сайта|=RN=||=TAB=||=TAB=|access_log off; # отключаем запись логов|=RN=||=TAB=||=TAB=|expires 3d; # кешируем у клиента на 3 дня|=RN=||=TAB=|}|=RN=|}Мы ознакомим вас с основными принципами, а не детальной настройкой сервера, так как в интернете можно найти много статей по настройке кеширования статики на Nginx.
2. Используйте кеш браузера
Впишите следующие инструкции в ваш .htaccess файл после строки RewriteEngine On. Данный пункт, скорее всего, является дополнением к первому. Возле каждого формата указывается время кеширования путем "access plus 7 days", где вы можете менять время для любого формата. В приведенном ниже примере установлены оптимальные значения.
|=RN=||=TAB=|ExpiresActive On|=RN=||=TAB=|ExpiresDefault "access 7 days"|=RN=||=TAB=|ExpiresByType application/javascript "access plus 1 year"|=RN=||=TAB=|ExpiresByType text/javascript "access plus 1 year"|=RN=||=TAB=|ExpiresByType text/css "access plus 1 year"|=RN=||=TAB=|ExpiresByType text/html "access plus 7 day"|=RN=||=TAB=|ExpiresByType text/x-javascript "access 1 year"|=RN=||=TAB=|ExpiresByType image/gif "access plus 1 year"|=RN=||=TAB=|ExpiresByType image/jpeg "access plus 1 year"|=RN=||=TAB=|ExpiresByType image/png "access plus 1 year"|=RN=||=TAB=|ExpiresByType image/jpg "access plus 1 year"|=RN=||=TAB=|ExpiresByType image/x-icon "access 1 year"|=RN=||=TAB=|ExpiresByType application/x-shockwave-flash "access 1 year"|=RN=| |=RN=||=RN=||=RN=||=RN=||=TAB=|Header set Cache-Control "max-age=2592000, public"|=RN=| |=RN=||=RN=||=TAB=|Header set Cache-Control "max-age=2592000, public"|=RN=| |=RN=||=RN=||=TAB=|Header set Cache-Control "max-age=172800, public, must-revalidate"|=RN=| |=RN=||=RN=||=TAB=|Header set Cache-Control "max-age=172800, private, must-revalidate"|=RN=| |=RN=| |=RN=||=RN=||=RN=||=TAB=|BrowserMatch "MSIE" force-no-vary|=RN=||=TAB=|BrowserMatch "Mozilla/4.[0-9]" force-no-vary|=RN=| |=RN=|Если вам нужно развернутое описание использования кеша браузера, можете ее получить от Google
3. Включите сжатие
Перед отправкой данных клиенту с сервера сжимайте их в формате GZIP. Браузер при получении подобных данных разжимает их в разы быстрее, чем было бы потрачено времени на транспорт с сервера → клиенту.
Изначально уточните какая система у вас на веб-сервере.
Далее перейдите по одной из ссылок для получения информации по сжатию:
- Apache: используйте mod_deflate;
- Nginx: используйте HttpGzipModule;
- IIS: настройте сжатие HTTP.
4. Не используйте переадресацию
В целом лишние миллисекунды пропадают при каждом запросе страницы, на которую переадресовывается посетитель. А если у вас несколько переадресаций с входящей точки до целевой страницы, то как правило это существенно добавляет времени до попадания на целевую страницу. Поэтому переадресацию используйте только при крайней необходимости. Данную рекомендацию также дает Google.
Ниже приведены несколько примеров от Google, что считается приемлемым а что нет:
- Хорошо: на странице example.com используется адаптивный веб-дизайн, переадресация не выполняется.
- Удовлетворительно: выполняется переадресация example.com -> m.example.com/home
- Плохо: выполняется переадресация example.com -> www.example.com -> m.example.com -> m.example.com/home.
5. Минификация JavaScript и CSS
Создавайте копии оригинальных файлов *.css и *.js в виде *.min.css, *.min.js, в которых они будут минифицированы. Сэкономленные пару байтов везде, где это возможно, в итоге срастаются в сэкономленные килобайты, а то и мегабайты.
Для минификации CSS файлов можете использовать онлайн минфикатор CSS Minifier, а для JavaScript - Javascript Minifier. Для Coda2, Sublime Text 3 имеются соответствующие плагины, если вдруг вы не дружите с онлайн сервисами.
6. Оптимизируйте изображения
Оптимизируйте все изображения на сайте путем сжатия их размера. На сегодняшний день имеются достаточно распространенные методы по сжатию изображений без потери качества. Следующие инструменты выполняют дополнительное сжатие файлов JPEG и PNG без потерь и снижения качества. Для файлов JPEG рекомендуется использовать jpegtran или jpegoptim (доступно только для Linux, выполнять с параметром --strip-all). Для PNG лучше использовать OptiPNG или PNGOUT.
Есть также онлайн сервисы, которые разработаны на основе вышеуказанных технологий. Как пример, можете использовать Kraken.io для сжатия изображений онлайн.
Есть еще TinyPNG для компрессии JPG и PNG форматов. А также он имеет плагин для Adobe Photoshop, который упростит работу в разы.
Если пользуетесь macOS, то есть приложение под названием Paparazzi!.
Не ограничивайтесь данным списком. Вы свободно можете найти другие альтернативы данным приложениям, которые тоже будут базироваться на вышеуказанных технологиях.
7. Выбирайте правильный формат изображений
Каждый формат изображения разрабатывался для решения конкретных задач. В одних местах лучше использовать jpg, в других png, а в третьих gif. Очень часто полезно использовать формат svg по причине легкого веса и масштабируемости (векторная), но подходить к данному вопросу нужно с пониманием.
GIF - используйте там, где изображение маленькое и имеет менее 3 цветов в палитре. А также можно в несложных анимациях.
SVG - используйте для векторных изображений, иконок и прочих несложных графических объектов. Не стоит использовать svg со сложными иллюстрациями
PNG - используйте для любых других целей
8. Используйте фотографии нужного размера
Если в конкретной области у вас помещается фотография в 800х600px, используйте именно ее. Исключением могут стать фотографии размером @2х, для ретина дисплеев. Но такие фотографии следует использовать только тогда, когда клиент зашел к вам с устройства с ретина дисплеем. Для этого имеются соответствующие Media Query
Также меняйте изображения, в зависимости от устройства, с которого зашел ваш посетитель. Например у вас имеется фотография в 800х600px. Когда клиент заходит на сайт с мобильного телефона, у которого ширина экрана 480px, ему явно не нужен файл с шириной 800px. Так как сегодня имеется большое количество устройств с разными разрешениями, чтобы не впадать в панику и не делать по 20 копий одного и того же изображения, вам достаточно сделать хотя бы пару популярных размеров. Мы обычно выбираем размер 480px в ширину. Если экран меньше этого размера, то некоторые тяжелые изображения больше 480px заменяются их младшими братьями, во всех остальных случаях выводится оригинальное изображения.
9. Используйте шрифтовые иконки
В процессе создания дизайна необходимо обратить внимание на иконки сайта. Если они простые и одноцветные, рекомендуем собрать из них шрифт и использовать иконки таким образом. А также можете использовать уже готовые решения (Font Awesome) или же сайты, которые предоставляют возможность собрать собственный пакет иконок (Flaticon).
Шрифтовые иконки лучше тем, что клиент загружает один файл и экономит время на транспорт сервер ←→ клиент. Вы можете подумать: а чем плохи старые добрые спрайты? В шрифтовых иконках есть и второй плюс. Он заключается в том, что иконки векторные и вне зависимости от плотности экрана они будут сглаженными и четкими.
10. Используйте CSS3 по максимуму
Уже давно прошел век Internet Explorer 6-7, не полная поддержка CSS теней, градиентов и прочего. Сегодня вы смело можете использовать CSS3 по максимуму. Остерегайтесь использования изображений для создания теней, градиентов и тому подобным. Смело используйте CSS3, однако ознакамливайтесь с совместимостью стилей, которые вам кажутся слишком подозрительными.
11. Загружайте контент частями
Первым экраном принято считать часть контента, который помещается на мониторе. А также, первым экраном условно считается первые 640px сайта. В связи с этим, при построении сайта необходимо учитывать это и загружать контент постепенно. Изначально нужно загружать первый экран, максимально быстро и вне зависимости от всего последующего. Это даст ощущение максимально быстрой загрузки сайта. А тем временем, пока клиент акцентирует свое внимание на первый экран, у вашего скрипта будет примерно 2-3 секунды, чтобы "втихую" загрузить все остальное.
Для решения данной задачи, вам следует: использовать асинхронную загрузку скриптов, выводить часть стилей, отвечающих только за первый экран, выводить нижний контент после загрузки первого экрана (при возможности). Все остальное необходимо догружать после полной прорисовки первого экрана.
12. Кешируйте запросы к базе данных
Постарайтесь обеспечить минимальное количество запросов к базе данных на каждой странице. Кешируйте все, что возможно. Статьи, новости, блоги - все эти материалы спокойно можно кешировать до момента их изменения. Если ваш проект не динамичный в большей степени (чаты, игры, графики), то будет идеально, если вы достигнете результатов: 0-1 запрос на каждой странице. Да, именно 0!
Для динамичных проектов, которые обрабатывают большое количество данных в реальном времени, выберите такие технологии, как, например, веб-сокеты и другие транспорты, обеспечивающие постоянное соединение.
13. Уменьшите число запросов браузера
Чем больше у вас подключенных файлов, тем больше запросов отправляется от браузера к серверу для получения каждого. На это тратятся миллисекунды и для одного файла они, возможно, не играют большую роль. Но если таких файлов 40-50 а то и 100, то в сумме существенно увеличивается время загрузки страницы.
Старайтесь хранить все Javascript-ы, скажем, в одном или двух файлах. То же самое и со стилями CSS. Даже если вы используете много плагинов и имеете сложную архитектуру, всегда объединяйте файлы по максимуму. При таком раскладе вы получите, разумеется, 1 большой файл, вместо 10 маленьких. Но если вы следуете всем вышеуказанным пунктам данной статьи, то это не страшно, так как в любом случае клиент будет кешировать этот файл у себя. А вот в перспективе будет сэкономлено много байтов заголовков. Было 10 запросов заголовков, стало 1. И если условно, на один заголовок требуется 20-50мс, то для 9 это уже 180-400мс, что весьма существенно для общей загрузки страницы.
14. Оптимизируйте ваш код
Если вы используете какую-то систему управления сайтом, скорее всего, на каждой странице у вас подключается много модулей, которые вовсе не используются. Это существенно увеличивает время обработки скрипта и, в последствии, от запроса до выдачи готовой страницы уходит не мало времени. Отключайте/удаляйте все ненужное, пусть каждая страница вашего сайта будет функционировать в меру необходимого. Не стоит подключать многочисленные модули и библиотеки в надежде, что вдруг что-то пригодится.
Если же вы сами разрабатываете систему, то данный пункт вы спокойно можете проработать при проектировании сайта. Всегда старайтесь измерять используемую память и нагрузку вашим скриптом на сервер. Ведь чем меньше нагрузка и потребляемые ресурсы, тем быстрее они обрабатываются.
15. Выберите правильный и хороший хостинг
Этот пункт не мог остаться в стороне. Как показывает практика, очень много людей выбирают хостинг за 1 рубль или вовсе бесплатный, и, как следствие, получают соответствующее качество. К выбору хостинг провайдера лучше отнестись с большей внимательностью. Хорошим фактором качества является умная и доброжелательная техническая поддержка, так как именно они, в основном, собирают дистрибутивы, оптимизируют со временем свои сборки. И именно они отвечают за бесперебойную работу вашего сайта.
Под рекомендации попадает достаточное количество хостинг провайдеров. Мы советуем обратить внимание на одного из наших партнеров Макхост, так как, по нашему мнению, они заслуженно получают свою прибыль, как качеством обслуживания, так и быстрым откликом своих серверов.
Бонус
- Согласно исследованиям Strangeloop, более 57% посетителей уходят с сайта, который загружается более 3х секунд;
- Когда сайт тормозит из-за большого количества графики, примерно 75% покупателей решают уйти на сайты конкурентов;
- Примерное время ожидания загрузки сайта у терпеливых пользователей равно 2 секундам;
- 8% самих пользователей считают, что их уход сайта связан с долгой загрузкой контента;
- Чем быстрее загружается сайт, тем выше конверсия;
- Более 85% посетителей ожидают, что сайт загрузится на мобильном устройстве так же быстро, как и на компьютере. Если они не получают этого, то просто покидают сайт.
Источник бонуса: gomez.com
Русский
English