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

Как узнать скорость сайта?

Скорость сайта определяется как 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 Size


ExpiresActive 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 - там будут найдены и основные проблемы сайта со скоростью, и будут даны советы по их исправлению.

Если у вас есть советы по улучшению скорости сайта - оставляйте их в комментариях, и мы с радостью добавим их в статью. А если есть вопросы - смело их задавайте, т.к. наши эксперты очень быстро на них отвечают.

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

Хотите попасть в число избранных и достичь поставленных целей?

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

Быстродействие сайта - один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.

Например, каждая дополнительная секунда загрузки грозит бизнесу потерей 7% целевых действий! Данные анализа Amazon .

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

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

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

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

И все-таки, на какие показатели стоит ориентироваться?

• 1 секунда - отличный, но труднодостижимый результат.
• 2–3 секунды - стандартное время отклика большинства успешных ресурсов.
• 3–5 секунд - маленькая, но для некоторых проектов терпимая скорость;
• 6–10 секунд - столь низкий показатель негативно влияет на продвижение;
• от 11 секунд - плачевный результат, при котором надо срочно ускорять сайт.

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

В определенных нишах вполне нормально, если страницы загружаются по 5–6 секунд. Так, широко известная компания OZON не может похвастаться быстродействием интернет-магазина, но это не мешает ей иметь высокую конверсию.

Будет полезно!

Отказ от масштабирования картинок

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

Чтобы браузер каждый раз грузил нужный вариант, установите плагин Imager (для WordPress). Это работает так:

new Imager({ availableWidths: });

Оптимизация JavaScript и CSS

Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить CSS и JavaScript за счет изменения названий переменных (в случае обновления HTML и правильной работы селекторов).

Упростить код несложно - имеется много сервисов: JSCompress или Refresh-SF. Подойдет для этого и Google PageSpeed Insights. После выполнения на нем анализа страницы, нажмите на «Сократить HTML», а затем на «Посмотреть содержание».

Обратите внимание! Лучше всего размещать JS-файлы в конце страницы, а CSS - в начале. Так ваш ресурс произведет на пользователей положительное впечатление как по внешнему виду, так и по скорости.

Оптимизация веб-шрифтов

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

Начните пользоваться новыми форматами WOFF и WOFF2, при этом исключите все наборы символов, кроме кириллицы и латиницы.

Улучшить ситуацию можно при помощи спецификации link rel=«preload» и CSS-свойства font-display. Первый показатель мгновенно указывает браузеру о необходимости загрузки файла шрифта, второй позволяет управлять поведением браузера в случае задержки.

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

Для подключения кэша браузера необходимо создать файл.htaccess и, воспользовавшись модулем expires, прописать в нем выбранные директивы:

• Expires - отвечает за актуальность кэша (можно установить срок от недели до года).
• Cache-Control: max-age - аналог предыдущего заголовка, выполняющий те же функции.
• Last-Modified и ETag - устанавливают в кэше уникальный id для каждого url. В Nginx для статичных файлов они включены по умолчанию.

Как увеличить скорость загрузки сайта на определенном движке?

• WordPress

Для оптимизации CSS и JavaScript в таком случае стоит установить плагин Autoptimize. Можно также загружать откорректированные элементы страницы из PageSpeed Tool.
Учтите, что основой «легкости» ресурса является правильно выбранная тема. Если нынешняя версия тормозит ваш проект, есть смысл ее поменять.

• Opencart

Следует уменьшить размеры статичного контента - для Nix-систем подойдет Google ModPagespeed. Также вы можете воспользоваться Gzip, сжатием изображений.

• Joomla

Оптимизируйте иллюстрации под Web, тогда они будут обладать меньшим весом. Никогда не загружайте картинки с высоким разрешением для их последующего уменьшения через CSS и HTML. Большое количество «неблагополучных» элементов приведут к серьезному замедлению работы сайта.

• 1C Битрикс

В административной панели этой CMS существует немало полезных настроек. Например, «Автокэширование» и «Оптимизация CSS», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.

Заключение

Теперь вы знаете, насколько важно быстродействие ресурса для его конверсии, индексации и ранжирования. Надеемся, статья ответила на все ваши вопросы и помогла оптимизировать сайт с минимальными усилиями!

Медленный сайт не нравится никому - ни пользователям, ни поисковикам. При нынешней скорости интернета люди уже не готовы долго ждать загрузки страницы. Это вам не подключение по диал-апу, где ожидание было неизбежно. А поисковые системы, борясь за качество результатов поиска, не хотят выдавать пользователям плохие (в данном случае, медленные) сайты. Поэтому при прочих равных медленный сайт будет в выдаче ниже, чем его более шустрые конкуренты.

Какую скорость загрузки считать нормой

Чем быстрее, тем лучше. Но в среднем, 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 вы получите готовый список картинок, которые следует оптимизировать:

Шаг 2. Gzip-сжатие

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 и здесь заботливо показывает нам список файлов, размер которых можно уменьшить за счет минимизации:

Шаг 5. Порядок загрузки css- и js-файлов

Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет прослыть «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился - тогда отрисовка остановится.

Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) - в конце страницы, перед закрывающим тегом .

...



...


...

Тогда браузер загрузит стили, необходимые для отрисовки, и начнет показывать страницу пользователю, параллельно загружая необходимые скрипты (которые затем обеспечат интерактив - слайдеры, вкладки и пр.).

Шаг 6. Лишние плагины или счетчики

Иногда в коде страниц остаются ссылки на плагины или модули, которые уже не используются на сайте. Например, сначала верстальщик подключил один плагин для слайдеров, а затем заменил его на новый, но не удалил старый. Или остаются коды от счетчиков, статистику по которым вы уже не смотрите. Обязательно уберите такой «мусор» из кода.

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

Шаг 7. Использование CDN

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

Когда пользователь, например, из Хабаровска, хочет загрузить что-то из CDN, то он получает контент не с основного сервера (который может быть, например, в Москве), а с ближайшего к пользователю сервера (который может быть и в том же Хабаровске). Широка страна моя родная, поэтому запрос Хабаровск-Хабаровск пройдет быстрее запроса Хабаровск-Москва. Пусть на миллисекунды, но в умножении на число файлов и их размер это может дать хорошее увеличение скорости.

Как правило, CDN используют в двух случаях:

• Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
• Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath . Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».

Шаг 8. Сокращение числа http-запросов

Чтобы браузер делал меньше обращений к серверу (а это и есть 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 на своем сайте.

Нет слоупокам

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

Если нужна помощь в оптимизации скорости загрузки сайта - пишите , посмотрим ваш сайт и подскажем, можно ли его ускорить.

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

• Больше половины посетителей покидают страницу, которая грузится более 3-х секунд;
• Сайт, который грузится 3 секунды, имеет на 25% меньше просмотров, на 50% больше отказов и на 25% меньше конверсии , чем сайт, который грузится 1 секунду;
• Прогресс-бар увеличивает время ожидания загрузки страницы;
• Скорость загрузки напрямую влияет на продажи и на позиции сайта;

Определить скорость загрузки сайта совсем несложно. Например, можно воспользоваться следующими популярными онлайн сервисами:

Рассмотрим способы ускорить время загрузки страниц сайта. По факту все способы очень просты и чаще всего сводятся к оптимизации "веса" страницы и грамотной загрузке кода.

В интернете довольно много материала по этой теме. Я постарался изложить все способы компактно и только по делу. Начнем.

1. Включить сжатие gzip

На каждом сайте есть подключаемые файлы со стилями.css и скриптами.js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.

Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):

mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Проверить включено ли сжатие можно на сайтах

Если что-то не получается, то смело пишите вопрос в тех.поддержку Вашего хостинга . Зачастую бывает, что у них самих что-то не включено в настройках сервера.

2. Включить кэш браузера

Включение кэша браузера подключается добавлением пары строк кода все в тот же файл .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"

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

Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.

Это самое простое, что можно было сделать, идем дальше.

Возможно Вам будет интересно:

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

Использование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.

Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.

Если сайт использует в качестве фона большое изображение, то его можно очень сильно сжать. Например, мне удалось сжать с 300 Кбайт до 86 Кбайт картинку с задним фоном для одного из сайтов.

4. Подгружать файлы с другого домена

У браузеров есть ограничение на количество одновременно исполняемых запросов (не более двух параллельно). Другими словами, если на сайте будет куча изображений (даже маленьких), это сильно увеличивает время его загрузки. Поэтому применяют следующую хитрость:

Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее фото лежало по адресу /img/foto.jpg , то теперь адрес нужно поменять на img.site.ru/img/foto.jpg . Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.

Примечание

Сейчас довольно модно применять "CSS-спрайт ". Смысл следующий: к примеру у нас на сайте есть куча маленьких картинок для фона (я думаю это знакомо каждому). Все эти картинки можно объединить в одно большое изображение, а с помощью CSS "вырезать" нужные куски в нужных местах.

5. Оптимизация CSS и JS

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

Вроде бы такая простая "махинация", а это еще небольшой бонус к уменьшению размера страницы.

6. Правильное расположение CSS и JS

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

Примечание

Если Вы подгружаете библиотеку AJAX (от Google), то, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:

window.jQuery || document.write("");

Смысл довольно прост. Сначала пытаемся загрузить библиотеку напрямую с ajax.googleapis.com, если это не удается, то грузим со своего сайта копию библиотеки.

Примечание

Если у Вас уникальный случай, что сайт все равно очень тяжелый и грузится долго, то сделайте у себя на сайте "прогресс-бар". Этим вы показываете пользователю, что сайт грузится и нужно лишь чуть-чуть подождать.

Скорость работы сайта – один из самых важных показателей при создании сайта и интернет-приложений.

Согласно исследованиям различных аналитиков из Google, люди обычно просматривают менее первых 25 секунд видеоролика, а некоторые даже меньше 10 секунд

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

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

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

Ускорение сайта методом оптимизации изображений

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

Рассмотрим пример, показывающий, почему это так важно. В последнее время разработчиками iOS и создателями приложений было выявлено, что выведение готового рисунка на дисплеях Retina занимает в 2-4 раза больше времени и места на дисковом пространстве мобильного телефона, чем это было в предыдущих версиях при простой загрузке и запуске приложения.

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

Форматы изображений

Форматирование изображений – это наиболее важная тема, и является таковой потому, что каждый знает, что различные форматы влияют на скорость загрузки изображения. Однако существует сформировавшееся мнение на этот счет, которое мы можем использовать де-факто как стандарт. JPEG – для фотографий, GIF – для плоских изображений, содержащих малое количество цветов, и PNG – для всех остальных. Большинство веб-дизайнеров и разработчиков, которых я знаю, используют PNG практически для всего, кроме одноцветных и двухцветных кнопок, где они используют GIF.

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

Код изображения

Самое плохое, что мы можем сделать и отрицательно повлиять на скорость загрузки изображения, это позволить коду автоматически выставлять размеры изображения. Ну что ж, можно сказать: «Разрешим коду сделать ___ для нас». В таком случае обычно говорят: «Можешь сделать лучше – сделай сам», и это действительно правильно. Используя такие показатели, как width=’60px’ height=’50px’, можно действительно снизить нагрузку на сервер и время загрузки им изображения, так как сервер считывает информацию о странице и видит поставленные перед ним задачи. Потому, убедитесь, что вы на верном пути и сделайте так со всеми вашими изображениями.

Инструменты оптимизации изображений

Инструменты всегда полезны. Хорошо, в большинстве случаев… Иногда они мешают и отвлекают внимание, но в данном случае они действительно будут очень полезными. Если вам удастся найти замечательный инструмент для оптимизации изображений, прежде всего, пожалуйста, напишите об этом в комментариях, так как мы всегда в поиске лучшего. Следующие несколько инструментов – мои любимые. Мне нравится ImageOptim для Mac и Riot для Windows. Они очень отличаются друг о друга, но выполняют одну задачу.

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

Ускорение загрузки сайта засчет оптимизация CSS и JavaScript

CSS и JavaScript являются важными языками, когда дело доходит до веб-дизайна и, особенно, при создании динамического контента. Я считаю, что люди часто забывают о том, что могут оптимизировать свой динамический контент, а также не улучшают свои JavaScript и CSS. Конечно, это не самые необходимые вещи для небольших сайтов, но для больших – это действительно важно, особенно для тех, которые полагаются на большое количество дизайнерских решений. Давайте рассмотрим несколько «Правил для JavaScript и CSS», которые достаточно хорошо стандартизированы при создании веб-приложений.

Первое правило для CSS и JavaScript

• Если вы можете сделать это в CSS , то делайте в CSS

Мы часто забываем, что у нас есть такой замечательный инструмент и, я бы сказал, система CSS является самым замечательным, что есть у веб-дизайнера. Также добавил бы, что дизайнеры слишком быстро переводят работу в Photoshop (но это их работа и не будем осуждать их за это). При выполнении дизайна вам следует учитывать тот факт, что кроме графического редактора, ваш браузер тоже может вам кое-чем помочь, если вы воспользуетесь CSS3. Используйте все его преимущества! Располагая инструментом, где макеты можно выполнять действительно быстро, вам уже не потребуется в дальнейшем использовать для их компоновки HTML. Уверен, что вы сможете реализовать все при помощи CSS!

