Улучшение CSS для повышения скорости загрузки сайта оптимизация производительности


Содержание материала:

Как ускорить сайт WordPress для Google PageSpeed

Как ускорить сайт WordPress для Google PageSpeed Insights с показателями 100/100? Сегодня я хочу поделиться с вами некоторыми советами которые помогут вам набрать 100/100 баллов в Google PageSpeed ​​Insights на вашем сайте WordPress. Или, по крайней мере, приблизить к этому показателю ваш веб-сайт ВордПресс.

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

Операция: Ускорить сайт WordPress

Западный SEO-консультант Ник Лерой (Nick Leroy) рассказал, что много внимания уделял скорости загрузки сайтов своих клиентов, а его собственный сайт на WordPress был довольно медленный. Чтобы не быть сапожником без сапог, он решил начать работу по ускорению ресурса. В итоге он сумел добиться максимальной скорости загрузки 100 в Google Page Speed Insights для десктопной версии сайта NickLeRoy.com. Мобильную версию удалось ускорить до 89.

Скорость загрузки в Google Page Speed Insights

Все владельцы веб-ресурсов могут значительно увеличить скорость загрузки страниц сайта на ВордПресс, считает Ник и рассказывает, как это сделать. 100/100 с помощью WordPress (возможно?).

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

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

Прежде чем приступить к ускорению своего ресурса, Ник Лерой решил понять, с чем предстоит работать. Так как сайт построен на CMS WordPress, были проанализированы следующие области:

  • Хостинг,
  • Тема WordPress,
  • Плагины ВордПресс,
  • Изображения,
  • Ресурсы.
    На основе проверки был составлен список того, что можно улучшить. Затем Ник приступил к внедрению изменений.

Проблема: хостинг и TTFB

Первое, что бросалось в глаза при поверхностном анализе — большое время до получения первого байта после отправки запроса со стороны клиента (Time To First Byte или TTFB) для всех страниц сайта: от 1,5 до 2 секунд. И это было просто время, которое необходимо для первоначального соединения со страницей без ее загрузки.

Помимо этого были и другие проблемы, связанные с хостингом: отсутствие HTTP/2 setup/configured (проблему можно было бы исправить, используя CDN), отсутствие кэширования и т.п. Общий хостинг на Hostgator не способствовал достижению цели увеличения скорости загрузки сайта.

Решение: смена хостинг-провайдера

В качестве альтернативы существующему хостингу были выбраны два провайдера: FlyWheel и Kinsta. Оба провайдера:

  1. Предлагали услуги хостинга специально для WordPress-сайтов,
  2. Относительно доступны по цене ($25-30 в месяц),
  3. Предлагали решения для кэширования на сервере,
  4. Имели встроенную технологию CDN,
  5. Предлагали бесплатный SSL-сертификат (и протокол HTTP/2).

В итоге было решено остановиться на хостинге FlyWheel. Этот провайдер был немного дешевле и предоставлял локальные решения для разработки новых сайтов на WordPress.

После некоторых раздумий Ник Лерой решил создать новый сайт NickLeRoy.com. И вот, почему.

Проблема: оптимизация тем, плагинов, изображений, ресурсов

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

Тема WordPress

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

В результате многие темы содержат большое количество не нужного функционала.

Плагины ВордПресс

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

Изображения

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

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

Ресурсы

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

На сайте NickLeRoy.com использовалось большое количество ресурсов, даже там, где они не были необходимы. Шрифты, javascript-файлы для ненужных функций, CSS для стилей и эффектов и многое другое, от чего можно было бы избавиться.

Решение: создание нового сайта

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

Тогда Ник принял решение перезапустить сайт с нуля на новом хостинге. Для этого была проделана следующая работа:

  • Чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,
  • Установка облегченной темы,
  • Установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,
  • Перестройка всего сайта,
  • Оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,
  • установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.

После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.

Результаты

Скорость загрузки страниц в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).

Улучшение скорости сайта WordPress

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

  1. Отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,
  2. Удалить из верхней части страницы код CSS и Inline,
  3. Оптимизировать файлы JS / CSS,
  4. Установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,
  5. Улучшить кэширование для ресурсов.

Ранее рейтинг скорости страниц измерялся тем, насколько быстро ваш сайт загружался на компьютер. Но по состоянию на 09 июля 2020 года скорость страницы является фактором ранжирования для мобильного поиска. Это означает, что оптимизация вашего WordPress для мобильных устройств важна как никогда!

В заключение

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

Улучшение CSS для повышения скорости загрузки сайта: оптимизация производительности

Зачем нужен быстрый сайт? Ответ, как и вопрос, довольно банален – если сайт работает медленно, то пользоваться им никто не будет. Даже если на нем очень эксклюзивный и полезный контент. Скорей всего контент своруют и разместят те, у кого сайты работают быстро. Поисковые системы тоже не выводят на первые позиции те сайты, которые долго грузятся.

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

Перед тем, как перейти к практике, немного теории. Сайт для пользователя состоит из текста и картинок, а для красивого оформления используются файлы CSS и JavaScript. От количества и качества этих 4 составляющих сильно зависит конечная скорость загрузки сайта в целом. Это как раз то, на что смотрят пользователи.

1. Поиск слабых мест и получение показателей

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

Для проведения данной операции можно воспользоваться программой Fiddler, HttpWatch, Firebug, панель Web developer браузера Internet Explorer (начиная с 8-й версии) и много других.

Рисунок 1. Внешний вид профайлера из панели Web developer браузера Internet Explorer

Рисунок 2. Онлайн сервис для замера скорости загрузки страницы

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

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

Если у вас много используется достаточно много изображений, то оптимизация их размера позволит сильно сократить время загрузки и объем загружаемых данных, а в итоге повысить производительность сайта. Основная задача по оптимизации изображений сводится к использованию подходящего графического формата (JPG, GIF или PNG) подходящего размера. Кратко – для изображений с большим количеством цветов нужно использовать формат JPG, для остальных GIF или PNG.

