При создании клиентоориентированного сайта вам необходимо учесть и продумать множество вещей, начиная от творческих (дизайн, наполнение) и заканчивая техническими (верстка, размещение в сети Интернет). Для клиентов важна каждая мелочь, поэтому важно смотреть не только на внешнюю сторону вашего проекта - то, что увидит пользователь - но и на внутреннюю, а именно, как быстро пользователь это увидит. Исследования показывают, что примерно половина пользователей ожидает, что сайт загрузиться менее чем за две секунды, а 40% пользователей закроют сайт, если на его загрузку уйдет более трех секунд. Поэтому крайне важно, чтобы ваш сайт загружался быстро, иначе вы рискуете потерять значительную часть своих клиентов. Что же вы можете сделать, чтобы уменьшить время загрузки вашего сайта?
1. Сократите кодЧем объемнее код вашего проекта, тем больше он весит, а значит, тем большее время требуется для его загрузки. Поэтому в первую очередь вам нужно убедиться, что код оптимизирован. Особенно это касается первой, посадочной страницы, на которую попадает пользователь - будет лучше отказаться от тяжелых скриптов JavaScript и Ajax либо убрать их в нижнюю часть страницы. Придерживайтесь известного принципа KISS - Keep it short and simple - пусть код будет коротким и простым.
Сервис PageSpeed Insights от Google советует убрать внешний файл JavaScript из верхней части страницы, так как цикл операций, который требуется выполнить для его загрузки, значительно тормозит загрузку страницы. В этом случае рекомендуется либо сделать код JavaScript встроенным, либо загружать этот код после загрузки верхней части страницы.
Если вы хотите узнать, все ли в порядке с JavaScript на странице вашего сайта, воспользуйтесь этим сервисом: https://varvy.com/tools/js/
Этот совет также касается HTML и CSS-кода. Как и в случае с JavaScript, особое внимание уделите внешним файлам - к примеру, внешним таблицам стилей, которые по возможности лучше вставить в HTML.
2. Используйте компрессию сайтаСуществует несколько технологий, при помощи которых вы можете сжать данные, благодаря чему можно уменьшить размер текстовых ресурсов, а значит, и время загрузки страниц вашего ресурса. К примеру, воспользуйтесь gzip: эта утилита минимизирует запросы к серверу со стороны браузера. Воспользоваться ею можно в протоколе HTTP.
Проверить, используется ли на вашем сайте gzip для сжатия данных, можно на этом ресурсе: http://www.gidnetwork.com/tools/gzip-test.php
А пройдя по следующей ссылке, вы сможете выяснить, применяется ли в целом какая-либо технология сжатия на вашем сайте: http://www.whatsmyip.org/http-compression-test/
3. Сократите количество переадресацийПереадресация 301 часто используется для того, чтобы провести перенаправление с одного адреса на другой. Однако это чревато тем, что будут задействованы дополнительные сетевые циклы, из-за которых время загрузки сайта может увеличиваться, особенно если речь идет о мобильных устройствах. Поэтому лучше уменьшить количество переадресаций или вообще отказаться от них.
Проверить свой сайт на наличие переадресаций вы можете при помощи этой программы (есть бесплатная версия): https://www.screamingfrog.co.uk/seo-spider/
4. Уменьшите число плагиновДанный пункт касается тех, кто пользуется CMS: Wordpress, Joomla или какой-либо другой. Регулярно проверяйте список плагинов, которые вы используете, на предмет ненужных или уже неиспользуемых. Уменьшение количества плагинов положительно скажется на загрузке вашего сайта и его работе в целом. Если вы используете Wordpress в качестве системы управления контентом, то оптимизировать число плагинов вы также можете при помощи специального плагина P3 (Plugin Performance Profiler): https://wordpress.org/plugins/p3-profiler/ Этот плагин покажет вам данные, касающиеся производительности других плагинов, и того, как каждый из них влияет на работу сайта. Это поможет вам определить, от каких плагинов следует отказаться в первую очередь.
5. Оптимизируйте изображенияРазмер картинок на сайте напрямую влияет на время загрузки ресурса. Все изображения обязательно нужно оптимизировать: ставить правильный размер, формат и сжимать. Также будет полезно избавиться от так называемого цифрового мусора: различных данных, которые попадают в изображение при его обработке.
6. Пользуйтесь кэшем браузераИспользуя кэширование, вы можете значительно выиграть в скорости загрузки вашего сайта: когда пользователь первый раз заходит на ваш сайт, в кэше его браузера сохранятся некоторые JavaScript и CSS-файлы, которые затем будут автоматически показываться при его следующих визитах, а браузеру не придется тратить время на их загрузку. Для кэширования необходимо правильно настроить HTTP-заголовок Expires. Вы можете сделать это, прописав в файле.htaccess, который находится в корневой папке, следующие строки:
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/png "access plus 1 month"
В данном случае у всех типов установлен срок в 1 месяц, но вы можете изменить время на то, которое вам нужно: кэш может храниться определенное количество лет (years), месяцев (months), недель (weeks) или дней (days).
Если вы пользуетесь какой-то определенной CMS, то можете установить для этого специальный плагин. В случае с Wordpress подойдет W3 Total Cache: кэширование включается в настройках (выберите Settings у данного плагина в списке всех установленных плагинов, затем General - поставьте галочку у “Toggle all caching types on or off (at once)”).
7. Следите за производительностью сайтаОчень важно постоянно мониторить производительность вашего сайта - даже тогда, когда, как вам кажется, вы оптимизировали все, что было можно. Для этого существуют специальные бесплатные ресурсы, самые известные из которых будут перечислены ниже:
- уже упомянутый выше Page Speed Insights:
https://developers.google.com/speed/pagespeed/insights/?hl=ru
Этот инструмент от Google замеряет скорость загрузки вашего веб-ресурса (от 0 до 100 баллов; чем выше балл, тем лучше). Сервис даст вам рекомендации по улучшению производительности, а также покажет, какие пункты оптимизации вы выполнили. Имейте в виду, что так как в Page Speed Insights вносятся правки и корректировки, то количество баллов, которые получил ваш сайт, также может меняться. - Pingdom Website Speed Test:
http://tools.pingdom.com/fpt/
Хороший англоязычный сервис для проверки скорости загрузки вашего ресурса. Будет особенно полезен тем, кто администрирует международные ресурсы, так как позволяет выбрать место, из которого будет производиться тестирование: США, Австралия или Швеция (результат будет отличаться). Выводит множество разных данных и дает рекомендации. - Loadimpact:
https://loadimpact.com/
Этот сервис позволяет сгенерировать несколько запросов на ваш сайт, путем чего можно выяснить, во-первых, среднюю скорость загрузки вашего сайта, во-вторых, понять, как ваш сайт поведет себя при определенном количестве запросов (выдержит ли он нагрузку). - LoadStorm:
http://loadstorm.com/
При помощи этого сервиса вы можете запустить достаточно серьезное тестирование своего сайта. Бесплатная версия сервиса позволит вам протестировать свой ресурс при помощи 10 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.
Если вы выполните каждый из предложенных в этой статье пунктов, вы сможете значительно уменьшить время загрузки вашего сайта. Но при этом не забывайте, что оптимизация должна происходит не во вред пользователям: картинки должны оставаться привлекательными, навигация удобной, а информация понятной и доступной.
Делитесь в комментариях своими идеями, как можно ускорить загрузку веб-ресурса.
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.
Итак, поехали:
1. Уменьшите количество HTTP-запросов
80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.
Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?
2. Помещайте CSS файлы в начале страницы
Помещая подключение к css файлам в хедере страницы мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно - сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.
3. Помещайте javascript в конец страницы
Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
Кроме того, внешние.js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.
4. Минимизируйте css и javascript
Минимизация файла - это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания
Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.
6. Используйте кэш браузера
Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.
Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/bmp "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css
7. Используйте CDN для загрузки популярных JavaScript библиотек
Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.
8. Оптимизируйте ваши изображения
Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла.
- GIF – идеально подходят для изображений с несколькими цветами, например логотип.
- JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
- PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Вот несколько онлайн сервисов для оптимизации изображений:
9. Не масштабируйте изображения
Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.
10. Используйте Gzip- сжатие
Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.
Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.
Accept-Encoding: gzip, deflate
Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.
Content-Encoding: gzip
Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.
Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$
Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.
Ну вот собственно и все, что я хотел рассказать. В данной статье я постарался перечислить все основные способы клиентской оптимизации для увеличения скорости загрузки веб-страницы. Кроме клиентской оптимизации существует еще и серверная оптимизация. Но это уже тема для отдельной статьи.
Если что-то упустил или у Вас есть, что добавить – пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!
Задержка просмотра страницы даже на одну секунду может снизить количество просмотров страниц, конверсий и ухудшить уровень удовлетворенности клиентов.
Просто скопируйте свой CSS и нажмите “Compress” (Сжать).
5. Размещайте JavaScript-файлы внизу страницы
Если вы размещаете JS-файлы вверху, перед основным контентом, как делают на большинстве сайтов, они будут подгружаться раньше остального контента, и это заставит ваших пользователей ждать.
Чтобы не задерживать загрузку страницы, размещайте JS-скрипты внизу страницы, прямо перед закрытием тэга body . Тогда большая часть вашего сайта сможет подргужаться перед загрузкой скриптов.
Еще один метод – использовать атрибуты defer и async , размещая файлы JavaScript на сайте.
Важный момент – прежде чем использовать их, убедитесь, что понимаете разницу между ними:
- Атрибут async подгружает скрипты раньше остального контента страницы, это значит, что скрипты могут быть загружены вне положенной очереди. Более лёгкие файлы подгружаются первыми. Это может быть хорошо для одних скриптов, но губительно для других.
- Атрибут defer загружает ваши скрипты после того как подгрузится контент, также в определенном порядке. Убедитесь, что при такой очередности ваш сайт загружается корректно.
Например, вы можете взять стандартный скрипт:
И добавить немного кода, чтобы он подгружался тогда, когда вы хотите:
Важность ваших скриптов будет определяться атрибутами, которые вы им присвоите, так, более важные скрипты получат атрибут async , менее важные – defer .
Всегда тестируйте все внесенные изменения, чтобы не сломать свой сайт.
Напоминание: Проверить скорость загрузки страниц можно с помощью сервиса Google PageSpeed Insights либо GTMetrics .
С ростом ожиданий пользователей будут увеличиваться размеры страниц наших сайтов и тянуть их вниз. Мы, как маркетологи, не можем этого допустить. Помните, что задержка даже в 1 секунду может привести к потере лида.
Скорость загрузки сайта влияет на удобство просмотра для пользователей. Современные юзеры не любят долго ждать, пока страница сайта или отдельные ее элементы полностью загрузятся. Соответственно люди покидают такие сайты, а это сказывается на поведенческом факторе, что в свою очередь ведет к падению прибыли или понижению позиций сайта в поисковых системах. К тому же, сами поисковики учитывают скорость загрузки страниц и это в маленькой мере, но все же влияет на ранжирование.
Как узнать скорость сайта?Скорость сайта определяется как Page Speed, и есть несколько способов ее узнать данный показатель. Детальнее об этом читайте в нашей статье .
Как ускорить сайт без вреда?Красный - очень важно, Оранжевый - желательно, Зеленый - обратите внимание.
1. Оптимизируйте картинкиКак вы сами понимаете, картинки могут быть слишком большие и слишком долго загружаться.
Лучше всего оптимизацию картинок проводить через сервис , который предоставляет Yahoo. Этот сервис уменьшает вес картинки без потери качества и сохраняя ее расширение. Если вас это не устраивает, то можете вручную оптимизировать изображения Фотошопом или любой другой графической программой. Также хотим дать совет на случай если решите сами оптимизировать картинки - не ухудшайте качество на столько сильно, что пользователю будет противно смотреть на сайт.И если оптимизация графики приводит к таким результатам, то лучше оставьте все как есть.
Какой формат использовать? Лучше всего используются jpg и png, у первого лучше степень сжатия, зато у второго поддерживается прозрачный фон.
2. Используйте кэш браузераКогда пользователь заходит на страницу Вашего сайта, все элементы (графика, текст, CSS-стили и т.д.) загружаются к нему в браузер. Если сайт сообщит браузеру, что все эти элементы нужно какое-то время хранить на компьютере пользователя, то при следующем посещении этой же страницы (или других страниц вашего сайта) загрузка сайта пройдет на много быстрее. Т.к. браузер загрузит лишь те данные, которые изменились, а все остальные возьмет из памяти браузера (кэша). Чтобы включить кэширование, нужно в файл.htaccess записать такой код:
ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
Здесь срок хранения указан 1 месяц, т.к. мы считаем его оптимальным. Но можно ставить значения "7 days" или "1 year" и т.д. Также стоит обратить внимание, что для исполнения этого кода на хостинге должна быть включена работа модуля mod_expires.c. И хотя этот модуль включен на большинстве хостингов, все же редко встречаются такие компании, которых он выключен. Также для правильного кэширования скриптов, рекомендуют добавить такой код:
FileETag MTime SizeExpiresActive on
ExpiresDefault "access plus 1 month"
3. Включите gzip-архивацию
Суть ее проста: когда клиент пытается посмотреть страницу браузера, то сервер на котором расположен ваш сайт фактически на лету архивирует информацию, и передает пользователю меньше данных, чем в том случае, если бы он передавал полные файлы без архивации. Эти данные распаковываются в браузере пользователя, и тот видит страницу вашего сайта.
4. Оптимизируйте CSSКак правило это не дает значимого результата для ощутимого пользователю ускорения сайта, но все же для увеличения Page Speed стоит оптимизировать CSS файлы. Сегодня существует множество сервисов, которые делают это онлайн. Не бойтесь, ваши стили будут все также работать, просто в них уберутся лишние пробелы, а также та информация, которую можно сократить - будет сокращена.
6. Старайтесь не использовать редиректРедирект - это перенаправления с одной станицы на другую. Хотя на него не уходит много времени, но все же оно тратится и может быть заметно для пользователей и поисковых машин. Поэтому используйте его только там, где очень нужно (например, при переезде с одного домена другой).
7. Асихронная загрузка JavaScript и CSSОбычно страница загружается так - сначала стили и скрипты, а потом ее основной контент. Причем все загружается последовательно (синхронно), и пока CSS или JS не загрузится, пользователь не увидит основной контент страницы. Так вот, многие рекомендуют делать асинхронную загрузку CSS, JS и основного содержимого страницы (текста, картинок и т.д.).
Мы не рекомендуем это включать, т.к. если какой-то скрипт или CSS-файл у Вас грузится долго, то он также долго будет грузиться и при асинхронной загрузке. Просто в таком случае пользователь чуть раньше увидит текст страницы, но в то же время, если он поспешит нажать куда-то, что использует JavaScript, который еще находится в стадии загрузки, то пользователь скорее всего увидит ошибку.
Чтобы этого избежать, лучше проверьте и оптимизируйте свои скрипты и стили, чтобы они быстрее загружались.
8. Верхняя часть страницы - вверху кодаСтарайтесь чтобы элементы которые находятся в верхней части реальной страницы сайта, находились в верхней части кода. Это будет эффективным, когда у Вас длинная страница, и пользователь сразу увидит ее верх, а нижняя часть уже догрузится в то время, пока пользователь смотрит на верхнюю часть страницы.
9. Используйте инструмент от GoogleОн называется Page Speed - там будут найдены и основные проблемы сайта со скоростью, и будут даны советы по их исправлению.
Если у вас есть советы по улучшению скорости сайта - оставляйте их в комментариях, и мы с радостью добавим их в статью. А если есть вопросы - смело их задавайте, т.к. наши эксперты очень быстро на них отвечают.
Медленный сайт не нравится никому - ни пользователям, ни поисковикам. При нынешней скорости интернета люди уже не готовы долго ждать загрузки страницы. Это вам не подключение по диал-апу, где ожидание было неизбежно. А поисковые системы, борясь за качество результатов поиска, не хотят выдавать пользователям плохие (в данном случае, медленные) сайты. Поэтому при прочих равных медленный сайт будет в выдаче ниже, чем его более шустрые конкуренты.
Какую скорость загрузки считать нормойЧем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы - это вполне нормально.
От чего зависит скорость загрузкиВ загрузке сайта участвуют две стороны - браузер пользователя и сервер, где физически расположены файлы сайта. Между этими сторонами происходит обмен данными.
Тормозить загрузку сайта могут проблемы на каждой из сторон и в промежутке между ними.
- Медленный сервер: может банально не хватать оперативной памяти или ядер в процессоре, как у обычного компьютера.
- Медленный движок сайта (CMS): если код был написан неопытными программистами без учета его быстродействия.
- Сервер далеко от пользователя: например, сервер с файлами сайта физически находится в Москве, а на сайт заходит пользователь из Владивостока.
- Много файлов: для отображения страницы браузеру нужно загрузить много картинок, файлов, стилей, скриптов и шрифтов.
- Тяжелые файлы: плюс эти файлы много весят.
Все шаги по оптимизации скорости сайта направлены на устранение данных проблем.
Как проверить скорость сайтаИз множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed . Работать с ним просто - указываем адрес сайта и жмем кнопку «Анализировать».
В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):
- Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP - First Contentful Paint).
- Через какое время пользователь видит основной контент в браузере (DCL - DOM Content Loaded).
- Насколько сайт оптимизирован в плане скорости загрузки.
- Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).
Желательно попасть в зеленую зону - и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».
Еще один хороший сервис для проверки скорости загрузки, правда, на английском - Pingdom . Отличительная черта - вот такие красивые графики (называются waterfall - водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:
А теперь к сути:
Как ускорить сайт Шаг 1. Оптимизация картинокНеоптимизированные картинки - самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.
На что смотрим:
Размер картинок (ширина и высота)
Если вы отсняли товар и получили фотографии шириной около 5000 пикселей, можете смело уменьшать ширину до 1600, в большинстве случаев этого будет достаточно. Исключением будут те сайты (в основном, интернет-магазины), где можно рассмотреть товар с «лупой», но и там увеличенная картинка загружается не сразу, а только если человек решил воспользоваться этим инструментом.
Вес картинок (килобайты)
Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla .
Превью к большим картинкам
Если у вас есть фотографии товаров (или выполненных работ) и есть страница с их списком, разумно будет сделать небольшие превью (уменьшенные картинки). Тогда список товаров, работ или фотографий будет загружаться быстрее.
Например, Спортмастер использует картинки товаров в трех вариантах:
Картинка для списка товаров (весит 7 Кб)
Картинка для карточки товара (весит 18 Кб)
Картинка для просмотра товара с «лупой» (весит 942 Кб)
Представьте, как долго загружался бы список товаров, если бы Спортмастер использовал только исходные картинки (те, что по 900 с лишним килобайт).
При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:
Gzip - это программа для сжатия файлов на сервере (аналог zip-архивов на компьютере). При включенном Gzip сервер, перед тем как отправлять браузеру код страницы (а также скрипты, стили и прочую текстовую информацию), сперва заархивирует эти файлы. Браузер получит архив и распакует его на компьютере пользователя. Сжатая информация будет передаваться быстрее между браузером и сервером.
Как включить Gzip-сжатие:
Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http {...} и перезапускаем сервер:
gzip on;
gzip_static on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.
Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):
Шаг 3. Кэширование на стороне браузераКогда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).
Чтобы использовать кэш браузера, нужно указать ему, какие типы файлов с вашего сайта сохранять в кэш. Как это сделать:
Через файл htaccess (кэшируем статические файлы на 10 дней):
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType image/svg+xml "access plus 10 days"
ExpiresByType text/css "access plus 10 days"
Для Nginx добавляем в конфигурацию:
server {
...
location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {
root /var/www/user/data/www/site.ru;
expires 10d;
}
...
}
Если к настройкам сервера доступа нет, опять же пишем в техподдержку и просим настроить кэширование статических файлов.
Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:
Обратите внимание, что настроить кэширование вы можете только для своих ресурсов. Изменить настройки кэша, например, для скриптов Яндекс.Метрики уже не получится.
Шаг 4. Минимизация css- и js-файловМинимизация - это сокращение объема файла за счет удаления пробелов, пустых строк, комментариев, использования более коротких имен переменных и т.п. Браузеру все равно, с каким файлом работать - обычным или минимизированным, а весит такой файл меньше.
Пример обычного кода:
Speedometer-wrapper
{
position
: relative
;
}
.speedometer-wrapper .list
{
margin-top
: 80px
;
margin-left
: -20px
;
padding-bottom
: 85px
;
}
После минимизации:
Speedometer-wrapper {position :relative }.speedometer-wrapper .list {margin-top :80px ;margin-left :-20px ;padding-bottom :85px }
Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей - подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант - 85 Кб. Чувствуете разницу?
Единственный минус минификации - теряется читабельность файла. Если понадобится внести изменения в сжатый файл - сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS - они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.
PageSpeed и здесь заботливо показывает нам список файлов, размер которых можно уменьшить за счет минимизации:
Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет прослыть «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился - тогда отрисовка остановится.
Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) - в конце страницы, перед закрывающим тегом .
...
...
...
Тогда браузер загрузит стили, необходимые для отрисовки, и начнет показывать страницу пользователю, параллельно загружая необходимые скрипты (которые затем обеспечат интерактив - слайдеры, вкладки и пр.).
Шаг 6. Лишние плагины или счетчикиИногда в коде страниц остаются ссылки на плагины или модули, которые уже не используются на сайте. Например, сначала верстальщик подключил один плагин для слайдеров, а затем заменил его на новый, но не удалил старый. Или остаются коды от счетчиков, статистику по которым вы уже не смотрите. Обязательно уберите такой «мусор» из кода.
Старайтесь оптимизировать использование дополнительных скриптов. Например, если у вас есть слайдеры на трех страницах сайта, то на всех страницах используйте один и тот же плагин для слайдера - не надо каждый раз подключать какой-то особый скрипт.
Шаг 7. Использование CDNCDN (Content Delivery Network, сеть доставки контента) - это сеть из множества серверов, распределенных географически по стране или всему миру. Каждый из серверов дублирует контент с основного сервера (контент дублируется по первому запросу пользователем и хранится в течение какого-то времени).
Когда пользователь, например, из Хабаровска, хочет загрузить что-то из CDN, то он получает контент не с основного сервера (который может быть, например, в Москве), а с ближайшего к пользователю сервера (который может быть и в том же Хабаровске). Широка страна моя родная, поэтому запрос Хабаровск-Хабаровск пройдет быстрее запроса Хабаровск-Москва. Пусть на миллисекунды, но в умножении на число файлов и их размер это может дать хорошее увеличение скорости.
Как правило, CDN используют в двух случаях:
- Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
- Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath . Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».
Чтобы браузер делал меньше обращений к серверу (а это и есть http-запросы), нужно сократить число необходимых ему файлов. Например, если у вас есть три отдельных скрипта (для слайдера, для модальных окон и для всплывающих подсказок), то можно объединить их в один файл, а потом еще и минифицировать (см. шаг 4).
Так как объединять файлы вручную не совсем удобно (если в будущем понадобится заменить один из скриптов), то обычно настраивают их автоматическое слияние. У большинства CMS для этого есть свои плагины (например, Autoptimize для WordPress).
Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.
Шаг 9. Оптимизация шрифтовПостарайтесь использовать один единый шрифт на всем сайте. Это не только добавит сайту эстетичности, но и уменьшит объем загружаемых файлов для отображения шрифтов.
Также сократить число файлов можно, отказавшись от использования устаревших форматов. Раньше каждый шрифт загружался в форматах eot, ttf, woff, svg для корректного отображения в браузерах. Сейчас современные браузеры позволяют ограничиться только двумя форматами - woff и woff2.
Кроме того, популярные шрифты можно загружать с Google Fonts . Во-первых, это снимет нагрузку с вашего сервера. Во-вторых, файлы со шрифтами уже будут оптимизированы, это перекладывается с ваших плеч на Google (что, согласитесь, приятно).
Шаг 10. Сокращение HTML-кодаПомимо сжатия файлов стилей и скриптов (шаг 4), можно настроить минимизацию и для HTML-кода самой страницы. Думаю, это актуально для длинных страниц - статей в блогах, больших списков товаров и т.п. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).
Шаг 11. Оптимизация работы сервераЕсли у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно попробовать проапгрейдить его параметры. Например, добавить оперативной памяти или заменить процессор. Также сисадмин может провести «уборку» на самом сервере - удалить неиспользуемые и обновить текущие модули.
В случае с виртуальным хостингом (без доступа к настройкам сервера) вы можете посмотреть в сторону перехода на более дорогие тарифы, если на них лучше технические характеристики сервера.
Шаг 12. Оптимизация скриптов и баз данныхОдин из этапов загрузки сайта - это генерация сервером итогового HTML-кода, который он отдаст браузеру. Этот код генерируется движком сайта (CMS). Если движок написан неграмотно, то он может «собирать» страницу весьма долго, делая лишние запросы к файлам и базам данных, используя «медленные» алгоритмы программирования и т.д.
Поэтому при выборе CMS для сайта рекомендуется смотреть в сторону популярных движков (Битрикс, Open Cart, WordPress, MODx и т.д.), которые зарекомендовали свое быстродействие и надежность. А так как эти системы постоянно дорабатываются (в том числе, и в плане скорости работы), то следует регулярно обновлять CMS на своем сайте.
Нет слоупокамПозаботьтесь о быстрой загрузке своего сайта. Помните, что в результатах поиска много конкурентов, и чем быстрее загрузится ваш сайт, тем меньше других сайтов человек успеет открыть в соседних вкладках.
Если нужна помощь в оптимизации скорости загрузки сайта - пишите , посмотрим ваш сайт и подскажем, можно ли его ускорить.