Второе правило для CSS и JavaScript

• Уменьшайте, уменьшайте, уменьшайте!

Минимализация кода – это, пожалуй, один из самых простых и лучших способов повысить скорость загрузки сайта. Обратите внимание, что мы говорим о миллисекундах, но и они влияют позитивно, особенно при использовании, например, библиотеки jQuery. Помните, что установив плагин для JavaScript/CSS и задав настройки для скачивания уменьшенной версии кода сайта (ее не надо редактировать), вы улучшите скорость загрузки сайта, потому сделайте так! Моими любимыми инструментами являются Code Minifier для Mac, Minify для Windows и JSCompress /CSSCompressor для тех, кто хочет работать в смешанной кросс-браузерной платформе. Хорошего уменьшения!

Третье правило для CSS и JavaScript

• Скажите In-line «нет-нет»

Плохой практикой является использование in-line в CSS или JavaScript, особенно, когда дело доходит до CSS. Здесь проблема не только в том, что это устаревший метод, но и в том, что если оставить CSS в коде HTML (особенно в in-line), это будет читаться так: HTML/CSS/HTML/CSS/HTML/CSS/HTML/CSS, а не просто HTML => CSS. Вы знаете, что это очень плохо для времени серверной загрузки, и может ухудшить большинство веб-приложений, использовавших такой подход к отдельным файлам. Это, конечно, не выведет из строя ваш сайт, но может привести к тому, что нужно будет звать мастера, который станет разбирать, где ошибка – а это уже важно. Потому, всегда будьте тем, кто может решить проблемы, а не тем, кто ее создает.

Четвертое правило для CSS и JavaScript

• Перемещайте вниз

Если требуется вставить JavaScript на страницу, сделанную в HTML, и нет возможности избежать этого, то расположите его в нижней части HTML-документа. Это поможет уменьшить время загрузки сайта, так как все функции и процессы, заложенные в JavaScript, будут выполняться после загрузки страницы. А еще это уменьшит вероятность того, что ошибка сможет повлиять на работу всей системы. Поэтому, лучше убедиться, что ваш сайт будет работать нормально и предотвратить не желаемые события, способные даже повредить браузеры.

Пятое правило для CSS и JavaScript

• DOM-оптимизация

По возможности уменьшите DOM. Например, вы часто используете jQuery, который создает много элементов DOM или все считывает через DOM – все это значительно замедляет работу вашего сайта. Есть одна пословица, которая мне нравится и ее можно использовать в этом случае: «Если вы так делаете потому, что это единственный верный способ, значит, существуют и более верные способы». Еще можно сказать, «Если вы так делаете потому, что это единственный верный способ, который вы знаете, значит, вы делаете это неправильно», но эта версия немного жестковата.
Ищите и найдете искомое. Если вы работаете с div-элементами в HTML только потому, что они необходимы для каких-то маленьких задач, и знаете только этот единственный способ работы, то он может быть не самым лучшим способом. Теперь, конечно, я понимаю, что использование тегов div необходимо для CSS, но можно найти и другие способы их применения, кроме стилизации.

Как раз недавно я сам пришел к этому, так как вел работу над проектом на Ruby on Rails. Немного ранее на этой неделе я сделал то, что давно хотел – один в один перевел около 5 div-элементов в HAML (переместил папку в папку и затем еще раз в папку). Я так сделал только лишь потому, что не знал лучшего способа, и в результате у меня получилась какая-то гадость, которую пришлось переделывать. Такая работа оказалась намного сложнее, но из нее я узнал много полезных вещей, она заставила меня выучить новый способ решения подобных вопросов в будущем. Двигайтесь дальше и получайте новые знания! Истина очень близко.

Основные работы по увеличению скорости загрузки сайта

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

• Слеши в ссылках

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

• Фавиконы

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

Данная тема очень обширна, и я, к сожалению, не являюсь в ней хорошим экспертом. Однако вся суть кэширования достаточно проста. Это хранение файлов (как правило, с кодом HTML/CSS) с часто посещаемых вашим компьютером сайтов и потому ему не нужно скачивать их каждый раз.

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

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