Для сравнения, возьмем файл размером 250х188

JPG, качество 60 GIF, 128 цветов PNG-8, 128 цветов
Размер: 12 Кб Размер: 28 Кб Размер: 25 Кб

Как видно, при использовании правильного формата даже для такой небольшой картинки будет сокращен трафик и, как следствие, время загрузки в 2 раза.

3. Минимизация CSS и Javascript файлов

При верстке файлы CSS можно вводить свойства стилей как удобно, но для публикации файлов в интернете рекомендуется пользоваться CSS-минимизаторами (Online CSS Optimizer/Optimiser, Clean CSS …), многие из которых имеют онлайн реализацию. Суть работы CSS минимизатора сводится к вытягиванию текста в строку, удаляя лишние пробелы. Для примера, есть у вас такой класс someclass, записанный в читабельном виде.

Для снижения объема можно сделать файл менее читабельным, собрав все в одну строку:

Безусловно, делать вручную это не нужно, а нужно воспользоваться автоматическими средствами.

Аналогично нужно поступить и с JavaScript файлами. Для их сжатия есть такие утилиты, как JSMIN, YUI Compressor, JavaScript Code Improver.

4. Снижение числа HTTP-запросов за счет объединения JavaScript и CSS файлов

Для каждого файла стилей CSS и JavaScript на сервер отправляется отдельный HTTP-запрос на его загрузку. Потому для публикации рекомендую сократить до минимума файлы, собрав стили и скрипты JavaScript соответственно в 1 файл стилей и в 1 JS-файл (ну может 2 файла – это как получится).

5. Снижение числа HTTP-запросов за счет объединения маленьких изображений в один файл

Один файл размером 4 килобайта грузится быстрее, чем 4 файла по 1 килобайту, т.к. в первом случае число HTTP-запросов сокращается в 4 раза. Потому лучше воспользоваться созданием одного файла с иконками (см.Рис.3) и через CSS описать background-position для элементов.

Рисунок 3.Файл иконок для сайта

6. Включение сжатия данных на стороне сервера

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

7. Загрузка JavaScript со сторонних быстрых серверов

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

У Google есть быстрый хостинг для таких фреймворков. С него можно загружать тот же jQuery либо стандартным методом:

либо воспользоваться гугловскими API и загрузчиком (Google Loader) для получения широких возможностей работы, связанных с использованием фреймворков.

Оптимизация CSS: методы и онлайн сервисы

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

Сразу возникает вопрос — а зачем это нужно? Ответ прост: оптимизируя таблицы стилей снижается загружаемый объем кода, вес файла style.css. В итоге страница станет меньше весить, а это экономия трафика и увеличение скорости загрузки сайта.

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

Как оптимизировать CSS и уменьшить размер файла

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

