Html — Увеличить скорость загрузки HTMLJS


Содержание

Асинхронная загрузка JavaScript — ускоряем загрузку страниц

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

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

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

Есть несколько подходов. Начну по порядку.

JavaScript: синхронная загрузка скрипта

Загрузка javascript файла осуществляется так:

Асинхронная загрузка скрипта HTML5

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

Чем же отличаются атрибуты async и defer

В обоих случаях мы получаем асинхронную загрузку скриптов. Разница заключается только в моменте, когда скрипт начинает выполнятся. Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки, но до загрузки объекта window. В случае использования атрибута defer – скрипт не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но до события DOMContentLoaded объекта document.

К сожалению, этот механизм на сегодняшний день не работает во всех браузерах (особенно это касается IE). Также не будет работать, если в файле script.js есть строки document.write.

Асинхронная загрузка javascript скриптом от Google

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

Чтобы использовать, просто заменяем

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

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Как ускорить загрузку JS скриптов, CSS и HTML сайта WordPress: плагин Autoptimize

Вступление

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

Почему плагины увеличивают скорость загрузки

Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.

Особенно «ругается» на это поисковик Google, а на сервисе проверок скорости загрузки сайта ( https://developers.google.com/speed/pagespeed/insights/ ), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.

Как решается проблема стилей и JS на WordPress

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

Плагин Autoptimize «обучен» сжимать JS скрипты стили объединив их в один файл.

Принцип работы плагина Autoptimize (оптимизировать JS и CSS WordPress)

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

Недостатки плагина Autoptimize

Все слепки с оптимизируемых файлах плагин хранит в кэше плагина [wp-content/cache/autoptimize] . Со временем эта папка разбухает и может наблюдаться обратный эффект, скорость загрузки начинает расти. Я такую проблему не замечал, но читал на некоторых сайтах.

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

Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe.

Настройка плагина Autoptimize

Я уверен, вы знаете, как установить плагин. Страница плагина: https://ru.wordpress.org/plugins/autoptimize . Настройки плагина элементарные, но всё-таки пройдемся по ним.

  • После активации плагина, для удобного доступа к настройкам плагина в меню консоли «Настройки» появиться отдельный пункт.
  • Вверху страницы есть маленькая ссылка, она откроет дополнительные настройки.

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

Важно понимать! Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.

  • Если у вас много комментариев, есть кнопка сохранения HTML комментариев.
  • Особо интересна, бесплатное использование CDN Options. Если вы используете CDN технологии, можно указать ваш //cdn.example.com/.

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

оптимизировать JS и CSS WordPress: Настройки плагина Autoptimize

Как увеличить размер cash хранилища Autoptimize

Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.

Решение проблемы вы можете найти на сайте автора. Я его озвучу и подтвержу из практики.

Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:

Устанавливают плагин «Code Snippets» ( https://ru.wordpress.org/plugins/code-snippets/ ). Он нужен для простого добавления произвольного кода на свой сайт WordPress, без добавления пользовательских фрагментов в файл functions.php .

С помощью плагина вставляю один из следующих Snippet (на выбор):

Размер кеша 1Гб

Размер кеша 10Гб

Этим я увеличиваю размер cash хранилища Autoptimize до 1 Gb или до 10 Gb.

Альтернативные плагины (плохо обновляются)

  • JS & CSS Script Optimizer ( https://wordpress.org/plugins/js-css-script-optimizer/ )
  • Better WordPress Minify ( https://wordpress.org/plugins/bwp-minify/ )

На этом всё! Я надеюсь вам удалось оптимизировать JS и CSS WordPress и ускорить его загрузку.

Как ускорить сайт, минимизируя HTML, CSS и JavaScript

Скорость загрузки сайта является важным показателем как для поисковой системы, так и для пользователя. Доля мобильного интернета растет вместе с количеством мобильных устройств, и люди предъявляют к сайтам все больше требований – в том числе касающихся быстрой загрузки контента. А запуск нового алгоритма ранжирования Google для мобильного поиска – Speed Update – обязует уделять больше внимания скорости загрузки мобильных сайтов.

Рассмотрим два способа ускорить сайт – ручной и с помощью программ-минимизаторов.

Что такое минимизация кода

В инструменте Google для проверки скорости загрузки PageSpeed в результате проверки страницы сайта можно встретить следующие рекомендации:

«minify HTML» — сократить код HTML;
«minify CSS» — сократить код CSS;
«minify JavaScript» — сократить код JavaScript.

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

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

Ручная минимизация кода

Рассмотрим для примера простую HTML-страницу:

Асинхронная загрузка JavaScript, CSS: что это, скрипты и настройка

Асинхронная загрузка – это загрузка, которая позволяет браузеру загружать основной HTML и прочие ресурсы без ожидания загрузки стилей CSS и JavaScript, что существенно ускоряет работу сайта.

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

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

Синхронная загрузка JavaScript

По умолчанию JS файлы загружаются следующим образом:

Асинхронная загрузка скрипта HTML5

Использование HTML5 позволяет сделать асинхронную загрузку скриптов, благодаря чему страница будет загружаться в разы быстрее. Достаточно для файла JS добавить атрибут defer либо async.

Чем отличаются атрибуты async и defer?

Применение этих атрибутов в конечном итоге обеспечивает нам загрузку скриптов асинхронным способом. Но зачем тогда создавать два атрибута? Дело в том, что они отличаются выполнением скрипта.

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

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

На заметку. Данный механизм актуален не для всех браузеров, в частности, Internet Explorer. Еще он не функционирует, если в script.js есть строки document.write.

Загрузка JavaScript асинхронно скриптом от Google

В отличие от других поисковых систем, Google уделяет огромное внимание скорости загрузки веб-ресурсов. Из-за этого даже качественному сайту, если он загружается медленно, оказаться в ТОПе будет практически нереально.

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

Для его использования достаточно заменить

Но метод также подходит не для всех, потому что опять-таки неактивен в файлах с document.write.

Универсальная асинхронная загрузка JS

А вот вариант, подходящий всем браузерам (кроме IE 6 и старее, которыми уже практически никто не пользуется), сервисов и даже для document.write.

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

Gzip сжатие ресурсов CSS, JS, HTML — как его включить в файле htaccess для увеличения скорости загрузки сайта

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В качестве очередного шага, способного существенно ускорить ваш сайт, мы разберем процесс gzip сжатия наиболее часто используемых ресурсов, которые необходимы для корректного отображения страниц сайта, а именно, файлов стилей (CSS), скриптов (JS) и HTML.

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

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

Советы Page Speed в отношении gzip сжатия

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

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

Когда-то ранее в ходе оптимизации одного из своих проектов я применял для тестирования тот же инструмент PageSpeed, но тогда он предлагался в том числе в составе дополнений для Google Chrome и Mozilla, причем для инсталляции последнего надо было предварительно установить незабвенное расширения Файрбуг (здесь читайте об установке и работе с ним).

К слову, сейчас плагины Пейдж Спид тоже доступны, но несколько другой разновидности, к тому же скачивать их нужно уже не со специальной гугловской страницы, как было ранее, а с магазина Google и с официального сайта Firefox (в зависимости от браузера, который вы используете).

Итак, на очередном шаге оптимизации одного из своих ресурсов при проверке Page Speed проинформировал, что именно выполнение gzip сжатия скриптов, файлов стилей и документов HTML является на данный момент приоритетным (рекомендация находилась в красной зоне):

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

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

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

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

Сделать это самостоятельно большинство владельцев вебсайтов, расположенных на разделенном виртуальном хостинге, просто не в состоянии чисто по техническим причинам. Кстати, у моего нынешнего провайдера Sprinthost (тут читайте о покупке места для сайта) gzip включен через Nginx, поэтому страница Goldbusinessnet.com успешно прошла тест на сжатие в Пейдж Спид:

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

Как проверить сжатие сайта онлайн, в том числе наличие HTTP заголовка Content-Encoding

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

В данном случае видно, что составляющие тестируемой страницы подвергнуты компрессии (is compressed), а значит, сжатие на сервере для документов HTML включено.

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

Ну и мой объединенный скрипт (JS) также оказался подвергнутым компрессии:

Есть еще один хороший ресурс GTmetrix (введите урл исследуемой странички и жмите кнопочку «Analyze»), который выдает аналитическую информацию по всем аспектам скорости загрузки веб-страницы сайта. После теста перейдите во вкладку «Waterfall»:

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

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

Но это не все. Нажатием на плюсик, расположенный рядом со строчкой, соответствующей тому или иному объекту, вы раскрываете информацию об ответе сервера, наличие в которой HTTP-заголовка Content-Encoding со значением gzip означает, что компрессия включена.

Параметры заголовка Accept-Encoding информируют о том, какие способы сжатия поддерживает данный браузер (на сегодня применение пользователями старых версий web-обозревателей, не поддерживающих ту или иную форму компрессии, маловероятно, но все же. ). Точно также проверяем файлы CSS и JS (скрипты):

Как включить gzip сжатие JS, CSS и HTML в htaccess

Собственно, идея сжатия в формате gzip и механизм ее реализации предельно просты для общего понимания. Файлы, необходимые для корректного отображения web-страницы (стили CSS, различного рода скрипты, документы HTML) архивируются и передаются в браузер пользователя в сжатом виде. Это значительно сокращает время загрузки странички. Если брать в общем, то существуют различные виды компрессии, но в данном случае gzip наиболее эффективен.

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

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

Динамическое gzip сжатие для максимального ускорения сайта

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

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

Цукерберг рекомендует:  Обучение - Онлайн Курс

Динамическую компрессию будем включать посредством все того же волшебного файла .htaccess, отвечающего за конфигурацию сервера под управлением Апач (как я отметил выше, при наличии связки Apache + Nginx номер не пройдет, и за помощью вам придется обратиться к хостеру).

Для начала соединитесь веб-сервером посредством FTP, используя при этом какой-нибудь надежный менеджер вроде FileZilla (здесь все об этой программе). Файл .htaccess должен находиться в корневой директории (public_html или htdocs) вашего сайта:

Если он там отсутствует, то попробуйте перейти из верхнего меню Файлзилла в раздел «Сервер» и выбрать из контекстного меню «Отображать скрытые файлы». В большинстве случаев это должно помочь. Но если вдруг и после этого .htaccess не появился, вы можете создать его сами.

Поскольку конфигурационный файл понадобится для указания в нем специальных директив, то для редактирования удобнее использовать другой полезный софт NotePad++ (в этом материале все подробности об установке и применении этого редактора). В нем и создайте новый файлик прямо на сервере, обозвав его «.htaccess» (именно так, с точкой впереди):

После того, как тем или иным способом вы добились присутствия файла конфигурации сервера Апач в корне сайта, настало время наполнить (или дополнить) его соответствующим кодом.

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

Итак, компрессия в отношении нужных файлов активируется на серверах Apache, при помощи модуля mod deflate, директивы которого, как мы уже выяснили, необходимо вписать в .htaccess:

Присутствие «IfModule» в директиве (аналогично использованию mod expires и mod headers при настройке кеширования в браузерах пользователей) дает возможность проверить наличие модуля и включить его, если он не активирован. Это позволит избежать ненужных проблем, связанных с нарушением работоспособности ресурса. Ведь если модуль не установлен, то просто не последует никаких изменений, а вот веб-сайт будет функционировать в прежнем режиме.

Также следует обратить внимание на то, что в состав директив включен модуль mod setenvif, дающий команду отдавать несжатые версии файлов старым модификациям некоторых браузеров, не поддерживающих gzip. Хотя такими вэб-обозревателями пользуется мизерное количество юзеров, думаю, оставить «mod setenvif» вполне разумно, хуже точно не будет.

Ежели выше предложенный код не сработает, вполне возможно, что mod deflate изначально не установлен на сервере. В таком случае попытайтесь включить mod gzip (практика показывает, что либо тот, либо другой модуль обязательно присутствует у большинства хостеров на серверах Apache) посредством ниже следующей директивы:

Если и это не дало результата, попробуйте использовать универсальный вариант:

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

Далее несколько слов для тех, кто применяет расширение Hyper Cache для Вордпресса (тут об этом важнейшем плагине кеширования мануал). Дело в том, что в настройках Гипер Кеша присутствует опция сжатия:

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

Как включить статическое сжатие gzip для сокращения нагрузки

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

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

Правда, если вы заметили, я ничего не сказал об основном документе HTML. Ведь большинство владельцев использует для управления своими сайтами ту или иную CMS, например, WordPress (файловое устройство и редактирование шаблонов WP).

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

Итак, чтобы осуществить статическое gzip сжатие файлов JS и CSS, предварительно нужно скачать их на компьютер (опять же Файлзилла вам в помощь). Для их архивирования можно воспользоваться бесплатной программой архиватором 7-zip. Скачайте ее и установите обычным образом, трудностей с инсталляцией быть не должно. Кстати, возможно, кто-то предложит альтернативные архиваторы в комментариях? Буду только рад, это и другим читателям полезно.

После установки открываете программу и правой кнопкой мыши кликаете по предварительно загруженному и предназначенному для сжатия файлу, затем из контекстного меню выбираете «7-zip» — «Добавить к архиву»:

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

После нажатия кнопки «ОК» произойдет упаковка (в данном случае CSS) и мы получим 2 файла: один оригинальный несжатый, другой в формате gzip архива с расширением gz.

А теперь будьте внимательны, чтобы ничего не напутать. Некоторые браузеры не воспринимают файлы с расширением gz, поэтому мы удаляем окончание .gz, воспользовавшись опцией переименования файла. Получаем просто style.css, однако по факту он будет архивом gzip.

Далее. Старые версии браузеров не поддерживают gzip сжатие, однако некоторые пользователи еще используют их. Поэтому к оригинальному несжатому файлу дописываем nogzip и получаем: style.nogzip.css, его мы отдадим браузерам, которые не поддерживают сжатие. В сумме всех действий получаем два файла стилей CSS в корневой папке:

Итак, файл style.css (сжатый) будет отдаваться браузерам, которые поддерживают gzip сжатие, а style.nogzip.css (несжатый оригинальный) — старым версиям браузеров, не поддерживающим архивирование. Теперь подобную операцию необходимо проделать для всех JS или CSS файлов, которые подгружаются вместе с web-страницами сайта. Для того, чтобы статическое gzip сжатие заработало, необходимо вставить следующий код в упомянутый уже неоднократно файл .htaccess:

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

В завершение предлагаю посмотреть 6-серийный комплекс видеоуроков (куда включено и gzip сжатие), посвященный наиболее важным аспектам ускорения сайта WordPress и практической реализации рекомендаций PageSpeed:

Правильная настройка Autoptimize, сократить HTML, JS, CSS.

С помощью Autoptimize можно сократить HTML, CSS, JS код. Удалить блокирующий код из хэдера страницы в Page Speed Insights. И что не менее важно, ускорить загрузку сайта.

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

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

Прежде чем перейти к настройке Autoptimize, нам необходимо понять к чему стремиться, а именно:

  • Увеличение рейтинга в Page Speed Insights(PSI) и увеличение полной скорости загрузки сайта.
  • Ускорение отображения (отрисовки) видимой части сайта для посетителей.

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

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

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

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

Например, используя сервис webpagetest.org это может выглядеть так:

Слева на скриншоте файлы/запросы, которые необходимо подгрузить серверу для загрузки страницы, большинство из них могли бы быть, как раз те самые JS и CSS файлы. На картинке их мало, потому что Autoptimize у меня уже активирован и все файлы объединены. Так же у меня активирован плагин Wp Super Cache, который прекрасно работает вместе с Autoptimize. И именно эти плагины помогли достичь такого количества запросов, без них было 94, сейчас 39.

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

Когда Autoptimize объединяет все файлы в один большой, он начинает «весить» значительно больше, нежели 10-15 маленьких по отдельности. В итоге мы получаем один большой долго загружаемый файл, но за счет объединения и сокращения кода, он загрузиться быстрее. Именно для этого я провел тестирование плагина Autoptimize в отдельной статье, дабы определить насколько велика эта разница.

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

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

Если у нас будет один объединенный CSS файл из 15-ти маленьких, визуально загруженную страницу мы сможем лицезреть, только после полной его загрузки.

Таким образом, мы получим ускоренную «полную загрузку» сайта. В данном случае Page Speed Insights(PSI) должен нас похвалить увеличением рейтинга. Но мы можем и немного уменьшить скорость «отрисовки» для посетителей нашего сайта, что не есть хорошо.

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

Настройка плагина Autoptimize

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

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

В дальнейшем в статье название сервиса Page Speed Insights будет использоваться довольно часто, для простоты — PSI.

Параметры HTML

«Оптимизировать код HTML?»

В PSI мы можем наблюдать вот такую картину:

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

В моей теме HTML был сокращен, данный пункт я не использую вообще. Т.к. никакой производительности он мне не добавит.

В итоге в PSI мы должны получить:

«Сохранять комментарии HTML?»

В коде могут присутствовать пометки, которые выглядят так:

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

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

Поэтому галочку можно не ставить, т.к. это лишние килобайты.

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

Опции JavaScript

«Оптимизировать код JavaScript?»

Именно эта настройка включает, объединение и сокращение файлов JS. Если в PSI у вас была проблема «Удалите из верхней части страницы код JS…», на этом этапе она исчезнет.

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

Пункты ниже могут нам с этим помочь.

«Force javaScript in?»

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

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

Для PSI, один блокирующий файл JS лучше чем двадцать.

«Also aggregate inline JS?

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

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

При достижении больших размеров кэша, можно очищать, с помощью кнопки «Сохранить изменения и удалить кэш»

«Exclude scripts from Autoptimize:»

Исключить определенные JS файлы из оптимизации или частей кода(в случае интеграции JS в HTML). У меня на сайте перестал работать некоторый функционал, а так же не отображалась Google Recaptcha.

Если у Вас премиальная тема, в первую очередь попробуйте добавить в исключение файл jquery.js, он по умолчанию подгружается вверху сайта, поэтому у меня он там один и остался.

Для рекаптчи, мне пришлось добавить файл wpdiscuz-recaptcha.js, он по умолчанию грузиться из нижней части сайта, поэтому он ничего не блокирует в PSI.

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

«Add try-catch wrapping?»

Если выше перечисленное не помогает восстановить правильно отображение сайта, можно попробовать этот пункт.

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

Конечно, без причины включать не стоит.

Опции CSS

«Оптимизировать код CSS?»

Включает сокращение и объединение стилей, на данном этапе они останутся загружаться в «верхней части сайта», но вместо 10-20 файлов будет, один.

«Generate data: URIs for images?»

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

У меня в теме почти нет таких картинок, но все же пару есть, и на них этот пункт не сработал. Если у Вас работает, напишите об этом в комментариях.

«Remove Google Fonts?»

Если в теме сайта используются Google шрифты, PSI будет этому не рад:

Если установить галочку, проблема исчезнет как и сами Google шрифты, на сайте отобразятся стандартные шрифты, типа: «Arial».

Конечно, плагин ничего не удаляет, если галочку убрать, вернуться шрифты которые стояли до этого.

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

«Also aggregate inline CSS?»

Частичная интеграция CSS в HTML. Плагин выбирает часть кода, который будет интегрирован в HTML. Как ни старался, я не нашел какой именно код и его количество.

Основной файл CSS остается в верхней части сайта и продолжает раздражать PSI.

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

Но как и с интеграцией JS, плагин начинает создавать больше CSS файлов в своем кэше.

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

«Inline and Defer CSS?»

Самый интересный и сложный пункт. Он позволяет нам, интегрировать в HTML только тот CSS код, который используется для видимой отрисовки сайта и отложить загрузку всех CSS в целом, для удаления их из «верхней части сайта» в PSI.

Что мы получаем:

Плюсы:

  • Ускоренную отрисовку сайта для посетителей.
  • В PSI из верхней части сайта, удаляется файл CSS.

Минусы:

  • Увеличение времени полной загрузки сайта, т.к. сначала подгружается наш интегрированный код, а потом все стили подгружаются снова.

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

Я считаю этот пункт наилучшим компромиссом, который может предложить Autoptimize, в данном разделе.

Как найти нужный код, который необходимо интегрировать в html(критический CSS)?

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

Если вы, как и я, не обладаете идеальным знанием CSS и не можете самостоятельно определить какие стили используются для «отрисовки» той или иной страницы(да и долго это), можно попробовать воспользоваться сервисом Critical Path CSS, в его второй раздел, нужно поместить код всех стилей которые используются в вашей теме.

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

После активации плагина убедитесь, что у Вас включен 1-ый пункт «Оптимизировать код CSS?».

  • Перейдите на любую станицу: нажмите правую кнопку мыши → «просмотр кода страницы» или ctrl+u (для Google Chrome).
  • Находим css-файл созданный плагином, для этого воспользуйтесь поиском по странице (ctrl+F), введите: autoptimize. Название примерно такое: autoptimize_6f0ee70cc9b84a1d501e9aee91e4e9a6.css.
  • Нажимайте на него, откроется новое окно с кодом, который необходимо вставить в Critical Path CSS.

Теперь нам нужно создать критический CSS.

Для этого введите url той страницы с которой брался код и нажмите «Create Critical Path CSS»:

После чего мы наконец получим, критический CSS для той страницы, url которой Вы вводили!

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

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

Следующая стадия удаление дублей и оптимизация кода.

Большинство онлайн сервисов по оптимизации CSS кода, которые я пробовал, не подошли. Я рекомендую использовать этот сервис: CSS compressor.

Осталось дело за малым, вставить полученный код в Autoptimize и сохранить настройки.

«Inline all CSS?»

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

Применение этого пункта, возможно, если у Вас небольшое количество CSS и с интеграцией в HTML, вместе они будет весить до

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

«Exclude CSS from Autoptimize:»

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

«CDN Options»

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

Сервис подключается отдельно, в Autoptimize нужно указать адрес CDN сервиса, на котором Вы хотите размещать оптимизированные CSS и JS.

Если Вы не используете CDN, ничего не вписывайте.

Информация о кэше и Сжатии

Каталог кэша — Локальный путь на Вашем сервере, где располагается кэш плагина.

Cached styles and scripts — количество файлов, их общий размер и время создания.

Save aggregated script/css as static files? — Если поставить галочку, отключает статическое сжатие файлов.

Зачем это может понадобиться?

  • Если используется Gzip сжатие, включенное в htaccess или на уровне сервера или иными плагинами.
  • Если есть добавленные файлы в исключения оптимизации, они не будут сжиматься посредством плагина, поэтому можно отключить сжатие Autoptimize и включить GZIP сжатие. (Таким образом, мы достигнем максимального рейтинга в PSI).
Цукерберг рекомендует:  Создаем свой первый to do list на JavaScript

Кнопки сохранения — с первой все понятно, со второй есть нюанс, при сохранении настроек и очистке кэша Autoptimize, удаляется так же кэш Wp Super Cache, возможно и других кэширующих плагинов.

Ускоряем загрузку своего сайта

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

Если сайт загружается дольше трёх секунд, 53 % пользователей покинут его.

Предположим, у вас уже есть готовый сайт или приложение, которое использует современный JS-фреймворк (Angular, React, VueJS). Как убедиться, что текущая производительность не мешает вашему продукту стать успешным?

Вначале стоит собрать данные о производительности фронтенда вашего приложения. Есть два отличных инструмента:

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

Lighthouse уже входит в Chrome DevTools. Проанализировав ваш сайт/веб-приложение, этот инструмент может дать дельные советы по оптимизации.

Статистика из Lighthouse

Speedcurve делает всё то же самое, но данные можно просматривать ещё и в динамике.

15–16 ноября, Минск, 133–390 br

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


Изображения

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

Адаптация размеров изображений

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

Адаптивные изображения на адаптивных шаблонах

К тому же нужно убедиться, что сами изображения так же адаптивны, как и макет. Responsive Image Breakpoints Generator выдаёт все необходимые версии изображений и HTML-код для их вставки. Достаточно будет 8–10 сгенерированных изображений.

Сгенерированный в этом инструменте HTML-код можно будет использовать не только на сайтах, но и в веб-приложениях. Для тех, кто работает с Gulp, есть специальный плагин gulp-responsive, который автоматизирует этот процесс.

Не забываем про ленивую загрузку

Компоненты и модули ленивой загрузки

Ленивая загрузка (англ. lazy load) предполагает, что не все изображения будут загружены сразу при открытии страницы — часть будет подгружаться после, при необходимости. Изображение, которое не находится в текущей области видимости, будет подгружаться в будущем (главное помнить, что изображение нужно подгружать чуть раньше, чем оно должно появиться в области видимости).

Независимо от того, какой фреймворк вы используете, в нём, вероятнее всего, будет плагин для ленивой загрузки изображений (к примеру, v-lazy-image в Vue). Хотя ничто не мешает вам самим реализовать эту функциональность. Чтобы проверить, находится ли элемент в области видимости, хорошо подходит IntersectionObserver API.

Доставляем изображения через CDN

Если вы уже оптимизировали размер изображений и их количество и ждёте посетителей со всего мира, то вам не помешает CDN — Content Delivery Network (Сеть доставки содержимого) для обслуживания изображений.

Эта система кеширует изображения на глобально-распределённой сети серверов. Допустим, если кто-нибудь из Австралии запросит изображение с вашего веб-сайта, то вместо того, чтобы загружать это изображение с сервера в Европе, CDN загрузит его с ближайшего к Австралии сервера. Такая система ускоряет процесс загрузки изображений на сайте.

CSS, JS и HTML

Все современные фреймворки в процессе сборки оптимизируют ваш код (code-splittiong, tree shaking, minification и др.). Что ещё можно придумать?

Оптимизация основной HTML-страницы

HTML-документ — это скелет почти всех веб-приложений. При работе с ссылками на внешние ресурсы стоит придерживаться нескольких советов:

  • Помещайте ссылки на CSS вверху HTML-документа для ускорения загрузки страницы.
    Прим. перев. Есть более оптимальные способы ускорения загрузки, например вынесение критичного css в тег style , а для оставшихся стилей (обязательно соберите их в один файл с помощью какого-либо сборщика фронтенда) применять предварительную загрузку или отправлять их с помощью http/2 Server Push;
  • Размещайте JS-скрипты внизу страницы. Это предотвращает блокировку рендеринга страницы тегами

ТОП-12 вариантов, как улучшить скорость загрузки сайта самому

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

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

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

Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http <. >и перезапускаем сервер:

Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

Шаг 3. Кэширование на стороне браузера

Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).

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

Через файл htaccess (кэшируем статические файлы на 10 дней):

Для Nginx добавляем в конфигурацию:

* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ <
root /var/www/user/data/www/site.ru;
expires 10d;
>
.
>

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

Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

Шаг 4. Минимизация css- и js-файлов

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

Пример обычного кода:

Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей – подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант – 85 Кб. Чувствуете разницу?

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

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

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

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

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

Как увеличить скорость загрузки сайта?

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

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

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

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

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

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

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

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

Какой должно быть время загрузки?

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

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

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

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

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

Лучше всего об оптимальном именно для вас показателе расскажет Google PageSpeed Insights. Постарайтесь получить хотя бы не менее 70–80 баллов — это средняя планка, равная 2–4 секундам. В первую очередь обратите внимание на следующие метрики:

  • time to first byte — время получения начальных сведений от сервера;
  • load time — скорость загрузки главных элементов;
  • page size — размер (общий вес) страницы;
  • requests — количество запросов к базе данных необходимых для формирования страницы.

Более детально мы рассмотрим сервис Google PageSpeed Insights чуть позже, а пока поговорим об особенностях формирования производительности сайтов.

От чего зависит скорость загрузки?

Прыть сайта можно условно разделить серверную и клиентскую часть (их впоследствии мы и будем оптимизировать).

Итак, полный цикл загрузки при первом посещении выглядит подобным образом:

  1. DNS-запрос по названию ресурса.
  2. Подключение к серверу по IP-адресу.
  3. Установка защищенного соединения при использовании HTTPS.
  4. Запрос HTML-страницы по url и ожидание ответа сервера.
  5. Загрузка HTML.
  6. Разбор файла на стороне браузера, создание очереди запросов.
  7. Загрузка и анализ CSS-стилей.
  8. Загрузка и запуск JS-кода.
  9. Начало отрисовки страницы, выполнение JavaScript (JS).
  10. Загрузка web-шрифтов.
  11. Загрузка картинок и других медиа.
  12. Окончание отрисовки, работа отложенного JS-кода.

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

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

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

Учтите! Роботы Яндекса и Google не кэшируют файлы. Кэширование влияет на загрузку второй и последующих страниц, в то время как поисковые системы всегда загружают страницу как новую. А вот потенциальных клиентов сайта результат данной опции в виде быстрого открытия статьи или каталога приятно удивит, если только они не используют утилиты очистки.

На что влияет скорость загрузки сайта?

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

Индексация

Крайне важно сделать так, чтобы страницы попали в индекс как можно быстрее и в максимально полном объеме.

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

Совет здесь один: желаете избавиться от проблем с индексацией? Пора увеличить скорость загрузки сайта!

Ранжирование

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

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

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

Важно! Согласно исследованиям американской компании MOZ, четкая взаимосвязь между скоростью полной загрузки страницы и ее позицией в «Гугл» отсутствует. А вот быстрота получения первого байта (показатель Time To First Byte) 100% влияет на ранжирование: чем резвее ответ сервера, тем выше сайт в выдаче.

Конверсия

Давно доказано, что «торможение» интернет-площадки сокращает продажи и приводит к отказу от услуг. В таком случае неважно, насколько хороший у вас контент или заманчива реклама — пользователи просто не станут дожидаться загрузки страницы, покинут сайт.

Многочисленные опросы говорят о том, что 47% готовы ждать полную отрисовку не более двух секунд, задержка даже в одну лишнюю секунду чревата потерей лояльности на 16%. К тому же 88% участников исследования заявили: они вряд ли вновь воспользуются сайтом после неудачной попытки. Кстати, мобильные пользователи не менее требовательны к производительности ресурсов (85% из них хотят, чтобы страницы открывались так же быстро, как и на компьютере).

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

Лучшие инструменты для мониторинга скорости загрузки

Готовы изменить свой web-проект к лучшему? Прежде всего, надо проверить показатели при помощи специальных сервисов.

  • Google PageSpeed Insights

Простой и удобный анализатор для мгновенной оценки клиентской оптимизации. Перейдите по ссылке https://developers.google.com/speed/pagespeed/insights/, введите в поле адрес интересующего вас сайта и нажмите «Анализировать».

PageSpeed позволяет узнать скорость, а также уровень оптимизации для компьютеров и мобильных. Причем быстродействие сайта определяется двумя метриками: FCP и DCL.

FCP (First Contentful Paint) — первая отрисовка контента. Низкий показатель указывает на вероятные проблемы с самим соединением либо размерами используемых ресурсов.

Что касается DCL (DOMContentLoaded), то это не менее значимый параметр, означающий полную загрузку HTML и построение DOM-дерева.

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

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

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

  • Отчет Google Аналитики

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

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

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

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

Пользоваться им просто: надо перейти на https://gtmetrix.com/ и ввести в поле адрес сайта, а затем нажать на кнопку Analyze.

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

PR-CY пользуется популярностью среди вебмастеров, благодаря продуманному интерфейсу и точным сведениям.

А знаете ли вы? Результаты исследований Strangeloop Networks доказывают, что за последние несколько лет время загрузки web-проектов возросло на 21%. Если раньше статьи чаще всего дополнялись картинками низкого качества, то сейчас ресурсы наполнены тяжелыми элементами (первоклассными изображениями, галереями, видео, анимацией и внешними приложениями). Все это улучшает визуальное впечатление, однако замедляет работу сайта. Здесь, как и во многих других вопросах SEO, важно найти золотую середину.

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

Вам, наверное, интересно, какие имеются подручные средства для оптимизации ресурса? Потратив всего 5 минут своего времени, вы узнаете все эффективные приемы и сможете применить их на практике.

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

Серверная часть

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

Улучшение хостинга

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

Настройка сервера Nginx

Выделенный веб-сервер Nginx — отличный способ повысить производительность сайта. Особенно хорош он при обработке статического контента (до 600 тысяч запросов в секунду на Linux), впрочем, даже такой показатель можно улучшить с помощью правильной настройки.

  • Удаление неиспользуемых nginx-модулей

Это не только ускорит работу, но и уменьшит уязвимость сервера.

Вам нужно выполнить сборку с такими командами:

В итоге вы получите Nginx с уже отключенными модулями Autoindex и SSI, которые в большинстве случаев бесполезны. Запустив скрипт configure с флагом -help , вы узнаете, какие еще модули можно безболезненно исключить из веб-сервера.

  • Работа с секцией Server

Для ускорения сайта рекомендуется включить в секцию Server следующие строки:

# vi /etc/nginx/nginx.conf
# Таймаут при чтении тела запроса клиента
client_body_timeout 10 ;

# Таймаут при чтении заголовка запроса клиента
client_header_timeout 10 ;

# Таймаут, по истечению которого keep-alive соединение с клиентом не будет закрыто со стороны сервера
keepalive_timeout 5 5 ;

# Таймаут при передаче ответа клиенту
send_timeout 10 ;

  • Сжатие данных

Обязательная процедура для тех, кто желает повысить скорость загрузки сайта. Так вы сможете уменьшить размер пересылаемого трафика.
Откройте файл конфигурации, который находится по адресу / etc / nginx / nginx.conf и добавьте в секцию http < … >следующую информацию:

  • Кэширование статических файлов

В том же файле необходимо найти конструкцию Server и дописать туда:

* ^.+. ( jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js ) $ <
root /var/www/ user /data/www/site.ru ;
expires 7d ;

— ( expires 7d — количество дней хранения кэша на ПК пользователя).

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

Настройки сервера Apache

Самая быстрая возможность оптимизировать веб-сервер — воспользоваться модулем mod-pagespeed от Google. После его установки, соединитесь через SSH с сервером и введите такие команды:

Зайдите в директорию / var / cache / mod_pagespeed и удостоверьтесь, что модуль работает корректно. В ней должны появиться папки сайта с кэшированием запросов к Apache — все настроено автоматически.

Что делает данный инструмент? Он удаляет лишние пробелы и атрибуты HTML-документов, объединяет несколько JS, CSS и HTML файлов в один, конвертирует картинки под установленный в тегах img / > размер, а также способствует оптимизации другими способами.

Gzip — сжатие на стороне сервера

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

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

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

Откройте файл .htacess и добавьте в него код:

Или прописать в нем такие строки:

Внимание! Gzip сжимает файлы от одного до девяти единиц. Оптимальным параметром считается пятерка.

CDN для загрузки популярных JavaScript библиотек

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

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

На Content Delivery Network часто переносят все файлы JavaScript, изображения и CSS, оставляя на основном сервере лишь файл HTML.

Настройка кэширования на стороне сервера

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

Создайте на сервере папку с любым допустимым названием (например, cache) и напишите в начале PHP-страницы следующее:

При наличии файла index_xx_yy.cache просто считайте его содержимое и выведите на экран (здесь xx — это переменная $_GET [ «page» ] , а yy — значение переменной $_GET [ «id» ] ). Если вышеупомянутого файла нет, включите в папке кэш буфер и запишите туда все процессы, запущенные на странице.

В конце после тэга не забудьте добавить:

Запишите в $buffer его содержимое, затем остановите буферизацию и очистите контент. Следующее действие предполагает открытие файла index_xx_yy.cache (если его на сервере нет, то надо создать) и запись в файл $fp значения $buffer .

Оптимизация базы данных

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

Это можно сделать вручную через phpMyAdmin хостинга (пункт SQL). Не хотите попусту тратить время? Воспользуйтесь специальными плагинами или настройте автоматическую оптимизацию. Сделать это несложно.

Установите на ПК программу Notepad++ и подключитесь через FTP к хостингу. Найдите в папке public_html файл wp-config.php и перетащите на рабочий стол. После этого откройте его с помощью Notepad++ и найдите строчку с названием базы данных. Под ней надо добавить следующее:

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

Обновите файл и перетащите его мышкой обратно на хостинг, заменив старую версию новой.

Оптимизация TCP, TLS, HTTP/2

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

TCP — популярный сетевой протокол, функционирующий на основе «окна перезагрузки». Чем выше габариты окна (количества пакетов для передачи), тем больше пропускная способность. Ваша задача — правильно рассчитать и настроить размер буфера TCP. Большинство разработчиков используют для этого параметры задержки и полосы пропускания, умноженные на два. Чтобы изменить размер буфера, используйте вызов Setsockopt в С или методы setReceiveBufferSize и setSendBufferSize в Java. Такая корректировка ориентирована на ускорение масштабных порталов и серверов. Главное — регулярно обновлять систему.

Что касается тюнинга TLS, он сократит время ответа и повысит уровень безопасности соединений. Найдите конфигурационный файл на Nginx и проведите следующие изменения:

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

# Создаем отдельный Server для перенаправления с HTTP на HTTPS
server <
server_name example.com www.example.com ; # можно указать любые домены и поддомены
listen 1.2.3.4: 80 ; # где 1.2.3.4 — айпи вашего сервера
rewrite ^ ( .* ) https:// $host $1 permanent ; # редирект HTTP/1.1 301 Moved Permanently с http на https
>

# Прописываем основной сервер с HTTPS
server <
server_name example.com www.example.com ; # копируем из верхнего сервера
listen 1.2.3.4: 443 ssl http2 ; # вместо 1.2.3.4 вставляем IP своего сервера. http2 включаем поддержку протокола http/2

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem ; # сертификат
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem ; # ключ

# Для кэширования запросов
keepalive_timeout 70 ; # 70 секунд держим соединение открытым
keepalive_requests 150 ; # 150 запросов максимум на одно соединение, после чего закрываем
ssl_session_cache shared:SSL:10m ; # разделяемый между всеми процессами кэш сессий на 10 байт с названием SSL. 1 Мб вмещает около 4000 сессий
ssl_session_timeout 10m ; # 10 минут — максимальное время жизни сессии

# Для улучшения безопасности соединения
ssl_prefer_server_ciphers on ; # указываем, чтобы при использовании протоколов SSLv3 и TLS серверные шифры обладали большим приоритетом, чем клиентские
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA ; # типы шифров
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 ; # разрешённые типы протоколов
>

Теперь немного о HTTP/2. В этот достаточно молодой протокол заложены механизмы быстродействия, рассчитанные на уменьшение влияния сетевых задержек. Чтобы увеличить скорость загрузки сайта, SEO-профи рекомендуют отказаться от встраивания файлов в HTML-код, доменного шардинга, спрайтов и конкатенации файлов.

Количество HTTP-запросов

Время открытия страницы на 80% зависит от загрузки Flash, CSS, скриптов и картинок. Уменьшение числа упомянутых элементов приводит к ускорению веб-проекта. Но как сократить количество запросов без изменения внешнего вида?
Для этого достаточно применить встроенные в страницу Inline-изображения и CSS-спрайты — комбинированные картинки, которые состоят из небольших фрагментов.
Если вы используете на странице несколько JS и CSS-элементов, их можно объединить в один файл — это действенный и простой прием.

Уменьшение редиректов

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

Чтобы быстро найти все редиректы на своем ресурсе, воспользуйтесь специальной программой. После установки на компьютер утилита Screaming Frog за считанные минуты определит проблемные места.

Клиентская часть

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

Настройка асинхронной загрузки

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

Ускорить сайт можно при помощи специального скрипта Google ExtSrcJs. Надо лишь заменить:

Как ускорить загрузку сайта 10 способов

Доброго времени суток, дорогие коллеги! Хочу вернуться ещё раз к важной теме — как ускорить загрузку сайта WordPress и сейчас добавлю к предыдущим постам еще один небольшое повествование. Попить чайку, принять душ и заняться домашними делами … Всё это люди не хотят делать, пока загружается ваш сайт. По статистике, посетители покидают сайт, который грузится более 3 — х секунд. Я лично всегда так делаю, не жду, а перехожу на другой источник.

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

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

1. Кэширующие плагины для WordPress

Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.

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

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

Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании.

Ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче настроить.

2. Подключение к сети доставки контента

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

CDN – это крупная сеть серверов, распределённых по всему миру, способная кэшировать файлы вашего сайта, а затем отправлять эти файлы с ближайшего к вашим пользователям сервера. Таким образом, в идеальной ситуации пользователь в Нью-Йорке загрузит файлы сайта с северо-востока Соединенных Штатов, а не западного побережья или Европы.

Маршрутизация трафика через CloudFlare позволяет сократить время загрузки и повысить безопасность веб-сайта.

Чтобы настроить CDN, например CloudFlare, выполните следующие действия:

Зарегистрируйте аккаунт на сайте https://www.cloudflare.com/ .

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

Измените серверы доменных имён, чтобы они указывали на те сервера, что были предоставлены CDN в процессе установки. При использовании WordPress и CloudFlare установите официальный плагин CloudFlare:

Плагин Cloudflare для WordPress

При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта. CloudFlare — действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS — это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис — просто сказка ��

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

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

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

Один из самых удобных сайтов для конвертации JPG-изображений в PNG – Tiny PNG.

Веб-сервис TinyPNG, который позволяет сжимать PNG-файлы

Далее, можно оптимизировать изображения, используя более новый стандарт WebP. Однако на сегодняшний день этот стандарт поддерживают не все браузеры (только Google Chrome, Android и Opera), поэтому при его применении обязательно нужно использовать резервные методы для корректной загрузки изображений в других браузерах.

4. Объединение и удаление файлов Javascript

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

Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.

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

Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress ( https://jscompress.com/ ).

Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt ( https://gruntjs.com/ ) или Gulp ( https://gulpjs.com/ ) для автоматизации процесса минимизации JavaScript. Существует также модуль Apache ( https://www.modpagespeed.com/doc/filter-js-minify ), который способен уменьшать размер исходного кода JavaScript «на лету», однако его нельзя сочетать с другими методами минимизации.

После объединения и минимизации ваших файлов JavaScript вам нужно настроить асинхронную или отложенную загрузку скриптов на сайте. Для внешних скриптов лучше использовать атрибут async. Для большинства других скриптов, которые полагаются друг на друга для работы, используйте атрибут defer. Более подробную информацию можно посмотреть на сайте — http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html .

При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird ( https://premium.wpmudev.org/blog/hummingbird/ ) или плагин Async JavaScript ( https://wordpress.org/plugins/async-javascript/ ), которые позволяют легко добавить атрибуты async или defer к JavaScript-файлам.

5. Объединение и минимизация CSS-файлов

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

Для пользователей CloudFlare функция минимизации CSS расположена в том же разделе Speed. Вы также можете включить минимизацию HTML.

Как и в случае с JavaScript, продвинутые пользователи могут использовать Grunt или Gulp для минимизации кода CSS на своём сервере. Существует также модуль Apache, называемый mod_ext_filter, который может быть настроен для автоматической минимизации файлов CSS, однако, поскольку они не будут кэшироваться как статические файлы, это не является предпочтительным способом минимизации.

Чтобы вручную минимизировать CSS, можно использовать специальные онлайн-инструменты. Например, Minifier — https://www.minifier.org/ .

6. Загрузка динамических частей через AJAX

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

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

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

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

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

7. Использование браузерного кэширования

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

В CloudFlare этот параметр можно настроить, перейдя на вкладку Caching и выбрав подходящий вариант срока хранения данных в кэше – Browser Cache Expiration. Если ваши файлы обновляются нечасто, вы можете выбрать более длительный срок, например 8-16 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.

Использование браузерного кэширования

Чтобы включить браузерное кэширование на серверах на базе Apache, вы можете попробовать добавить код, подобный этому — https://gtmetrix.com/leverage-browser-caching.html , в файл .htaccess в корневом каталоге вашего сайта.

8. Использование алгоритма сжатия Gzip

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

Вы можете включить сжатие Gzip так же, как браузерное кэширование. Просто добавьте следующий код в файл .htaccess в корневом каталоге вашего сайта:

Если вы используете CloudFlare, ваши ресурсы автоматически будут автоматически сжиматься с помощью Gzip.

9. Избегание загрузки большого количества внешних ресурсов

Загрузка большого количества внешних ресурсов – это одна из проблем, с которой сегодня сталкиваются крупные медиасайты. Но это не значит, что данная проблема не может повлиять на ваш сайт. Фактически, это актуально и для более мелких сайтов, особенно тех, что используют рекламные сети, такие как Google AdSense, Media.net, Taboola и т.д.

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

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

Если вы используете другие сторонние ресурсы, такие как формы, чат, всплывающие оповещения и т. д., то вам нужно будет проверить сайт с помощью инструмента GTmetrix ( https://gtmetrix.com/ ). На вкладке Waterfall вы сможете просмотреть скорость загрузки всех файлов, найденных на странице, и понять, какие из них больше всего её замедляют.

10. Настройка Google AMP

Google AMP (Accelerated Mobile Pages) – это фреймворк для создания облегчённых версий веб-страниц для мобильных устройств. Для ускорения загрузки эти страницы предварительно загружаются и кэшируются серверами Google.

Для настройки AMP пользователям WordPress рекомендуется использовать официальный AMP-плагин.

Плагин AMP for WordPress

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

Цукерберг рекомендует:  Примеры - Помогите с java
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих