5 мифов, связанных с оптимизацией скорости работы сайта. Оптимизация скорости wordpress сайта
Оптимизация скорости загрузки сайтов WordPress и не только
Скорость загрузки веб-сайтов на WordPress
Согласитесь, что никто не любит медленные сайты и чем дольше загружается ваш сайт тем больше вы теряете посетителей еще до того как ваш сайт полностью загрузился. Занимаясь созданием веб сайтов мы не можем игнорировать такой существенный факт, а в стремлении сделать веб сайты более качественными и полезными, поделимся с вами основными методами увеличения и оптимизации скорости загрузки сайтов.
В первую очередь отметить самые достоверные сервисы проверки скорости загрузки сайта:
GTMetrix — предоставляет исчерпывающую информацию о скорости загрузки сайта, размере страницы, количестве отправленных на сервер запросов. Здесь подробно описываются недостатки оптимизации и рекомендации по их устранению по двум метрикам PageSpeed и YSlow, так что работы у вас будет много.
PageSpeed Insights — предоставляет отчет по скорости загрузки в PageSpeed Score, здесь не отображается время загрузки сайта, но есть много полезной информации. PageSpeed Insights подготавливает за вас уже оптимизированные изображения и минифицированные CSS и JS файлы, которые можно скачать в один клик.
Оптимизация скорости загрузки сайта
Существует несколько способов увеличения скорости загрузки сайта WordPress, и первый из них это кэш.
Каждый раз, когда посетитель посещает сайт, браузер отправляет запрос на сервер веб-сайта, и сервер отвечает на него соответствующим образом. Но, если на веб-сайте есть сочетание динамических и статичных данных, то для отображения страницы потребуется больше времени на получение ответа от сервера. Это увеличивает время отклика сервера, в результате чего увеличивается время загрузки страницы.
Браузеры тратят почти 80% времени на получение различных компонентов, включая изображения, таблицы стилей и скрипты. Сокращение количества HTTP-запросов помогает сократить время ответа сервера.
Статический контент всегда загружается быстрее, чем динамический. Как насчет идеи отделить статическую составляющую от динамической? Здесь вам пригодится кэш. Кэш — это данные, которые обычно хранятся на машине пользователя. В большинстве случаев он включает в себя статические данные, которые не меняются слишком часто, такие как изображения, CSS, JS и HTML-файлы. Таким образом, всякий раз, когда браузер посетителя отправляет запрос, статические данные загрузившись однажды, всегда потом загружаются через кэш, а динамические данные будут обслуживаться веб сервером. Таким образом, вы можете уменьшить количество запросов, отправленных на сервер, и получить более быстрое время загрузки страницы.
Но это не единственная возможность, во многих случаях кэш может также храниться на сервере.
Для создания хороших сайтов и увеличения скорости их загрузки можно использовать несколько методов кэширования. Почти все кэширующие плагины используют следующие базовые методы. Хотя вы можете использовать плагины, ниже будут приведены примеры кодов для ручной настройки всех перечисленных критериев, для тех кому важно сохранять независимость своего сайта от плагинов и иметь возможность самостоятельно поддерживать свой сайт.
Кэш браузера
Кэш браузера — это временное хранилище файлов, загружаемых браузерами.Когда посетитель заново попадает на сайт, браузер проверяет, какой контент был обновлен, и отправляет запрос на сервер только для того контента, который обновился.
Это помогает сократить количество HTTP-запросов, что приводит к более быстрой загрузке веб-страницы.
Как включить кэш браузера? Конфигурация Apache для обслуживания заголовков
Это пример конфигурации сервера Apache, если у вас другой сервер конфигурация скорее всего будет отличаться, но вы можете легко найти настройки для своего сервера в сети. Найдите файл .htaccess в корне домена. В этом файле мы установим параметры кэширования, чтобы сообщить браузеру, какие типы файлов и как долго будут кэшироваться.
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule>
Компоненты GZip
В настоящее время GZip считается наиболее эффективным методом сжатия. Gzip сжимает ваши веб-страницы и таблицы стилей перед отправкой их в браузер. Это значительно сокращает время передачи, так как размер файлов становится намного меньше.
Как работает GZip
В целом идея GZip доволно проста, но чрезвычайно эффективна. GZip находит аналогичные строки в текстовых файлах и временно заменяет эти строки, чтобы уменьшить общий размер файла.
Причина, по которой GZip хорошо работает, заключается в том, что файлы CSS и HTML используют много повторяющегося текста и имеют множество пробелов. Поскольку GZip сжимает общие строки, что может уменьшить размер страниц и таблиц стилей до 70%! Когда браузер посещает веб-сервер, он проверяет, включен ли GZip и, запрашивая веб-страницу, получает либо файл GZip либо ее несжатую копию.
Как включить GZip
Конфигурация снова приведена на примере Apache. Добавьте в .htaccess типы файлов, для которых необходимо включить GZip сжатие:
<IfModule mod_deflate.c> # Сжимаем HTML, CSS, JavaScript, Text, XML и шрифты AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Устраняем браузерные баги (только для слишком старых браузеров) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Vary: Accept-Encoding Header
После включения GZip по рекомендации GTMetrix нам следует включить Vary: Accept-Encoding. Дело здесь не так страшно, но красные полосы в аналитике раздражают, поэтому будем разбираться. Все дело в том, что GTMetrix переживает за ваших пользователей со старыми браузерами, которые могут не поддерживать GZip, поэтому перед отправкой рекомендует проверить поддерживает ли браузер пользователя GZip. Замечания могут выглядеть так:
- «Specify a Vary: Accept-Encoding Header»
- The following publicly cacheable, compressible resources should have a «vary: accept-encoding» header
А вот способ устранения для Apache. В .htaccess пишем следующее:
<IfModule mod_headers.c> <FilesMatch ".(js|css|xml|gz|html)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule>Помещайте стили вверху страницы
Визуальные элементы являются важными элементами каждого веб-сайта. Всегда рекомендуется помещать таблицы стилей в HEAD страницы, поскольку они являются статическими файлами и могут быстро загружаться. Эта техника называется прогрессивным рендерингом, с помощью которого содержимое отображается как можно быстрее.
Это улучшает общий пользовательский интерфейс, и посетитель не теряет интереса, пока загружается остальная часть страницы.
Размещайте скрипты как можно ниже
Когда пользователь посещает веб-страницу, браузер начинает получать HTML, и каждый раз, когда браузер встречает тег для внешнего источника изображения, скрипта или файла CSS, он начнет загружать этот файл одновременно.
Если скрипты находятся в нижней части страницы, они будут загружены последними. Вышеуказанные элементы гарантируют, что что-то появится в браузере быстрее, прежде чем пользователь потеряет интерес. Это может улучшить общий пользовательский интерфейс.
Сократите JavaScript и CSS
Минификация — это практика уменьшения размеров файлов HTML, CSS и JavaScript, путем удаления ненужных символов из кода, таких как комментарии, переходы на новые строки, пробелы и т.д., тем самым увеличивается скорость загрузки. Хотя минимизация помогает повысить производительность веб-страницы, но она также может сломать CSS сайта. Тем не менее, всегда рекомендуется сначала выполнить тестирование на промежуточной версии сайта, прежде чем применять этот метод.
Совместите CSS и JavaScript
Если у вас есть несколько файлов JavaScript, объедините их в один. Это будет генерировать только один запрос на сервер, а не отправлять запросы, равные количеству JS-файлов. Аналогично и для файлов CSS, объедините все файлы CSS в один.
Используйте CDN
Предположим, ваш сайт на WordPress имеет большую аудиторию, а его сервер находится в США. Например, когда посетитель посещает сайт из другого уголка мира, запрос отправляется на сервер, затем сервер обрабатывает запрос и отвечает на него соответствующим образом. Разумеется, чем дольше расстояние между посетителем и сервером, тем больше задержки при загрузке веб-страницы.
Именно здесь приходит на помощь CDN.
CDN представляет собой набор веб-серверов, распределенных по нескольким географическим местоположениям, для доставки контента, запрашивающего данные из этих мест. Он кэширует и распространяет содержимое сайта по всей своей сети для более быстрого ответа, не затрагивая сам сервер.
Оптимизируйте изображения
Изображения очень сильно влияют на скорость загрузки сайта, именно поэтому очень важно привести их к оптимизированному виду. Не используйте изображения большего размера, чем необходимо, лучше уменьшить их размер и сохранить с применением прогрессивного метода. Также многочисленные редакторы изображений, таких как Adobe Photoshop, позволяют значительно сократить размер картинок практически без потерь для качества.
Подведем итог
Итак, мы достаточно подробно рассмотрели методы кэширования, которые использует большинство плагинов для WordPress, и которые вы можете настроить самостоятельно. У каждого плагина свой механизм и настройки, чтобы сделать сайт WordPress быстрее. Хотя агентствам оказывающим услуги разработки сайтов предпочтительнее прописывать эти параметры самостоятельно, чтобы разбираться в каждой части кода вашего сайта и минимизировать зависимость от плагинов.
Если вы решили остановиться на применении плагинов, вот наиболее широко используемые плагины WordPress с самым высоким рейтингом, который уже смогли внести свой значительный вклад в развитие WordPress.
- WP Rocket
- WP Super Cache
- WP Fastest Cache
- W3 Total Cache
Каждый плагин имеет свой собственный набор функций, которые отделяют их друг от друга. Выбор хорошего плагина должен основываться на ваших требованиях, уровне знаний и, конечно, бюджете.
Всегда рекомендуется следить за добавлением новых плагинов в репозиторий WordPress. Стоит отметить, что люди в Cloudways запустили плагин для кеширования WordPress под названием Breeze в ответ на отзывы своих клиентов.
Breeze — это простой в использовании и бесплатный плагин для кэша WordPress. Помимо кэширования, он также предлагает интеграцию CDN и оптимизацию базы данных. Cloudways утверждает, что сайт WordPress, размещенный через Cloudways со встроенным Breeze, может быть загружен всего за 143 мс.
appside.by
Как увеличить скорость загрузки сайта wordpress
Доброго вам дня, уважаемые начинающие, а так же продвинутые в области создания сайтов пользователи! В настоящее время количество вновь появляющихся блогов, интернет-магазинов и прочих проектов увеличивается, конкуренция растёт, и предпочтение отдаётся тем, у кого оптимизация загрузки соответствует нормам. Поэтому сегодня мы разберём один из самых важных вопросов.
Как увеличить скорость загрузки сайта wordpress?
Начнём с главного: выбор хостинга. Во-первых, крайне важна репутация хостинга. И если вас не прельщает постоянное зависание сайта, бесконечные сбои и отсутствие работы техподдержки, если у вас серьёзные далекоидущие цели и желание получить полноценную отдачу от своего проекта, лучше не начинать свой старт с регистрации на первом попавшемся не проверенном хостинге. Также со всей серьёзностью отнеситесь к выбору домена. Если решили приобрести кем-то уже использованный, то обратите внимание, был ли он ранее под санкциями.
Обязательно изучите технические характеристики хостинга. Запомните, что не все хвалебные отзывы, которые вы прочтёте, правильно характеризуют работу хостинг-провайдеров. Некоторые провайдеры умудряются получить такой отзыв за предоставленную акцию, на деле это оборачивается бесплатным сыром в мышеловке для одних и медвежьей услугой для других. Адекватный ответ можно получить в группах или на форумах от тех, кто уже не один год занимается созданием и продвижением сайтов. Уважающий же себя хостер предоставляет всю документацию от сертификатов до полных контактных данных. Не ленитесь найти и почитать все советы данного выбранного хостинга!
Теперь о том, как увеличить скорость загрузки страниц сайта.
Начнём, пожалуй, с установки плагинов. С некоторых пор нам хочется, чтобы плагины за нас делали всё на сайте. Хоть и знаем, что большое их нагромождение может вызвать конфликт, и как следствие, сбой, но нас уже несёт, — чем больше, тем лучше. Не будем расписывать их работу, думаем, что вы сами внимательно почитаете инструкции, просто предоставим вам список на ваш выбор.
Плагины кэширования: WP Super Cache, W3 Total Cache, Hyper Cache Extended.
Плагины оптимизации базы данных: Wp Optimize, WP DB Manager, WP Database Optimizer.
Оптимизация изображений: WP Smush IT, WP Resized Image Quality, Lazy Load.
Сжатие стилей, скриптов и html: Autoptimize, WP-HTML-Compression, WP Optimize By xTraffic и WP Optimize Speed By xTraffic.
Оптимизация SEO: All In One SEO Pack, Yoast SEO.
При установке плагинов напоминаем, что не на всех сайтах они одинаково корректно могут работать, и если хорошо одному, не факт, что подойдёт для другого. Тут уж пристальнее следите за изменениями на сайте.
Очень важно обратить внимание на правильное заполнение файлов robots.txt и .htaccess, находящихся в корневой папке вашего сайта на хостинге. Так же, как и с плагинами, тут единого правила нет. Всё зависит от многих факторов, тем более, у всех разные возможности размещения и заполнения созданного проекта.
Поэтому не будем углубляться в расширенное пояснение, что, куда и зачем добавить, вы можете скачать готовые образцы файлов и составить свои, выбрав подходящее дополнение.
СКАЧАТЬ ФАЙЛЫ
Конечно, можно долго перечислять, что способствует плохой загрузке. И мы поделились лишь малой толикой из того, что приближает нас к её улучшению.
На что ещё нужно обратить внимание? Многие грешат тем, что создают много мусора на своём сайте. Это и не вычищенные корзины, и громоздкие изображения, и так же добавленные впрок, остающиеся лежать мёртвым грузом картинки. У кого-то сохраняются спам-комментарии, или в разделе Пользователи много зарегистрированных спамеров. Кто-то в погоне за плагинами не обращает внимание на их безопасность и совместимость с обновлённой версией wordpress. То же самое можно сказать и о скачанных и не проверенных темах. Всё это не только несёт дополнительную нагрузку на сайт, но и делает его незащищённым. Хотя, может так статься, кому-то и при этом, как в лотерее, выпадает джокер — и с сайтом ничего плохого не происходит. Но это уже другая история.
Настало время приступить к проверке скорости загрузки сайта. Воспользуемся сервисом: https://developers.google.com/speed/pagespeed/insights/. Добавив в окошко ссылку на свой сайт, вы не только увидите свою скорость, но и сможете скачать архив уже готовых оптимизированных файлов, которые здесь получите в качестве бонуса и сможете заменить ими файлы на хостинге, очень внимательно сверяя путь их расположения.
Ну, а теперь сверяем скорость. У вас какая?
kinsite.ru
Как добиться 100% для вашего сайта по Google Page Insights
Google PageSpeed Insights — это бесплатный онлайн-инструмент от Google, который предоставляет рекомендации по увеличению скорости загрузки сайта в браузере посетителя.
Принцип работы сервиса:
- Анализ структуры html-страницы по указанному адресу
- Отображение элементов, которые замедляют прорисовку страницы
- Рекомендации по устранению проблем.
Чем меньше время между кликом по ссылке (переход на ваш сайт) и моментом полной загрузки контента, тем больше вероятность того, что посетителей станет вашем клиентом и не закроет вкладку наблюдая белый экран.Мы не можем утверждать, что 100% показатель влияет на ранжированность сайта в поиске Google, но то, что это прямо или косвенно влияет на конверсию сайта — это факт.
Сервис для проверки скорости загрузки страницы:
- https://developers.google.com/speed/ pagespeed/insights
Сервис для проверки мобильной версии сайта:
- https://www.google.com/webmasters/tools/ mobile-friendly
Оптимизация изображений
Для увеличения скорости загрузки html-страницы необходимо оптимизировать изображения, так как правильный формат и сжатие позволяет значительно сократить общий объем.
Ссылки на изображения, которые используются на сайте, могут находится в тегах <img> (например: карточки товаров, баннеры и т.д.), а также в файлах CSS (файл стилей) и JS (скрипты).Для оптимизации первой группы можно использовать готовый плагин WP Smush, для второй — онлайн сервис Tinypng.com
Подробнее рассмотрим каждый из них.
Плагин WP-Smush
Скачать плагин WP-Smush можно на официальном сайте WordPress по ссылке: https://uk.wordpress.org/plugins/wp-smushit/
Установка и настройка плагина WP-Smush
- Перед установкой рекомендуется проверить совместимость плагина с вашей версией WordPress
- Установить плагин через админ.панель (Админ.панель — Плагины — Добавить новый — вбить в поиск WP-Smush и нажать скачать) или загрузить исходные файлы через ftp в папку plugins.
- Перейти в настройки (Settings) и кликнуть Check Images.
Онлайн-сервис Tinypng
Сервис позволяет сжимать изображения в формате PNG и JPG без видимой потери качества. Это значит, что соблюдается правильный баланс между качеством изображений и ее размером.
Чтобы воспользоваться сервисом не требуется регистрация. Все что нужно сделать — это загрузить на сайт изображения и через несколько минут скачать сжатые картинки по ссылке. Максимально допустимый размер изображения — 5мб, количество картинок для одной загрузки — 20.
Обфускация HTML, Javascript, CSS
Обфускация — это процесс, в результате которого код программы приобретает трудный для анализа вид, например запись кода в одну строку.
В нашем случае обфускация — это процесс сжатия статических файлов (html, css, javascript), с целью увеличения скорости загрузки страницы.
Для сайтов на базе CMS WordPress существует множество готовых решений, например плагин Autoptimize
Плагин Autoptimize позволяет:
- сжать файлы javascript, css;
- объединить все стили в один CSS файл;
- объединить js-файлы и встроенные скрипты в один файл, тем самым уменьшить количество запросов на сервер.
Скачать плагин Autoptimize можно на официальном сайте WordPress по ссылке: https://uk.wordpress.org/plugins/autoptimize/
Посмотреть результат внедрения всех рекомендаций можно в кейсе «Разработка промо-сайта и запуск контекстной рекламы для культурно-развлекательного комплекса Навруз»
Установка и настройка плагина Autoptimize
- Установить плагин через админ.панель (Админ.панель — Плагины — Добавить новый — вбить в поиск Autoptimize и нажать скачать) или загрузить исходные файлы через ftp в папку plugins.
- Перейти в настройки
- Выбираем пункты, которые нужно оптимизировать
Удаление кода JavaScript и CSS, блокирующего и замедляющего отображение верхней части страницы
Мы можем это сделать в настройках ранее установленного плагина Autoptimize:
- В разделе Опции JavaScript снять галочку “Force JavaScript in?”
- В разделе Опции CSS выбрать “Inline all CSS?”
Использование кеша браузера
Благодаря кешированию пользователи, повторно посещающие ваш сайт, тратят меньше времени на загрузку страниц. Заголовки кеширования должны применяться ко всем кешируемым статическим ресурсам, а не только к некоторым из них (например, изображениям). Кешируемые ресурсы включают файлы JavaScript и CSS, графические и другие файлы (мультимедийное содержание, файлы PDF и т. д.). Обычно код HTML не является статическим ресурсом и по умолчанию не считается кешируемым.
Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Плагин Hyper Cache
Скачать плагин Hyper Cache можно на официальном сайте WordPress по ссылке: https://uk.wordpress.org/plugins/hyper-cache/
Hyper Cache сохраняет уже готовый, сформированный документ в виде статичного HTML файла страницы. При повторном запросе этой страницы другим пользователем или обновлении, плагин показывает сохраненную в кэше версию, не обращаясь за информацией к базе данных и не заставляя WordPress выполнять php скрипты.
Установка и настройка плагина Hyper Cache
Disable translations — позволяет отключить встроенный переводчик, если поставите галочку. В этом случае весь текст плагина должен отображаться в оригинале на английском.
Кэшированные страницы, будут действительны в течение — указывается период, в течение которого будут храниться кэшированные версии документов. По истечении данного времени кэш сбрасывается и создается по новой при очередном посещении пользователем.
Включить сжатие — включает сжатие данных при передаче информации.
Enable on-the-fly compression — включает сжатие «на лету» для страниц, которых нет в кэше.Можно настроить обновление кэша последних записей в том случае, если обновлена главная. Для этого в «Когда обновлена домашняя страница, обновятся остальные.» укажите количество постов, которые должны меняться.
Когда записи отредактированы, При написании комментария — позволяют включить обновление копий домашней страницы, архивов, тегов и рубрик при изменении постов, и при появлении новых комментариев к записям.
Папка кэша — позволяет сменить стандартную папку, используемую плагином для хранения данных на свою.Далее эта функция будет выполняться через — включает опцию автоматической очистки кэша от старых неиспользуемых (несуществующих) материалов.Разрешение кеширования браузерами — разрешает браузерам кэшировать данные с сайта на пользовательской стороне (на компьютере посетителя). Указывается время актуальности данных.
HTTPS – эта настройка нужна в том случае, если ваш блог использует соответствующий протокол. По умолчанию устанавливается хранение раздельного кэша для http и https протоколов.
Служит ботам со страницами с закончившимся сроком действия — вы можете выбрать – показывать данные с истекшим сроком годности из кэша или отдавать обычную страницу WordPress.
- Вкладка Исключения
Вы можете выбрать, какие страницы кэшировать не следует. Можно исключать как конкретные, предложенные самим плагином страницы (главная, ошибка 404, лента комментариев), так и собственные — просто укажите URL, и Hyper Cache не будет кэшировать эту страницу.
- Вкладка Мобильный
Для начала необходимо указать плагину, какой посетитель будет считаться пришедшим с мобильного устройства. Для этого используем тот же список мобильных агентов, что мы указывали на вкладке исключения (если вы рассчитывали на такие устройства). Если никаких особых указаний для мобильного трафика вы не планируете – оставляйте поле пустым и все.
Теперь выбираем режим работы, там есть 3 варианта:
- Использовать стандартный кэш – это вариант, при котором никакой разницы между пользователями разных устройств не будет – все получат те же самые страницы.
- Кэшировать отдельно – позволяет пользователям с мобильными user-agent выдавать кэш с использованием темы оформления отличной от основной (для пользователей ПК показываете обычный шаблон, для мобильных другой – облегченный) — получается 2 разных кэша.
- Не кэшировать страницу – плагин вмешиваться в работу сайта, при заходе мобильных пользователей, не будет.
Если в режиме работы был выбран вариант с раздельным кэшем, то во вкладке мобильная тема необходимо указать какая тема должна применяться для мобильного трафика (из выпадающего списка).
Настройка кеширования на виртуальном сервере
Так как, в нашем случае, есть возможность настроить кеширование на сервере:
- Нужно зайти в Настройка сайта
- В поле Статические файлы указать список расширений статических файлов
- В поле Кеширование выбрать время кеширования файлов
- Сохранить настройки
А если у Вас нет настроек кеширования на виртуальном сервере, то нужно обратиться в Техническую поддержку сервера, или попытаться настроить самому в файле .htaccess.
Автор:
webim.pro
5 мифов, связанных с оптимизацией скорости работы сайта
Оптимизация скорости работы вашего сайта может быть сложным вопросом, особенно для тех, кто не является разработчиком. Многочисленные статьи и руководства упрощают проведение оптимизации, предлагая различные советы, которые не являются универсальными и не могут применяться абсолютно к каждому сайту. Вот несколько советов, которые требуют детального разъяснения.
1. Ваша оценка производительности играет роль.
Если вы используете один из популярных инструментов тестирования скорости, такой как Google PageSpeed Insights, GTMetrix или Pingdom, вы получаете данные о производительности вашего сайта в виде оценки, которая дополнена некоторыми рекомендациями. Клиенты часто думают, что если у них имеется плагин кэширования, то они должны получить практически идеальные результаты. Естественно, такой подход не является правильным; более того, стремление достичь идеальной оценки – это просто пустая трата времени.
Суть в том, что оценка производительности вашего сайта не имеет значения! Единственная метрика, которая важна – это реальное время загрузки ваших страниц.
Почему оценка не имеет значения
Основные причины того, почему нам нужен более быстрый сайт:
- Чтобы улучшить SEO
- Чтобы улучшить опыт взаимодействия
- Чтобы поднять конверсию
Оценка производительности не влияет ни на что из этого.
Когда Google-бот посещает ваш сайт, он не знает вашу оценку производительности, которую показывают инструменты тестирования скорости. Он видит только то, как быстро загружается ваша страница.
Зачем нужна оценка производительности?
Оценка производительности и рекомендации могут быть полезны в качестве установившихся практик для разных руководств, а также для определения проблемных мест сайта. Факт в том, что более высокая оценка производительности не равна высокой скорости загрузки страниц. Я видел много сайтов с высокими оценками, но при этом с медленной скоростью работы.
К примеру, следующий сайт имеет время загрузки 30с – очень и очень много, но при этом оценка производительности Pingdom равна 96/100.
К тому же, каждый инструмент, который вы используете для оценки производительности, может давать разные результаты. И какой из них «правильный»? Поэтому не нужно переживать по поводу достижения каких-то оценок, лучше сосредоточьтесь на времени загрузки страниц.
Иногда предложения, которые даются сервисами, помогают поднять скорость загрузки, однако зачастую их сложно применить, чтобы извлечь для себя хоть какую-то пользу.
Классический пример этого – когда Google PageSpeed предлагает перенести CSS и JS файлы в футер. Некоторые JS-файлы могут быть перенесены в футер, в то время как перенос других может привести к поломке всего сайта. Аналогично, если вы загрузите свой сайт без CSS-стилей, он будет выглядеть сломанным, и будет предлагать ужасный опыт взаимодействия.
2. Вам нужны все типы кэширования.
Есть несколько разных доступных типов кэширования, и некоторые статьи предлагают реализовать их все – кэширование страниц, кэширование базы данных, Memcached и т.д.
На сайте без кэширования, когда пользователь переходит на страницу, сервер с помощью PHP должен получить из базы данных все компоненты страниц и контент, собрать их и передать обратно браузеру. Это требует некоторого времени.
В отличие от этого, кэширования страниц (которое делают разные плагины) генерирует статичные HTML файлы с вашим контентом, которые быстрее передаются вашим посетителям.
Это означает, что если у вас включено кэширование страниц и посетитель пришел на ваш сайт, ваша база данных даже не будет использоваться. Поэтому в большинстве ситуаций с кэшированием страниц вам не придется кэшировать также и базу данных. Это – истина для многих веб-сайтов.
Есть некоторые обстоятельства, при которых кэширование базы данных может оказаться необходимым, однако они не проявляют себя в случае со среднестатистическим сайтом. К примеру, если у вас имеется высокодинамичный сайт, для которого кэширование страниц попросту неосуществимо – в таком случае кэширование базы данных может оказаться полезным. Обычному блогеру про это думать не нужно.
Некоторые виды кэширования выполняются на уровне сервера, поэтому вы можете быть ограничены в плане своих решений – к примеру, если вы используете виртуальный или управляемый хостинг. В таком случае вы будете находиться во власти своего хостера. Однако кэширование страниц всегда может реализовать любой пользователь с помощью WordPress-плагина.
3. Можно положиться только на плагин кэширования.
Плагин кэширования – важный инструмент в вашем наборе инструментов для создания быстрого веб-сайта. Однако он не должен быть единственным. WordPress-сайт состоит из разных уровней, которые могут быть оптимизированы. Оптимизация одних является более простой для неспециалистов, в то время как оптимизация других — более сложной.
Плагин кэширования (когда настроек правильно) всегда окажет свою помощь, однако он представляет собой заключительный уровень для создания быстрого сайта. Если ваш сайт в целом неэффективен, то плагин кэширования будет выступать просто в роли лейкопластыря.
Другие уровни, которые надо рассмотреть:
Веб-хостинг
Хостинг – это фундамент для вашего сайта, поэтому не стоит на нем экономить. Если ваш хостинг слишком плохой, вы обречены, поскольку всегда будет иметься потолок того, как быстро ваш сайт может работать. Качественный веб-хостинг не всегда супер дорогой.
В иностранном сегменте есть несколько хостингов, которые мы рекомендуем использовать – к примеру, SiteGround и FastComet. Они не такие дорогие, но при этом очень эффективные. Есть и другие хостинги. Главное – не выбирать самый дешевый.
Ваша тема
Код вашего сайта несет в себе тема, поэтому неэффективно кодированная тема навредит вам. Это такая область, которую очень трудно исправить, особенно если вы не являетесь разработчиком. Поэтому в некоторых случаях вам придется нанять разработчика для того, чтобы провести оптимизацию скорости и улучшить производительность темы.
Обычно темы вида «все в одном», включающие в себя кучу возможностей, несут в себе дополнительный вес, который достигается при помощи загрузки разных ненужных вам скриптов и т.д. Если вы работаете с одной из таких тем, не активируйте все возможные настройки (к примеру, три разных слайдера), если вы их не используете.
Ваши плагины
В противовес популярному мнению, важно не количество плагинов, а их качество. Достаточно одного ужасно написанного плагина, чтобы ваш сайт начал тормозить. Конечно, надо разумно подбирать плагины и удалять те из них, которые вы не используете.
Итог
Если вы поместите реактивный двигатель на спортивный автомобиль и на танк, спортивный автомобиль все равно будет ехать быстрее, поскольку он оптимизирован и создан для достижения высокой скорости. То же самое применимо и к вашему сайту.
Кэширование не способно исправить плохой код, оно может только смягчить эффекты до некоторой степени. Чем качественнее все остальные компоненты вашего сайта, тем лучше и быстрее будет работать ваш сайт.
4. Меньше HTTP-запросов = более быстрый сайт.
Популярная рекомендация – вы должны сократить количество запросов, которое ваш сайт делает к серверу для формирования страницы. Обычно это верно – сокращение количества запросов является хорошей практикой. Однако, как и со всем остальным, здесь есть некоторые нюансы.
Нюансы связаны с минификацией. Большинство инструментов для минификации берут все ваши CSS-файлы и объединяют их в один большой файл (конкатенация). Таким образом, если у вас изначально было 8 CSS файлов на сайте, теперь у вас будет 1. Соответственно, будет произведен только 1 HTTP-запрос вместо 8. Лучше, не правда ли?
Может — да, может — нет. Современные браузеры в состоянии загружать многочисленные файлы за один раз параллельно. Таким образом, более эффективным подходом для вашего браузера может быть загрузка нескольких мелких файлов за один раз, нежели одного большого файла. Результаты могут варьироваться в зависимости от сайтов, поэтому вам нужно будет это протестировать.
Вот иллюстрация того, почему количество запросов не является лучшим индикатором эффективности.
На моем тестовом сайте выполняется 43 запроса, скорость загрузки – 639мс.
Загрузив всего лишь два больших, неоптимизированных изображения на страницу, я добавил только 2 лишних http-запроса, однако время загрузки удвоилось вследствие размера страницы:
Поэтому вы не должны фокусироваться только на одном индикаторе – важно придерживаться целостного подхода к оптимизации.
5. CDN – необходимость.
Это еще один достаточно популярный совет, который не стоит использовать бездумно.
Суть CDN состоит в том, что ваши ресурсы (изображения, CSS-файлы, JS-файлы) передаются вашему посетителю из ближайшей территориальной локации к нему, чтобы снизить задержку.
Задержка – время, которое требуется серверу для передачи контента браузеру пользователя. Чем дальше от сервера пользователь, тем дольше будут доставляться ресурсы.
С помощью CDN контент распределяется по разным серверам мира, чтобы он мог быть передан с самой ближней точки к пользователю, поэтому пользователь видит его быстрее.
Таким образом, CDN целесообразен только в том случае, если ваша аудитория распределена по миру, иначе это может стать бессмысленным и лишним расходом.
Вы должны также иметь в виду, что поскольку CDN – это внешний сервер, браузер должен выполнить просмотр DNS для достижения этого сервера, и каждый такой просмотр требует времени (примерно 200мс).
Таким образом, вы должны убедиться в том, что выигрыш в быстродействии, который вы получаете при использовании CDN, перевешивает минусы в виде времени просмотра и разрешения DNS.
Оптимизация скорости – это не какой-то универсальный процесс, применимый для всех. Методом проб и ошибок вы должны подобрать для себя лучшее решение. Все рекомендации, которые вы найдете в сети, должны быть тщательно протестированы в ваших определенных условиях, чтобы понять, помогут ли они вам или нет.
Источник: blog.wp-rocket.me
oddstyle.ru