Какие мероприятия можно провести при оптимизации CSS:

  • Удалить неиспользуемые селекторы.
  • Удалить неиспользуемые закомментированные строки.
  • Сократить объем комментариев в файле стилей. Всегда удобно, когда элементы сгруппированы по общему признаку и имеют невидимые для глаз обычных пользователей комментарии. Но зачастую, чтобы добиться высокой степени сжимаемости CSS, приходиться от них избавляться. Чтобы при дальнейшей работе проще ориентироваться в коде, Вы можете по-прежнему их использовать, но оставляйте краткие описания.
  • Удалить пустые строки и пробелы. Но слишком не стоит увлекаться, код должен оставаться читаемым, чтобы без труда вносить правки.
  • Объединить элементы с одинаковыми свойствами.
  • Оптимизировать шрифты. Лучше использовать один шрифт. В каждом отдельно взятом блоке страницы использовать разный шрифт — дурной тон web-дизайна и, как видите, перегружает файл стилей.
  • Оптимизировать цвета. Это сделать достаточно просто, но сложно объяснить на словах, поэтому приведу наглядные примеры:
  • Оптимизировать отступы. Опять же на примерах:

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

    Оптимизация CSS с помощью онлайн сервисов

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

    Существует достаточное количество онлайн инструментов (CleanCSS, Online CSS Optimizer и т.д.), способных выполнить оптимизацию CSS. Они мало чем отличаются друг от друга, зачастую используют одни и те же алгоритмы и библиотеки сжатия, например YUICompressor или CSSTidy.

    Подробнее остановлюсь на том, которым чаще всего пользуюсь. Это CSS оптимизатор на портале для вебмастеров CY-PR.com.

    Для начала работы в текстовое поле необходимо вставить фрагмент CSS или полное содержимое файла стилей. Справа в раскрывающемся списке воспользоваться быстрыми настройками сжатия:

    • максимальное (код не читаем, наименьший размер);
    • высокое (сносная читаемость, маленький размер);
    • стандартное (баланс между читаемостью и размером);
    • низкое (читаемый код);
    • выбрать самому (ввести параметры ниже).

    Для безопасной оптимизации рекомендуется использовать стандартное сжатие. Ради интереса воспользуйтесь другими быстрыми настройками, но помните о резервной копии. После того как параметры сжатия CSS заданы можно приступать к непосредственной работе скрипта, нажатием кнопки Оптимизировать CSS.

    Топ-пост этого месяца:  Как создать интернет-магазин

    Результаты выводятся ниже с указанием исходного и оптимизированного размера кода, а также коэффициент сжатия в процентном соотношении:

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

    Оптимизация загрузки CSS

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

    Объединяйте скрипты CSS

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

    Сжимайте новые скрипты CSS

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

    Повысьте приоритет стилей для первоочередного контента

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

    • Сначала определите, является ли ваш новый объединенный скрипт CSS большим или маленьким по размеру. Если скрипт маленький, то вставьте его в тег head страницы. Как правило, загружать в отложенном режиме скрипты CSS небольшого размера не имеет смысла, так как вы не получите от этого никакой выгоды.
    • Извлеките критически важный CSS код. Обычно, это те стили, которые важны для корректного отображения первоочередного контента. Хороший способ сделать это – использовать пакет Node.js от Addy Osmani, который может выполнить эту задачу в автоматическом режиме. Этот метод требует доступа по SSH, поэтому он подойдет не для всех. Другие варианты – это использовать один из онлайн-генераторов CSS или просто сделать это вручную.
    • Теперь, когда у вас есть критически важный для рендеринга код CSS, поместите его в HTML тег head. Остальные стили загрузите в отложенном режиме внизу страницы.

    Старайтесь не использовать CSS директиву @import

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

    Старайтесь не использовать атрибут STYLE в HTML тегах

    Следует убрать весь CSS, который используется в теле HTML (например:

    ), и переместить эти стили в тег head. Внутритеговые стили могут негативно сказываться на скорости загрузки страницы, так как они блокируют рендеринг.

    Как ускорить загрузку: оптимизируем код верхней части страницы

    В статье:

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

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

    Узнать примерную скорость загрузки можно с помощью инструмента PageSpeed Insights от Google. Он оценивает скорость сайта и выводит советы по улучшению показателя.

    Фрагменты проверки инструментом PageSpeed Insights

    Для оценки Google определил девять правил, инструмент считает количество баллов по соответствиям.

    Правила PageSpeed Insights:

    1. Не используйте перенаправления с целевой страницы
    2. Включите сжатие
    3. Сократите время ответа сервера
    4. Используйте кэширование в браузере
    5. Сократите HTML, CSS и JavaScript
    6. Оптимизируйте изображения
    7. Оптимизируйте загрузку CSS
    8. Расставьте приоритеты загрузки контента
    9. Удалите блокировку рендера JavaScript

    Инструмент « Проверка скорости сайта» от PR-CY.RU использует такие же правила для анализа скорости. Он оценивает загрузку на десктопе и мобильной версии, дает советы и пояснения по каждому пункту.

    Фрагмент анализа инструментом Проверка скорости сайта

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

    Как оптимизировать код верхней части страницы:

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

    Удалить код JavaScript и CSS из верхней части страницы

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

    Исходный HTML-код страницы:

    Файл стилей small.css будет подгружаться после загрузки первой страницы.

    Использовать асинхронную загрузку Javascript и CSS

    Браузер загружает код HTML построчно, но загрузка множества файлов Javascript может тормозить весь процесс. Для некоторых пользователей с медленным интернетом тормозить могут и файлы стилей. Чтобы браузер не останавливался на загрузке этих файлов, а продолжал подгружать остальной код, настраивают асинхронную загрузку Javascript и CSS.

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

    Настроить асинхронную загрузку Javascript

    Если на сайте есть видео со сторонних сервисов или другие внешние элементы, браузеру придется ждать загрузки всех элементов Javascript. Недоступное видео или другие проблемы с контентом могут вообще заблокировать загрузку сайта. Чтобы этого не произошло, используют Friendly iFrame или асинхронную загрузку.

    Создайте пустой div блок в том месте, где нужно отобразить элемент:

    Перейдите в конец страницы и вставьте скрипт для асинхронной загрузки перед :

    Скрипт работает во всех современных браузерах.

    Настроить асинхронную загрузку CSS

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

    Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через «rel=preload»:

    В некоторых версиях браузеров, к примеру, в Firefox 57, «preload» по умолчанию отключен, поэтому событие «onload» не сработает. Учитывайте это и догружайте данные скриптом:

    Скрипт cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки «preload».

    Настроить асинхронную загрузку с jQuery

    Для своей работы веб-мастера используют библиотеки скриптов. По данным графика популярности библиотек в вакансиях, в 2020 году библиотека jQuery была на пике популярности. Ее использование выросло и в 2020, хоть в вакансиях стал чаще появляться React.

    График популярности библиотек в вакансиях: слева 2020, справа 2020

    Библиотека скриптов jQuery содержит набор готовых функций Javascript, которые помогают писать код.

    Для работы подключите версию библиотеки, которая у вас поддерживается.

    Настроить асинхронную загрузку Javascript с jQuery

    Для настройки асинхронной загрузки Javascript с jQuery нужно добавить свойство «async»:

    Это отключит последовательную загрузку, поэтому добавьте событие «onload»:

    Функция «init» будет вызвана после загрузки jQuery.

    Настроить асинхронную загрузку CSS с jQuery

    jQuery подходит и для асинхронной загрузки CSS. Для того используйте код:

    Он должен загружаться после остальных элементов страницы и jQuery. К примеру, использование с методом «ready»:

    Ускорить получение первых байтов (TTFB)

    TTFB (Time To First Byte) — это время, которое прошло с момента отправки запроса клиентом до получения им первого байта. Чем меньше показатель, тем быстрее браузер начинает загружать страницу.

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

    Чем больше запросов выполняет браузер, тем дольше может быть загрузка. Проверить, сколько HTTP-запросов генерирует страница, можно на панели разработчика браузера. В Google Chrome и Mozilla Firefox для этого нужно вызвать на странице команду «Посмотреть код» (Ctrl + Shift + I), найти вкладку Network, перезагрузить страницу и отфильтровать по типу HTML (Doc). Появится список запросов со статусами ответов и временем загрузки.

    Список запросов со статусами на главной странице Яндекс

    Также данные о TTFB есть в Pagespeed и в Google Analytics: перейдите в «Поведение» — «Скорость загрузки сайта» — «Обзор», в блоке «Среднее время ответа сервера» увидите TTFB в секундах.

    Если проходит слишком много времени до загрузки верхней части страницы, проверьте гипотезы:

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

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

  • На сайте не включен акселератор (для PHP).
    Разработчики сайтов на PHP используют акселераторы кода для его оптимизации — это расширение, которое кэширует байт-код и увеличивает производительность интерпретатора. При загрузке страницы сервер часто обрабатывает одни и те же участки кода, а акселератор будет предварительно компилировать PHP, что уменьшит время получения первого байта. В версиях PHP 5.5 и выше он идет в комплекте, в файле «php.ini» нужно найти «opcache.enable» и включить акселератор. В версиях 5.2 и 5.3 он доступен в PECL, нужно установить его и включить также через файл «php.ini» .
  • Объединить CSS в один файл, объединить JavaScript

    На каждый отдельный файл нужен отдельный HTTP запрос. Некоторым разработчикам удобнее хранить разные стили CSS или коды JavaScript в разных файлах, но если стилей много, браузеру придется делать много запросов, что тормозит загрузку. Для оптимизации кода рекомендуют объединять все стили CSS в один файл.

    Файлы JavaScript тоже нужно объединять, чтобы уменьшить количество HTTP запросов при загрузке страницы. Способ объединения такой же, как в случае CSS-файлов.

    Объединяем файлы JavaScript:

    Использовать алгоритмы сжатия

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

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

    Можно найти плагины для CMS или включить сжатие вручную. Подробно о подключении алгоритмов сжатия для разных серверов в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать сжатие gzip или brotli».

    Минифицировать файлы CSS и JavaScript

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

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

    Минификация CSS

    Минифицировать файлы CSS и JavaScript

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

    Подробнее о сервисах и особенностях минификации в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать минификацию HTML, CSS и JS»

    Использовать кэш браузера

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

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

    Для сервера Nginx в файле конфигурации настройте модуль Expires: перечислите форматы файлов для кэширования через с прямой слэш «|», укажите время хранения в секундах.

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

    О других способах настройки кэширования есть в статье «Как использовать кэш браузера для ускорения: кэширование для Nginx и Apache, метод Cache-Control и кэширование по времени».

    Загружать данные с помощью CDN

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

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

    Разработчики выбирают CDN в зависимости от потребностей бизнеса и бюджета. Hhostings.info собрали двадцать CDN с лучшими отзывами и составили топ CDN 2020.

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

    8 способов увеличить производительность сайта на 1С-Битрикс

    Что будет, если нагрузить фуру и старую клячу грузом в 1 тонну? Правильно: первый поедет на максимальной скорости, а вторая не сможет сдвинуться с места. Так и сайты: у каждого из них свои требования к хостингу, конфигурации, настройкам платформы 1С-Битрикс.

    Каждую неделю в нашу поддержку приходят жалобы на низкую скорость загрузки. В 99,9% случаев оказывается, что проблема кроется в слабеньком хостинге и неправильных настройках. Рассказываем, что делать, если сайт или интернет-магазин тормозит, и как правильно произвести диагностику и самостоятельно увеличить производительность — так, чтобы летал.

    1. Оцените производительность

    Модуль «Монитор производительности» 1С-Битрикс позволит протестировать производительность сайта и сравнить результаты с эталонными показателями. Он укажет на слабые места: сайт, CMS, конфигурация, некачественная разработка или хостинг. Вы можете развернуть ваш сайт или «чистый» 1С-Битрикс на разных площадках и сравнить эти цифры.

    Что нужно знать о показателях производительности:

    • меньше 30 пунктов – забудьте про производительность и быструю загрузку страниц. Показателя «Очень быстро» вам не видать. Тормозить будет все!
    • от 30 до 60 – подойдет для небольших проектов (корпоративные сайты или интернет магазины с небольшим количеством товаров, небольшим количеством SKU и параметров в умном фильтре)
    • от 60 до 100 — конфигурация сервера приемлема, но не оптимальна. Подойдет для большинства проектов. Сайт работать будет, но не на сверхскоростях.
    • от 100 – вы молодцы: не поленились выбрать нормальную хостинг площадку! Админка летает, большие объемы данных из 1С выгружаются на ура, страницы отдаются быстро. Вы спите спокойно и даже не думаете писать в техподдерожку с жалобами на проблемы с загрузкой сайта, ни разу не видели ошибок Request timeout или 502 Bad Gateway.
    • 200 и выше – идеально!

    Оценка производительности. Результаты испытания демо-стенда (тариф RED.Site-3, хостинг RedDock). Решение – универсальный интернет-магазин Аспро: Оптимус

    Как протестировать сайт
    Перейдите в панель производительности: Настройки → Производительность → Панель производительности. Нажмите кнопку «Тестирование производительности» и подождите несколько минут.

    2. Перейдите на PHP7
    3 декабря 2015 года вышла седьмая версия PHP. Она разрабатывалась с упором на увеличение производительности и уменьшение потребления памяти. Тесты это убедительно показывают ( пример 1 , пример 2 ) — прирост производительности после перехода на новое ядро составляет от 40%!
    Сидеть на старых версиях PHP — осложнять жизнь пользователю и делать этот интернет хуже. Если ваш хостинг не поддерживает PHP7, меняйте его (например, на этот с бесплатным переносом). Если ваш сайт не поддерживает PHP7, срочно исправляйтесь. А еще лучше, используйте решения с поддержкой PHP7 — например, от Аспро.

    3. Настройте кеширование

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

    Топ-пост этого месяца:  CSS — что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link

    Как не надо:

    1. Оставлять настройки по умолчанию (120 секунд).
      Почему: первый посетитель заходит на страницу товара. Формируется кеш. Второй посетитель заходит на сайт через час. Кеш нужно формировать заново — его время истекло. В итоге кеш генерируется каждый раз при открытии страницы. Прироста производительности и скорости не просто нет — она даже снижается.
    2. Не соотносить время жизни кеша с частотой обновления данных на сайте и посещаемости сайта.
    3. Задавать для отдельных разделов (новости, статьи) огромное время кеширования.

    Как надо — в зависимости от частоты обновления данных и посещаемости сайта:

    1. Цены на сайте обновляются вручную или несколько раз в неделю.
      Рекомендуемое время кеширования: не менее 172800 секунд (2 суток).
    2. Цены на сайте обновляются один раз в день, выгрузка из 1С или другой системы складского учета происходит ночью.
      Рекомендуемое время кеширования: 86400 секунд (1 сутки).
    3. Нечасто, но бывает: цены обновляются через реал-тайм обмен с 1С и бывает, что несколько раз в течение дня.
      Рекомендуемое время кеширования: 7200 секунд (2 часа).

    4. Создайте фасетные индексы для умного фильтра

    Фасетные индексы ускоряют работу умного фильтра. Обычно умному фильтру нужно перебрать все товары каталога и сравнить их свойства с заданными параметрами. Если товаров много, такой процесс может занять определенное время. Фасета же заранее просчитывает и составляет варианты запросов, сохраняет в системе и выдает по запросу.
    На словах все здорово, на деле — не очень: фасеты редко создают и используют. Попробуйте это сделать и сравните скорость загрузки результатов фильтрации. Инструкция в нашей документации

    5. Проанализируйте и создайте индексы в базе данных

    Индексы анализируются и создаются здесь: Настройки → Производительность → Индексы → Анализ индексов.

    Нажмите на кнопку «Выполнить анализ собранных SQL запросов». Если появившиеся индикаторы зеленые, все в порядке: индексы созданы. Если индикаторы желтые, создайте их самостоятельно. Инструкция в мануалах 1С-Битрикс

    6. Отключите неиспользуемые модули

    При инциализации ядра 1С-Битрикс подключается большой список модулей. Они отнимают ресурсы, но при этом не нужны для полноценной работы сайта. Отключаем лишние модули — получаем прирост производительности. Перед тем, как это делать, обязательно сделайте резервную копию сайта.

    Какие модули используются редко и их можно отключить без последствий для работы сайта:

    • AD/LDAP интеграция (ldap)
    • Push and Pull (pull)
    • Wiki (wiki)
    • А/B-тестирование (abtest)
    • Веб-аналитика (statistic)
    • Веб-кластер (cluster)
    • Веб-мессенджер (im)
    • Веб-сервисы (webservice)
    • Дизайнер бизнес-процессов (bizprocdesigner)
    • Документооборот (workflow)
    • Календарь событий (calendar)
    • Конструктор отчетов (report)
    • Менеджер идей (idea)
    • Мобильная платформа (mobileapp) — если не подключено мобильное приложение
    • Мобильное приложение для интернет-магазина (eshopapp) — если не подключено мобильное приложение
    • Обучение (learning)
    • Перевод (translate)
    • Почта (mail)
    • Техподдержка (support)
    • Универсальные списки (lists)
    • Управление масштабированием (scale).

    Как это сделать: перейдите в настройки модулей Рабочий стол → Настройки → Настройки продукта → Модули и отключите лишние. Инструкция в базе знаний

    7. Настройте CDN

    Еще одна неоднозначная вещь, которая может как разогнать сайт, так и заставить его хорошенько притормозить. Что это такое?

    Теория:
    «Модуль Ускорение сайта (CDN), который позволяет загружать весь статический контент вашего сайта (картинки, файлы стилей css, скрипты js) через сеть дистрибуции контента ( Content Delivery Network или Content Distribution Network, CDN ). Тем самым значительная часть ресурсов сайта загружается посетителем с ближайшего к нему сервера. Это позволяет увеличить скорость загрузки страниц до нескольких раз.
    Также подключение CDN снижает нагрузку на основные серверы сайта. Так как весь статический контент загружается посетителями вашего сайта не напрямую с ваших серверов, а с узлов CDN, которые умеют очень эффективно кэшировать контент, снижается количество обращений непосредственно к вашим серверам» ( отсюда )

    Настраивается CDN здесь: Настройки → Облако 1С-Битрикс → Ускорение сайта (CDN).

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

    8. Включите объединение и сжатие CSS и JS-файлов

    В настройках главного модуля сайта есть волшебный блок, который позволяют улучшить показатели скорости загрузки сайта. Называется он “Оптимизация CSS”. Отмечайте галочками все, сохраняйте изменения и тестируйте скорость загрузки страниц.

    10 лучших способов ускорить загрузку сайта

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

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

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

    1. Оптимизируйте HTML-код и CSS-, JS-файлы

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

    Как минимизировать код для ускорения загрузки сайта

    • Удалить лишние символы, элементы разметки и теги исходного кода. Автоматизировать процесс поможет добавление небольшой вставки в начало и конец HTML-кода сайта.

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

  • Сгруппировать однотипные CSS-файлы и JS-файлы. Объединить элементы помогут бесплатные PHP-приложения, вроде JCH Optimize, Cloudflare или Minify, которые копируются в отдельную директорию и пропускают через себя все файлы сайта.
  • 2. Уберите лишние HTTP-запросы

    Выгрузка элементов страницы (JavaScript, изображений, CSS- и флеш-файлов) занимает львиную долю ресурсов системы при загрузке сайта. HTTP-запросы к таким элементам заметно тормозят работу сайта.

    Чтобы избежать «лишних» запросов, нужно сократить число компонентов страницы. Это повлечет пропорциональное уменьшение обращений к серверу и позволит ускорить загрузку сайта.

    Сделать это можно несколькими способами:

    • Комбинировать нескольких изображений в один графический файл (CSS-спрайт);
    • Использовать встроенные изображения (Inline-картинки) в таблице стилей страницы;
    • Несколько CSS-файлов или скриптов на одной странице объединить в один файл;
    • Минимизировать число скриптов и плагинов.

    3. Расположите JavaScript и CSS в нужном порядке

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

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

    4. Уменьшите число внешних скриптов

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

    Конечно, упор на локальные скрипты создаст определённые ограничения во внешнем виде и функциональности сайта. Но полученное преимущество в скорости загрузки стоит этих «жертв».

    5. Задействуйте функцию flush

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

    Размещать функцию flush лучше в начале исходного кода страницы, сразу за head. Из заголовка HTML-контент будет открываться быстрее, к тому же так можно включить параллельную загрузку элементов CSS и JavaScript.

    6. Кэшируйте страницы

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

    Подключить кэширование можно путём добавления в HTML-код заголовка expires. Сайты на WordPress легко кэшируются с помощью установки плагинов с бесплатным или частично бесплатным функционалом, вроде W3 Total Cache, Cache Enabler или Zen Cach.

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

    7. Пользуйтесь CDN

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

    Сеть доставки и дистрибуции контента делает информацию доступнее для людей по всему миру

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

    Популярные сети доставки контента (CDN)

    8. Оптимизируйте графику и видео

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

    Рекомендуемые форматы под разный веб-контент

    • SVG – для векторных логотипов и несложных элементов интерфейса;
    • PNG – для схем и не векторных логотипов;
    • JPG – для фото и изображений;
    • MPEG4 – для видео и анимации.

    Также для видео и анимации доступен еще относительно новый формат WEBM. В большинстве случаев он обеспечивает меньший размер видео при аналогичном качестве. Однако, формат имеет ограниченную поддержку браузерами (например, нет поддержки в браузере MacOS/iOS Safari). Поэтому рекомендуется приоритетным источником видео использовать файл в формате WEBM, а альтернативным – установить MPEG4. Также можно использовать только MPEG4, если совместно использование недопустимо или неудобно.

    Отдельно отметим, что векторный формат (SVG) позволяет осуществлять масштабирование без потерь качества графики.

    Этапы оптимизации изображений

    Шаг 1 – Уменьшение размера изображения.

    Во многих популярных CMS, таких как WordPress или Joomla есть встроенные плагины для оптимизации изображений из оригинала. Но такой способ создаёт дополнительную нагрузку и может замедлить сайт. При каждой загрузке страницы браузер сперва обращается к исходнику, а только затем меняет размеры изображения «на лету».

    Избежать потерь скорости при загрузке изображений помогут встроенные в ОС графические редакторы, вроде Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с похожим функционалом. Для работы с ними потребуются минимальные навыки работы с графикой.

    Шаг 2 – Сжатие файла перед загрузкой.

    Даже после оптимизации размеров изображения, его «вес» обычно ещё далёк от оптимального. Уменьшить размер без потери качества картинки помогают такие удобные и бесплатные сервисы, как ImageResize или TinyPNG. Большинство процессов здесь автоматизировано. Пользователю нужно только залить файлы и скачать уже ужатые до оптимального размера изображения.

    9. Примените Gzip-сжатие файлов

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

    Способы внедрения Gzip-сжатия

    • Добавить следующий фрагмент кода в конфигурационный файл веб-сервера «.htaccess».
    • Добавить следующий отрывок кода в начало HTML- или PHP-страницы. Он проверяет поддерживается ли gzip-сжатие файлов браузером. Если поддерживается – использует его.
    • Инсталлировать на сайт Gzip-плагин. Например, W3 Total Cache для сайтов на WordPress.

    10. Сменить хостинг

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

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

    Вывод

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

    Ищите надёжную площадку для размещения сайта? Веб-хостинг от Eternalhost – надёжный фундамент, который обеспечит быструю и бесперебойную работу интернет-ресурса!

    В этой статье мы перечислили основные способы ускорения сайта. Но есть ещё много интересных и творческих идей по оптимизации данного процесса. А как вы добиваетесь ускорения загрузки? Пожалуйста, поделитесь опытом в комментариях!

    (Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта

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

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

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

    Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения чек-листа поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.

    Этап 1. Определите «рамки» оптимизации скорости сайта

    Под понятием «Рамки оптимизации скорости сайта» я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.

    Определив » рамки «, мы будем знать конечную, к которой нужно идти. А поможет нам найти данные » рамки оптимизации скорости сайта » сервис, созданный Джонатаном Филдингом — www.performancebudget.io .

    Посмотрите небольшое видео по работе с данным сайтом, где я наглядно показал что нужно выбрать, чтобы определить » рамки оптимизации скорости сайта «:

    Этап 2. Узнаем реальную скорость сайта

    Как я уже писал выше, Google PageSpeed Insights это хороший инструмент для проверки оптимизации скорости сайта, но все же он «дает» лишь поверхностные советы. Вы можете сперва проверить с помощью этого инструмента, а затем переходить к более подробной статистике, которую дают следующие сервисы:

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

    Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess .

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

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

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

    (Чек-лист) Самостоятельная оптимизация скорости сайта

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

    Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.

    Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).

    Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com , iconizr . Так и решения для сборщиков (для Gulp — gulp-svg-sprites , для Grunt — grunt-svg-sprite , для Webpack — Webpack SVG sprite loader ).

    Оптимизируйте изображения: PNG, JPG, SVG.

    Здесь есть как онлайн решения: TinyPNG , Kraken.io . Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin , gulp-pngquant ; Grunt — grunt-contrib-imagemin ; Webpack — imagemin-webpack-plugin .

  • Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html
    1. Используйте SVG-спрайты и PNG-спрайты.

    Об этом я писал в блоке «Оптимизация изображений», который находится выше.

    Объедините все CSS файлы в один.

    Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css , для Grunt — grunt-concat-css , для Webpack — css-concat-loader ).

    Объедините все JS файлы в один по возможности.

    Плагины для сборщиков (для Gulp — gulp-concat-js , для Grunt — grunt-contrib-concat , для Webpack — webpack-uglify-js-plugin ).

    Максимально уменьшите количество запросов к базе данных.

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

    1. Сжимаем все CSS файлы.

    Онлайн решения: CSS Compressor , CSS Minifier . Плагины для сборщиков: Gulp — gulp-clean-css ; Grunt — grunt-contrib-cssmin ; Webpack — clean-css-loader .

    Сжимаем все JS файлы.

    Сервисы онлайн: JavaScript Compression Tool , JS Minifier . Плагины для сборщиков: Gulp — gulp-uglify ; Grunt — grunt-contrib-compress ; Webpack — плагин, который указан в прошлом пункте также сжимает JS.

    Загружайте все CSS и JS файлы в самом конце. Размещайте их перед закрывающим тегом .

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

    Удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта и т.д.

    Эти параметры указываются в адресе через знак ?v=1.0.1 (вопрос).

    Вывод

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

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

    Кейс: повышаем скорость загрузки сайта на Битрикс

    Уже ни для кого не секрет то, что быстродействие сайта — это не только вопрос удобства пользователей, а и важный аргумент для поисковых систем. При прочих равных факторах быстрые сайты Google и Яндекс показывают более охотно, чем медленные, и с каждым годом значение этого фактора растет. О том, какое значение скорости загрузки уделяет, например, поисковик №1 в мире, Вы можете почитать в блоге Google.

    Неудивительно, что в свете этих тенденций владельцы веб-ресурсов и вебмастера всё чаще обращаются к нам с вопросом о том, как ускорить сайт на Битрикс и оптимизировать его работу. В нашем сегодняшнем кейсе мы рассмотрим пример повышения быстродействия сайтов на Битрикс по Google PageSpeed Insights — инструмента для оценки скорости загрузки веб-страниц. Этот сервис помогает определить, насколько быстрым сайт считает Google, насколько он соответствует требования и стандартам поисковой системы в части быстродействия на мобильных устройствах и десктопе.

    Рубрики блога
    Новое в блоге

    Как было?

    Изначально результаты рассматриваемого сайта были очень низкими:

    Нашей задачей стало повысить скорость сайта на Битрикс, а также вывести его в «зеленую» зону на широких экранах и «желтую» — на смартфонах (по оценкам того же Google PageSpeed Insights).

    Повышение быстродействия Битрикс шаг за шагом

    Скрипты, стили, HTML-код

    Объединение и сжатие JS / CSS

    Удивительно, но многие разработчики и вебмастера до сих пор игнорируют инструменты, которые в Bitrix есть, что называется, «в коробке». В числе таких — функции оптимизации скриптов и стиле в настройках главного модуля. Как показывает практика, одно только их использование позволяет повысить оценки на 10-20 баллов (!).

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

    Ещё несколько слов об оптимизации JS

    Несложно заметить, что Google PageSpeed Insights уделяет скриптам на сайте пристальное внимание, и даже незначительная (казалось бы) оптимизация может заметно повысить оценки сайта. В нашем конкретном случае неудовольствие анализатора вызывал Jivosite. Несмотря на то, что в теории этот онлайн-чат загружается асинхронно (т.е. не задерживает загрузку веб-страницы), он регулярно фигурирует среди замечаний и приводит к снижению рейтинга.

    В его отношении мы поступили достаточно просто: отложили загрузку Jivosite в коде сайта на 5 секунд после окончания загрузки страницы в целом. Юзабилити интернет-магазина от этого только выигрывает (ведь мало кому интересен онлайн-чат в первые 5 секунд посещения), а Google PageSpeed моментально отреагировал на это мероприятие повышением оценки.

    Оптимизация и перемещение CSS-файлов

    Сжатие и объединение файлов стилей в Битрикс выполняется с помощью настроек, которые мы уже описали выше. Но если скрипты JS Битрикс охотно переносит в конец кода (чтобы они не блокировали загрузку), то файлы стилей чаще всего остаются в head. С точки зрения отрисовки страницы это правильно, ведь при загрузке сайт выглядит изначально правильно и красиво, однако снижение оценок Google PageSpeed в данном случае почти что неизбежно.

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

    Надо ли использовать CDN Битрикс?

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

    Избавляемся от лишнего кода

    Одним из распространенных замечаний Google PageSpeed является требование отложить или удалить неиспользуемые стили. То же самое касается HTML-кода и JS-скриптов, которые могут подтягиваться при загрузке страницы, но нигде не использоваться. Причины существования таких фрагментов могут быть разными:

    • встроенные стили темы для блоков / визуальных решений / цветовых схем, не применяемых на сайте;
    • стили и скрипты модулей, которые были установлены, включены, но не задействованы на страницах;
    • разнообразные тестовые фрагменты, скрипты сторонних сервисов, которые в какой-то момент тестировались, но не были удалены, и т.д.

    Такие элементы нашлись и на рассматриваемых нами сайтах. В каждом из этих случаев удаление лишнего кода дало прирост от 2 до 5 баллов общей оценки.

    Кеширование и сжатие на Битрикс

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

    Дела серверные

    Без привязки к Bitrix как таковому со стороны сервера потребуется:

    • возможность кеширования изображений, JS, CSS и других статических файлов;
    • кеширование PHP (например, OPCache);
    • подключение GZIP-сжатия.

    Особых отличий Битрикса от других платформ в этом смысле нет, а сложности, с которыми может столкнуться оптимизатор, могут быть очень разными. Ведь если в одном случае все эти методы включаются на виртуальном хостинге в пару кликов, то в другом случае может потребоваться трудоемкая настройка VPS с установкой дополнительных расширений, оптимизацией параметров PHP и прочим. На этой теме мы не будем останавливаться отдельно — слишком она объемна и, в целом, не относится к Битриксу как таковому.

    Скажем только, что в нашем случае почти все перечисленные методы уже использовались. Нам оставалось только добавить к кешированию некоторые типы файлов (через .htaccess) и повысить объем памяти, потребляемый OPCache (ресурсы сервера это позволяли).

    Кеширование компонентов

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

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

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

    Оптимизация и сжатие изображений

    Для тех, кто уже пробовал проверять свой сайт в Google PageSpeed Insights, уже очевидно, что оптимизация картинок может стать настоящей головной болью для разработчика / вебмастера. И если попытаться выполнить все требования Гугл буквально, то в переработке проекта можно завязнуть на много часов, дней и недель. По этой причине мы придерживаемся мнения о том, что к любой оптимизации надо подходить без фанатизма и погони за каждым отдельным баллом.

    Вместе с тем, есть методы, которые мы с удовольствием применяем для ускорения интернет-магазина на Битрикс — для повышения оценок Google PageSpeed, да и фактического быстродействия в целом:

    Сжатие картинок

    Для этого можно использовать модули для Bitrix (преимущественно платные), можно предварительно «прогонять» изображения через специализированные сервисы или программы. Так или иначе, это позволяет значительно (!) уменьшить вес картинок без ущерба для качества. И это более чем реально!

    Использование подходящих форматов

    Главным практическим преимуществом png является возможность применения прозрачного фона. Если вам это нужно, то выбор в пользу png предопределен. Но зачастую изображения в данном формате размещаются без веских на то оснований, а ведь они заметно «тяжелее» аналогов в jpg. Почти на каждом оптимизируемом сайте мы находим такие недочёты и исправляем им — с заметным результатом в PageSpeed, да и для пользователей тоже.

    Оптимизация размеров

    Совершенно типичной является ситуация, когда в контейнер на странице размером 300х200 пикселей вставляется изображение 1200х800 пикселей — со всеми вытекающими отсюда последствиями. Обычно так случается, если сайт разрабатывался или администрировался неаккуратно, наспех, без внимания к деталям. Конечно, все подобные проблемы должны быть обязательно устранены.

    LazyLoad

    Крайне благосклонно Google PageSpeed относится к отложенной загрузке изображений, при которой изображение подгружается с сервера только тогда, когда оно попадает в область видимости пользователя. Реализовать такой принцип можно с помощью специальных модулей для Битрикс или вручную, подключив библиотеку jQuery LazyLoad.

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

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

    Время чтения: 9 минут Нет времени читать? Нет времени?

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

    Насколько быстрой должна быть скорость загрузки сайта?

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

    Согласно исследованию Strangeloop, в ходе которого была протестирована скорость загрузки 2000 топовых интернет-магазинов, в среднем скорость загрузки коммерческих сайтов составляет 10 секунд. Возможно, вы спросите: «С какой стати мы должны улучшать скорость загрузки своего сайта, если даже топовые интернет-магазины грузятся так долго?» А вот и ответ:

    • 57% посетителей покидают страницу, которая грузится более 3-х секунд.
    • В те моменты, когда сайт тормозит из-за большого количества трафика, более 75% онлайн-покупателей предпочитают уйти на сайт конкурента.
    • 2 секунды – столько примерно будет ждать терпеливый пользователь до тех пор, пока на экране появится информация. Добавление такого элемента, как «прогресс-бар» может продлить время его ожидания до 38 секунд.
    • Сайт, который грузится 3 секунды, имеет на 22% меньше просмотров, на 50% больше отказов и на 22% меньше конверсии, чем сайт, который грузится 1 секунду. Сайт, который грузится 5 секунд, имеет еще более плохие показатели – на 35% меньше просмотров, на 105% больше отказов и на 38% меньше конверсии.
    • 8% людей считают, что главной причиной их ухода с сайта является медленная загрузка страниц.

    Сервисы, с помощью которых можно протестировать скорость загрузки сайта:

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

    Чем быстрей загружается сайт, тем лучше конверсия

    Чтобы убедиться в этом, изучите следующие результаты исследований:

    • Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
    • Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
    • Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
    • 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

    Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

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

    5 способов увеличить скорость загрузки сайта

    Итак, что же можно сделать, чтобы ускорить загрузку сайта:

    1. Уменьшите размер страниц сайта

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

    Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

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

    2. Снизьте «вес» графики

    Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

    • Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
    • Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
    • Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
    • Очищайте графические файлы от цифрового мусора. Различные редакторы фото, которыми наверняка пользуется ваш дизайнер, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры и т.п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисами Pngcrush, или Smush.it.

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

    3. Упростите код JavaScript и CSS

    Использование специальных средств упрощения кода JavaScript и CSS уменьшает «вес» соответствующих элементов сильнее, чем стандартные технологии сжатия, например, gzip. Сервисы упрощения удаляют из кода лишние элементы, а также сокращают названия функций.

    Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

    4. Уменьшите число запросов браузера

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

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

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

    • Разрешите браузерам кэшировать данные. Если страницы вашего сайта являются статическими, нет нужды «заставлять» посетителей всякий раз загружать их содержимое заново. Попросите администратора сервера или хостинг-провайдера включить опцию кэширования фотографий, элементов CSS и JavaScript. Чтобы проверить результат этого действия, воспользуйтесь, например, сервисом Redbot.
    • Комбинируйте и сжимайте файлы CSS и JavaScript. Объединяя эти элементы, вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Чтобы объединить файлы CSS и JavaScript, воспользуйтесь специальными сервисами и ПО, например, CakePHP.
    • Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe, чтобы проверить эффективность данной рекомендации на практике.

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

    5. Сократите расстояние между сайтом и пользователями

    Если сервер вашего хостинг-провайдера находится во Владивостоке, посетителям из Санкт-Петербурга придется набраться терпения, ожидая загрузки страницы. Эта проблема особенно актуальна для сайтов с «тяжелым» контентом, которые посещают пользователи, физически удаленные от сервера на большие расстояния. Чтобы решить эту проблему, воспользуйтесь сетями доставки контента (CDN), например, Amazon CloudFront или Akamai.

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