Само собой разумеется, что иметь быстрый и надежный сайт очень важно – особенно когда практически все, что мы делаем в Интернете, можно сделать мгновенно. В наши дни нет никакого терпения для медленных сайтов. К счастью, когда речь заходит об улучшении скорости сайта на WordPress, вы можете сделать многое, чтобы увеличить скорость и сделать так, чтобы ваши пользователи, клиенты и поисковые системы были довольны. В этой статье мы рассмотрим 24 исправления, которые значительно улучшат время загрузки сайта, включая как общие улучшения скорости, так и улучшения, связанные с разработкой. Это не просто очередное руководство “X советов по ускорению работы WordPress”. В этом окончательном, пошаговом руководстве мы рассмотрим все аспекты оптимизации и ускорения работы вашего сайта WordPress.
Почему скорость страницы имеет значение
Если вы зарабатываете на жизнь своим сайтом, скорость страницы – это то, что вы не можете позволить себе игнорировать. Некоторое время назад компания Loadstorm объединила результаты нескольких исследований в красивую инфографику, которая показывает, что увеличение времени загрузки страницы на одну секунду приводит к снижению конверсии на 7%, уменьшению количества просмотров страниц на 11% и снижению удовлетворенности клиентов на 16%. Поверните эту статистику на конец, и для всех намерений и целей, уменьшение времени загрузки вашего сайта на 1 секунду может принести вам легкое увеличение прибыли на 7%. Люди также, кажется, забывают, что качество интернет-услуг не одинаково во всем мире, даже если вы используете CDN и все оптимизируете. Ваша страница может загрузиться за 2 секунды для вас в Нью-Йорке, за 2,3 секунды для вашего друга в Дублине, но она может загрузиться за 4-5 секунд в Индии.
При дальнейшей оптимизации вы можете снизить время загрузки в США всего на 0,3 секунды, но в Индии – на 1,8, что приведет к увеличению продаж. Не забывайте, что Интернет огромен, и любое приведенное вами число – это среднее значение, а любое число, с которым вы столкнулись, – это единичная выборка из огромного множества. В дополнение ко всем прямым преимуществам, хорошо известно, что скорость страницы оказывает большое влияние на SEO. Некоторые статьи проливают свет на корреляцию между Google и быстрым сайтом. Одно можно сказать наверняка: лучшая скорость = более высокий рейтинг в глазах Google. Если вы заботитесь об окружающей среде, вы можете рассматривать это как упражнение по уменьшению углеродного следа. Более быстрый сайт обычно является результатом меньшей обработки, меньшего количества запросов и меньшего объема данных, что означает, что компьютеры, обслуживающие ваш сайт, работают меньше, что снижает их тепловыделение, а это, в свою очередь, означает меньшую потребность в охлаждении. Эффект, вероятно, незаметен на уровне одного сервера, но его можно измерить в масштабе.
Как начать
Я разделю эту статью на три части. Вначале я расскажу о некоторых общих соображениях и постараюсь раскрыть нюансы проблем скорости. Следующие два раздела будут посвящены улучшениям, которые может сделать любой пользователь, и улучшениям, которые могут сделать кодеры. В этих двух последних разделах будет некоторое дублирование. Я призываю тех, кто не занимается кодированием, просмотреть оба раздела. Многие тактики увеличения скорости можно реализовать, следуя простым руководствам, даже несмотря на то, что они могут иметь некоторый связанный код. Я надеюсь, что к концу статьи каждый сможет взять на вооружение хотя бы пару идей и применить их немедленно, чтобы сделать веб быстрее для всех нас!
Почему сайт работает медленно?
Понимание этого факта является ключом к принятию разумных решений в будущем. Существует огромная разница между тем, что сайт работает медленно, потому что он находится на дешевом сервере, и тем, что он работает медленно из-за неэффективного кода или загрузки массивных изображений. Обратите внимание, что следующий список не содержит элементов, которые всегда можно “исправить”. Я перечислю все отдельные слои, которые увеличивают вашу скорость. Позже наша задача будет заключаться в оптимизации этой скорости. А пока давайте познакомимся со всеми компонентами.
1. Базовая технология. Язык и базовая технология, которую вы используете для работы своего сайта, определяют скорость обработки кода на сервере. Если вы используете только HTML, это не столь важно, но большинство веб-сайтов используют программирование на стороне сервера. Вы можете использовать ASP.net, PHP или, возможно, HHVM для выполнения PHP-кода. Простой смертный не так уж много может сделать для увеличения скорости в основных языках. Хотя я не эксперт, я считаю, что ASP.net технически имеет возможность быть быстрее PHP, но разница незначительна. HHVM начал превосходить PHP с момента его выпуска, но эти две технологии начали вести (дружественную) войну, и теперь, похоже, новый PHP 7 превзойдет HHVM, что, надеюсь, вызовет цикл увеличения производительности этих технологий, делая нас, конечных пользователей, очень счастливыми. Одна из областей, где вы можете повлиять на ситуацию – это конфигурация вашего сервера. Например, серверы могут быть настроены на отправку данных в сжатом формате, известном как gzip-сжатие. Это простая настройка, которую можно включить или выключить, очевидно, что ее включение увеличит скорость. Далее мы рассмотрим некоторые из этих методов.
2. Система управления контентом. Как правило, любая система CMS будет работать медленнее, чем правильно сделанный статический HTML-сайт. Хотя верно, что полное кэширование страниц может минимизировать разницу в скорости, кэш иногда нужно очищать, пользователи, вошедшие в систему, обычно не получают кэшированные версии, а администрирование контента всегда отнимает больше ресурсов. Тем не менее, хорошо построенная система CMS принесет гораздо больше пользы, чем вреда. Она будет более безопасной, вы сможете легче добавлять контент, и они предлагают множество функций, которые вы можете реализовать в любое время. Все известные системы CMS попадают под категорию “хорошо сделанных”, поэтому WordPress, Joomla, Drupal и другие просто идеальны с точки зрения скорости. Проблемы со скоростью могут быть более распространены в некоторых системах, чем в других, но это обычно связано с использованием дополнительного кода, такого как темы, плагины, расширения и т.д. Мы рассмотрим их далее. Причина, по которой системы управления контентом работают медленнее, чем статические сайты, заключается в том, что они должны подключаться к серверу, сервер должен обработать запрос, сгенерировать HTML-код и отправить его обратно в браузер, во время обработки может быть много запросов к базе данных, которые также увеличивают время загрузки. Большинство систем имеют механизмы для оптимизации этого процесса, поэтому сайты обычно загружаются за пару секунд, что делает эти системы жизнеспособным решением.
3. Расширения. Я имею в виду расширения в совершенно общем смысле: любой код, который используется поверх вашей CMS. Для WordPress это означает темы и плагины, для Joomla и Drupal они могут называться шаблонами и расширениями. Чаще всего темы и плагины создаются не теми же людьми, которые создали саму CMS. Это означает, что если разработчики не в курсе современных лучших практик, они допускают ошибки. При кодировании существует множество способов сделать неоптимальный код без фактического возникновения ошибки. Например, если вы продумаете свои потребности в данных, вы можете обойтись одним запросом к базе данных во время выполнения операции. Если вы не продумали все до конца, вы можете использовать три. На самом деле, в зависимости от ваших потребностей, три запроса иногда могут быть быстрее, чем один, поэтому тщательный выбор методов очень важен. Примерно так все очень быстро идет по наклонной. Ниже мы рассмотрим некоторые конкретные методы кодирования, которые замедляют работу вашего кода. Пока же можно сказать, что расширения увеличивают время загрузки вашего сайта. В случае с WordPress отрицательные моменты несколько усиливаются тем, что сообщество настолько открыто. Это замечательный аспект WordPress, который никогда не следует менять, но у него есть и свои недостатки. Это делает чрезвычайно легким внесение плохого кода. Ничто не помешает вам (да и не должно помешать) создать тему с ужасным кодом, а затем продать ее, если захотите.
4. Серверы и хостинг. Ваш сервер является важным компонентом в определении скорости вашего сайта, особенно в периоды высокой посещаемости. Давайте сначала разделим эти два термина и узнаем немного больше о том, как они влияют на скорость. Ваш сервер – это физический компьютер, который находится где-то в другом месте и имеет те же свойства, что и ваш домашний компьютер. У него есть память, процессоры, место на жестком диске и другие параметры, которые определяют его производительность. Ваш хостинг-план – это, по сути, пакет услуг, привязанных к серверу. Сюда входят такие вещи, как автоматическое резервное копирование, управление сервером и так далее.
Для наших целей наиболее важным фактором хостинг-плана является то, на каком сервере вы находитесь: на виртуальном, VPS или выделенном.
Общие, VPS и выделенные серверы. Эти три термина обозначают различные типы методологии хостинга. Несколько упрощенно: они определяют, сколько людей используют тот же сервер для своего сайта, что и вы.
- При использовании общего сервиса на одном сервере могут находиться сотни людей. Это означает, что сто человек имеют одинаковое пространство на жестком диске, память, скорость процессора и пропускную способность. Ресурсы распределяются неравномерно, неисправный сайт может использовать 80% ресурсов сервера, оставляя 99 другим пользователям оставшиеся 20% или даже хуже.
- VPS (Virtual Private Server) все еще является общим, но обычно между меньшим количеством пользователей, и ресурсы распределяются равномерно. Если на одном сервере работают 5 пользователей, то каждый из них получит, например, 20% памяти. Если один пользователь попытается превысить этот объем, его сайт может выйти из строя, но сайты других пользователей будут в полном порядке.
- На выделенном сервере вы являетесь единственным пользователем сервера и всех его ресурсов. Это полностью исключает эффект “плохого соседа”, который привносят сервисы общего доступа, и в вашем распоряжении больше ресурсов, чем при использовании VPS (обычно).
Параметры сервера. Как я уже говорил, сервер, на котором находится ваш сайт, обладает некоторыми ключевыми свойствами, которые определяют его скорость. По сути, чем выше производительность вашего сервера, тем лучше будет работать ваш сайт. Разумеется, этому есть предел. Если у вас небольшой сайт WordPress с количеством просмотров в десятки тысяч в месяц, то не имеет особого значения, имеет ли ваш сервер 1 ГБ оперативной памяти или 8 ГБ. Далее, когда мы рассмотрим, что можно сделать для увеличения скорости, я расскажу о том, когда следует менять хосты и серверы, и мы обсудим этот вопрос там. Еще одно свойство, которое будет иметь значение, – это местоположение вашего сервера.
Это довольно логично. Если сервер находится в Сан-Франциско, вы получите от него данные быстрее, если вы находитесь в Сан-Диего (около 500 миль), чем если вы находитесь в Мельбурне, Австралия (около 8000 миль). Данные имеют тенденцию “трясти ногами”, когда они идут по оптоволоконным кабелям, достигая скорости, близкой к скорости света, но как только они приближаются к вашему дому, они замедляются до скоростей, которые предоставляет ваш интернет-провайдер. Ему также необходимо пройти через брандмауэры, маршрутизаторы и другие магические штуки, которые обычно замедляют работу. Расстояние, как правило, больше всего влияет на скорость выполнения запросов. Я имею в виду, что загрузка файла размером 1 ГБ из Мельбурна займет почти столько же времени, сколько и загрузка того же файла из Сан-Диего. Однако загрузка 1024 файлов размером в 1 МБ займет гораздо больше времени, если вы находитесь дальше. Почему это важно для нас? Когда сайт загружается, он может делать большое количество запросов. К ним относятся таблицы стилей, изображения, файлы javascript и другие. Минимизируя количество запросов, мы можем увеличить скорость.
Клиентский компьютер
Возраст используемого компьютера также может сильно повлиять на воспринимаемую скорость соединения. У меня дома есть немного потрепанный iPad, и мое соединение на нем кажется намного медленнее, чем на моем iMac. Этому может быть несколько причин, но я считаю, что главная из них – возраст. Деградация компонентов привела к тому, что iPad использует память менее эффективно – он медленнее обрабатывает контент и в целом менее отзывчив. До недавнего времени это не было большой проблемой, поскольку большая часть вычислений выполнялась на сервере. С появлением более мощных клиентов и, что еще важнее, новых веб-технологий, веб-сайты начинают использовать вычислительные мощности на стороне клиента. Это означает, что, например, анимация станет намного быстрее и плавнее, но это также означает, что медленные устройства будут страдать. В заключение следует отметить, что скорость любого конкретного веб-сайта определяется базовой технологией вашего сайта, вашей системой управления контентом, вашим сервером и хостингом, а также компьютером клиента.
Как увеличить скорость работы вашего сайта
Я обещал две стороны этой медали: методы для разработчиков и методы для неразработчиков. Обратите внимание, что это не означает, что все советы для неразработчиков просты в настройке. Я буду проводить различие в зависимости от того, насколько метод ориентирован на код. В основном: все, что вам нужно сделать в коде темы или плагина, попадает в раздел для разработчиков, все остальное – в общий раздел. Давайте начнем.
Общее увеличение скорости
Под общим увеличением скорости я имею в виду все методы, советы и трюки, которые вы можете выполнить, не затрагивая код сайта (темы и плагины). Возможно, вам придется редактировать некоторые серверные файлы и использовать команды терминала, но в целом, эти способы увеличения скорости не будут выполнены вашим разработчиком, если только у вас в штате нет человека, который также знает кое-что о серверах. Вот щедрая порция того, что нужно сделать. Я постарался следовать списку, который я изложил в разделе “Почему сайт работает медленно?”, чтобы облегчить вам задачу.
1. Обновите свои основные технологии. 99.99999999% из нас не смогут оптимизировать PHP, но мы можем убедиться, что он обновляется. По моему опыту, чем дороже ваш хостер, тем строже он обновляет PHP для вас в управляемой среде. Многие серверы низшего класса действительно обновят версию PHP, если вы попросите, но не будут делать это автоматически. Если вы посмотрите, например, на некоторые контрольные показатели PHP, вы поймете, почему это важно. Как видите, различные обновления самого PHP могут оказать огромное влияние.
Способ обновления версии PHP будет отличаться – в зависимости от вашего хостера. Если вы вошли в систему вашего хостера, найдите “PHP Configuration”. Вы можете найти поле, позволяющее переключаться на разные версии. Прежде чем переходить на другую версию, следует отметить, что обновление PHP сопряжено с некоторыми опасностями. Код вашего сайта и ваши файлы не исчезнут неожиданно, но если у вас работает очень старый код, вы можете столкнуться с неожиданными проблемами. Если вы не уверены, обязательно спросите у своего хостера, сможете ли вы перейти на новую версию, если что-то пойдет не так.
2. Обновите свою CMS. Это уже должно быть само собой разумеющимся, но я все еще вижу некоторые сайты, использующие старые версии WordPress. Обновления CMS обычно не дают огромного прироста скорости от одной версии к другой, но они исправляют проблемы безопасности. Дыры в системе безопасности могут привести к внедрению вредоносного кода на ваш сайт, что может привести к тому, что со временем все медленно застопорится. Кроме того, обновления CMS обычно оптимизируют систему, позволяя писать для нее более качественный код. В результате ваша база данных будет менее переполнена, запросы будут выполняться быстрее, что со временем приведет к увеличению средней скорости. Если вы тщательно следите за обновлениями, вы можете ожидать гораздо большего времени между снижениями скорости, например, из-за простой перегруженности базы данных.
3. Уменьшение запросов. Это то, что мы будем подробно рассматривать в разделе для разработчиков, потому что это гораздо проще исправить во время написания темы или плагина. Однако есть некоторые вещи, которые вы можете сделать как пользователь, чтобы улучшить ситуацию. Прежде всего, чтобы узнать, сколько запросов делает ваш сайт, вы можете использовать множество инструментов. Вы можете увидеть все запросы в инструментах разработчика вашего браузера или использовать веб-инструмент, например Pingdom, чтобы получить хороший обзор. При добавлении контента на сайт вы увеличиваете количество запросов, добавляя изображения или другие медиа элементы. По сути, вы добавляете по одному запросу на каждый элемент. Если вы добавляете галереи к своим постам, а первые 5 изображений отображаются также на страницах архива, вы можете получить до 60-70 запросов на одной странице. Если вы фотограф, художник или человек, любящий изображения, вы, вероятно, не захотите добавлять меньше изображений.
В таких случаях хорошим выходом может стать уменьшение количества сообщений на странице или показ меньшего количества изображений в архивных списках. Чтобы уменьшить количество постов на страницу, перейдите к настройкам чтения в WordPress и уменьшите значение до 8 или 6. Подумайте о сокращении плагинов, которые влияют на внешний вид сайта. Многие плагины добавляют свои собственные стили и скрипты, отключение которых сэкономит вам 1-2 запроса, если плагин хорошо закодирован, или 7-8, если это был бесполезный продукт. Смена темы также может спасти вас от большого количества запросов, хотя во многих случаях это не является жизнеспособным вариантом. Я заметил, что премиум-темы, особенно те, которые предлагают абсолютно все возможности, обычно загружают слишком много скриптов и стилей без необходимости. Ленивая загрузка изображений – это мощный инструмент, который может заставить ваш сайт казаться быстрее. На самом деле, вы не уменьшаете количество запросов, а уменьшаете необходимость их загрузки. Идея ленивой загрузки заключается в том, что изображения, которые появляются дальше по странице, на самом деле не нужно показывать, пока пользователь не прокрутит страницу рядом с ними.
У нас есть отличная статья, в которой сравниваются 6 плагинов для ленивой загрузки, загляните туда, чтобы узнать больше. Одним из лучших методов уменьшения количества запросов является конкатенация. Об этом мы подробно поговорим в разделе для кодеров. Вместо того чтобы загружать 10 файлов JavaScript, вы можете скопировать их один за другим в один файл. Это означает, что вместо загрузки 10 файлов размером в среднем 20 кб, вы можете загрузить один файл размером 200 кб, что намного быстрее. Это достаточно легко сделать при кодировании сайта, но гораздо сложнее сделать это после. Плагин типа Merge + Minify + Refresh несколько автоматизирует этот процесс, но у меня были неоднозначные результаты. Попробуйте, если они работают, вы можете увидеть значительное снижение количества запросов. При всем этом мы рекомендуем использовать наш собственный плагин ленивой загрузки Smush.
Smush – самый популярный плагин для оптимизации изображений “все в одном”, поскольку в нем есть все необходимое для того, чтобы ваши изображения загружались быстрее. Активация ленивой загрузки с помощью Smush выполняется в один клик. Кроме того, после активации ленивой загрузки вы можете изменить настройки (хотя в большинстве случаев это не обязательно). Кроме того, это бесплатный плагин. Хотя я особенно не люблю посты, содержащие пагинацию, в некоторых случаях имеет смысл разделить пост на несколько страниц. Пожалуйста, не делайте этого для увеличения количества просмотров страниц, но если у вас есть гипер-мега-супер ресурс, где перечислены ваши любимые 500 отелей с изображениями, возможно, будет хорошей идеей разделить его на разделы по 25 – 50.
4. Удалите ненужные и бесполезные плагины. Плагины не только увеличивают количество запросов, но и могут вызывать другие проблемы, например, утечки памяти или даже безопасности. Отличный плагин под названием P3 (Plugin Performance Profiler) поможет вам определить наиболее проблемных виновников. Вы также можете деактивировать все, что редко используете. Я часто использую такие инструменты, как Regenerate Thumbnails, Theme Check или P3. Хотя они бесценны, когда используются, каждый из них мне нужен примерно раз в месяц. Когда они не используются, я отключаю их, чтобы убедиться, что они не оказывают абсолютно никакого влияния на производительность.
5. Уберите ненужные конфеты для глаз. На сайтах существует множество элементов дизайна и модулей, в основном основанных на JavaScript, которые могут выглядеть красиво, но на самом деле не имеют смысла. Позвольте мне привести два примера. Первый пример касается элементов, вызывающих разочарование. Допустим, у вас есть пользовательское меню, которое при наведении на него курсора мыши разворачивается с интересной анимацией. Когда пользователь впервые увидит его, он подумает, что это довольно круто. Однако после третьего использования они будут все больше раздражаться – почему они должны ждать секунду, пока появится это чертово меню? Обычно это происходит из-за того, что программисты и владельцы сайтов используют сайт не так, как пользователи. Пользователи, скорее всего, будут использовать ссылку на вход или форму в заголовке. Убедитесь в том, что вы обеспечиваете пользователям плавное взаимодействие, а не такое, которое только выглядит круто, но в долгосрочной перспективе вызывает разочарование.
Помимо чисто визуального аспекта UX, ваш сайт получит некоторые преимущества в скорости. Будет меньше элементов для анимации, меньше Javascript в целом, и все это приведет либо к тому, что сайт будет работать быстрее, либо к тому, что он будет казаться быстрее, что одно и то же. Второй пример касается эффективности и конверсии. Мой любимый пример здесь – слайдеры. Почти каждая исследовательская статья приводит к одному и тому же выводу: слайдеры просто ужасны. Никто ими не пользуется, они занимают слишком много места, снижают SEO и сильно влияют на скорость работы сайта. Я хочу подчеркнуть, что для бизнеса цель вашего сайта не в том, чтобы выглядеть красиво. Красивый вид – это инструмент, который используется для достижения настоящей цели: зарабатывания денег. Если все исследования указывают на то, что вам следует сжечь слайдер дотла. Если это увеличит ваш доход, не все ли равно? В идеальном мире вы должны рассмотреть все элементы вашего сайта и принять некоторые решения или хотя бы обоснованные предположения. Читайте на эту тему, проводите исследования и, прежде всего, измеряйте результат.
6. Используйте CDN. Для меня CDN – это волшебная пуля для веб-сайтов, они делают все намного проще и быстрее. Я люблю использовать CDN по двум причинам: они позволяют мне размещать изображения вне сервера и уменьшают время загрузки изображений. В этой статье мы сосредоточимся на последней причине, хотя и вкратце – мне нравится размещать изображения вне сервера, потому что это освобождает мой контент от моих носителей. Я могу менять свой домен. Я могу переезжать от хостера к хостеру. Мои медиа всегда находятся в одном и том же месте. База данных и тема среднего сайта занимают, возможно, 10-25 Мб. Однако может быть и 2 Гб изображений, которые также необходимо перенести. Если все это размещено вне сервера, вам нужно беспокоиться только о 25 Мб, что не так уж и много. Вернемся к скорости! Идея CDN (Content Delivery Network) заключается в том, чтобы разместить запрашиваемые ресурсы географически ближе к вам.
7. Включить кэширование. Кэширование, вероятно, является методом номер один, поскольку оно может привести к наиболее значительным улучшениям. Идею кэширования можно понять с помощью простой аналогии. Помните, как вы впервые изучали сложение в школе? Вам физически нужно было сосчитать 5+4. Вы считали с помощью пальцев или того, что было под рукой (мама учила меня с помощью кубиков сахара). Сегодня вы наверняка просто помните ответ и автоматически знаете, что он равен 9. Ваш мозг по сути запомнил результат, и вам больше не нужно считать до него. С веб-сайтами есть один сюжетный поворот – результат уравнения не всегда один и тот же! Вот почему. Представьте себе веб-сайт, на котором отображается только ваше имя и текущий год. Содержание этого сайта меняется только раз в год.
Однако каждый раз, когда вы загружаете сайт, сервер вычисляет текущий год. Кэширование позволяет сохранить HTML-копию сайта на определенное время. В нашем примере выше мы можем установить срок действия кэша на один раз в день. Это означает, что раз в день сайт будет загружаться нормально: он обнаружит запрос, заставит сервер обработать код и вернет результат в виде HTML. Он также сохранит полученный HTML в памяти. В следующий раз, когда кто-то загрузит сайт, кэш загрузит HTML из памяти, вместо того чтобы заставить сервер обработать его. Это может быть не так много для такого простого примера, но для среднего сайта это может сэкономить несколько секунд времени загрузки. То, что я только что описал, – это кэширование всей страницы, существует множество других типов – кэширование само по себе является профессией. К счастью, вы можете начать очень легко, если работаете с WordPress.
Hummingbird бесплатна в использовании и имеет эффективный кэш браузера для кэширования любого сайта. Она быстрее загружает страницы с помощью полностраничника, Gravatar и кэша браузера. Существует миллиард настроек для каждого плагина, я рекомендую прочитать о каждой настройке, чтобы добиться наилучшей производительности. Тем не менее, по моему опыту, если вы используете только основные настройки, вы достигнете не менее 80% от максимального прироста скорости, поэтому стоит начать, даже если вы относительный новичок. Вы также должны знать, что лучшего кэширования можно добиться на уровне сервера. Некоторые управляемые решения WordPress предлагают кэширование на уровне сервера, что всегда будет быстрее. Многие из этих хостеров не позволяют устанавливать плагины кэширования, просто потому, что это приведет к замедлению работы сайта.
8. Оптимизируйте свою базу данных. Со временем ваша база данных приобретет некоторый мертвый груз, это практически неизбежно. В этом уравнении есть две основные части: неиспользуемые данные и накладные расходы на уровне базы данных. Неиспользуемые данные могут появляться из разных мест. Если у вас есть собственные решения для удаления пользователей, возможно, используемые методы не удаляют связанные метаданные пользователя. В результате в базе данных могут остаться сотни строк, которые ни к кому не привязаны. Вы также могли использовать ряд пользовательских полей в базе данных, которые больше не нужны. Поскольку эти пользовательские поля могли быть добавлены к сотням сообщений, речь идет о сотнях, если не тысячах, строк. Очистить их не так уж сложно. Дженни Маккиннон написала отличную статью о том, как содержать базу данных в чистоте, а я подробно рассказываю об этом в разделе “Очистка и перенос базы данных” моей статьи “Как восстановить свой сайт” на этом блоге. Что касается накладных расходов на уровне базы данных, вы можете использовать встроенный в MySQL инструмент, который автоматически позаботится об этом за вас – это называется оптимизацией таблиц. Это очень похоже на дефрагментацию жестких дисков. Посмотрите раздел “Оптимизация таблиц” в статье Дженни, чтобы увидеть, как это делается.
9. Оптимизируйте свои изображения. Мы уже говорили об использовании меньшего количества изображений, теперь давайте обратим внимание на те, которые вам действительно приходится использовать. Сжатие изображений может уменьшить их размер на 30% – 80% без какой-либо заметной разницы. Одним из лучших инструментов для этого является, конечно же, наш собственный WP Smush, который используется более чем 1 миллионом установок WordPress. Вы даже можете изменять размер изображений автоматически. Я лично использую Imageoptim для OS X для массовой оптимизации изображений или вы можете использовать популярный RIOT для Windows.
10. Включить сжатие Gzip. Это может стать еще одним потенциально огромным выигрышем в скорости. Gzip-сжатие сжимает различные активы перед отправкой их в браузер для интерпретации. Это то, что должно быть настроено на вашем сервере. Посмотрите эту статью GTmetrix, чтобы получить краткое руководство о том, как это сделать. Причина, по которой это так важно, заключается в том, что в CSS и HTML используется много повторяющегося контента. Чем больше шаблонов в вашем контенте, тем лучше он может быть сжат. Очень простой пример: Если в коде вашего сайта 100 раз встречается надпись “Daniel is Awesome” (а почему бы и нет?!), вы можете заменить этот текст на “12d”, сэкономив тонну места. В этом суть любого сжатия, и чем больше (и длиннее) у вас шаблонов, тем большего сжатия вы можете достичь. Наш собственный Hummingbird может помочь с Gzip-сжатием – бесплатно. Обязательно ознакомьтесь с нашей статьей об оптимизации Hummingbird для получения дополнительной информации.
11. Отключить горячие ссылки. Это может не ускорить работу вашего сайта напрямую, но снимет нагрузку с вашего сервера, особенно если у вас популярный сайт. Горячая ссылка – это когда изображение загружается на другой сайт с вашего сервера. Другими словами, вместо того чтобы сохранить ваше изображение и загрузить его на свой собственный сервер, я просто ссылаюсь на него на вашем сервере, фактически воруя вашу пропускную способность. Это то же самое, что красть чужой Wifi. К счастью, это можно предотвратить с помощью магии . htaccess. Как это сделать, читайте в этой небольшой статье от JavascriptKit.
12. Выберите хорошего админа. Здесь есть над чем подумать. Конечно, как я уже говорил, мы предлагаем хостинг, который должен отлично подходить для ваших нужд (на самом деле, мы считаем, что предлагаем лучший хостинг на планете). Тем не менее, у вас есть варианты. Мой очень краткий и упрощенный совет таков: не используйте виртуальный хостинг, если только вам это не нужно, или у вас много сайтов, которые вы вообще не используете. Они стоят около $4/месяц, и это примерно то, что вы получаете. Ненадежный сервис, склонный к сбоям из-за чрезмерного использования ресурсов другими пользователями. Другой вариант – управляемый WordPress-хостинг (как у нас). Этот тип хостинга предлагает более ориентированный на WordPress подход.
На VPS вы можете запустить любое приложение, которое вам нравится, а управляемый WP-хостинг, очевидно, позволяет только WordPress. В результате, серверы построены специально с учетом особенностей WordPress, предлагают кэширование на уровне сервера и другие преимущества, которые заставят ваш WordPress сайт работать как по маслу. С другой стороны, могут существовать некоторые ограничения на то, что вы можете и не можете делать. Хостер может отключить некоторые плагины и темы по соображениям скорости или безопасности. В конце концов, все это служит хорошим целям, но некоторых это может отпугнуть. Если вы ищете хорошего хостера, у нас есть обзор хостинга WPMU DEV, где вы можете осмотреться и выбрать наиболее понравившийся после сравнения. Я рекомендую поговорить со службой поддержки и объяснить свои точные потребности, они помогут вам решить, что вам нужно, и вы также получите представление об уровне поддержки, на которую вы можете рассчитывать.
13. Мониторинг вашего сайта. Это не ускорит работу сайта, но предупредит вас, когда что-то пойдет не так, и вы сможете вовремя заметить тенденцию к снижению скорости. Реагирование на проблемы со скоростью до того, как они станут заметны, – отличный способ удержать довольных пользователей! Сервисы мониторинга домена, такие как Pingdom и другие, могут регулярно и автоматически тестировать ваш сайт. Если вы являетесь участником WPMU DEV, состояние вашего сайта измеряется на вкладке Performance в The Hub. Кроме того, вы можете настроить тесты производительности и отчеты о времени работы.
14. Темы В ряде тем WordPress предусмотрен раздел оптимизации темы (например, Avada).
Настройка этих параметров в вашей теме может иметь огромное значение для общей скорости сайта, особенно это касается тем, используемых с популярными плагинами для построения страниц, такими как Elementor, WPBakery, Divi и т.д., которые добавляют дополнительный код, который может замедлить скорость загрузки страниц.
15. Шрифты. Возможно, вы никогда не задумывались об этом, но хотите верьте, хотите нет, но шрифты могут утяжелять ваш сайт WordPress и вызывать увеличение времени загрузки. Когда речь идет о шрифтах Google, их также необходимо запрашивать и загружать. Это касается каждого шрифта на странице, что может привести к задержке загрузки сайта. В WP Rocket есть функция оптимизации шрифтов Google. Другой вариант – Swap Google Fonts Display, который также может помочь. Кроме того, рекомендуется использовать один шрифт для всего сайта.
Увеличение скорости, связанное с развитием
Разработчики любят говорить, что в снижении скорости работы сайта чаще всего виноват пользователь. Конечно, в этом есть доля правды, но я думаю, что многие разработчики пишут код, который сродни лжи по недосмотру. Технически код не является ошибочным, он не содержит ошибок, не пытается активно замедлить работу вашего сайта. Однако он не делает многого для увеличения скорости или обеспечения ее сохранения на некоторое время. За этим нет абсолютно никакого злого умысла, просто так сложилась большая часть нашего кода. Вот некоторые вещи, которые мы, разработчики, можем сделать, чтобы обеспечить бесперебойную работу наших продуктов и помочь сохранить снижение производительности как можно дольше.
1. Знайте свои инструменты. Это кажется такой простой задачей, но мало кто из разработчиков понимает, что это значит. Вы никак не сможете узнать все о такой важной вещи, как WordPress. Что вы можете сделать, так это уловить признаки того, что вам следует провести исследование. Другими словами: знайте свое ремесло и постоянно учитесь. Позвольте мне привести мой любимый пример. Вам когда-нибудь приходилось извлекать большое количество мета-полей для поста? Может быть, использовать get_post_meta() 20 раз в непосредственной близости друг от друга? Вы можете подумать, что это расточительно, кажется, что мы делаем 20 запросов к базе данных. Я видел, как люди используют класс WPDB для прямого захвата всех метаполей поста и используют функции массива для перестановки и получения нужных метаполей. Хотя я ценю намерения, стоящие за этим, это совершенно неуместно. При первом использовании функции get_post_meta() она фактически сама захватывает все метапосты и кэширует результат. Все последующие обращения к тому же посту будут использовать кэшированные данные, а не базу данных напрямую. Прежде чем принимать решения, подобные приведенному выше, обязательно обратитесь к WordPress Codex и прочитайте соответствующие материалы.
2. Уменьшение запросов. И вот я снова с просьбами… Как разработчик, это на вашей совести. Если ваша тема или плагин использует тонны Javascript и CSS, пожалуйста, объединяйте их! Мне лично нравится распределять мои скрипты и стили по многим и многим файлам, потому что это лучше для разработки. Здесь Hummingbird снова может помочь с обработкой запросов. Еще один мощный инструмент в вашем распоряжении – спрайты. Спрайты – это скомпонованные изображения. Вместо того чтобы загружать все ваши социальные иконки по отдельности, вы можете объединить их в одно изображение и использовать это изображение в качестве фона, расположив его так, чтобы была видна только нужная вам область. Twitter использует спрайты, как и многие, многие другие крупные сайты, благодаря их удобным для запросов свойствам. Когда мне нужен спрайт, я обычно использую отличный онлайн-инструмент Stitches. Этот инструмент позволяет загружать изображения и оптимально их располагает, автоматически генерируя необходимые стили.
3. Минифицировать файлы. Конкатенация и минификация обычно идут рука об руку. После того, как вы создали конечные файлы, самое время сделать их как можно меньше. В конце концов, браузеру не нужны все ваши красивые комментарии, пробелы, переносы строк, отступы – его вполне устроит масса нечитаемого кода. Я также использую Hummingbird для этого, но есть и другие инструменты сборки, такие как Grunt, и веб-инструменты для специфических задач, таких как линтинг, оптимизация изображений, модификация и так далее.
4. Загрузка сценариев в нижнем колонтитуле. Hummingbird может позаботиться об этом для вас в области оптимизации активов.
При активации этой функции увеличивается видимая скорость сайта. Она не уменьшает количество запросов или размер файлов, но обеспечивает загрузку основного содержимого в первую очередь. Кроме того, если скрипт застревает, он не препятствует загрузке содержимого.
5. Определите приоритеты содержания. Другой контент также может быть приоритетным, как и размещение скриптов в футере. Если ваша боковая панель содержит сопутствующую информацию и несущественное содержимое (как, вероятно, и должно быть), вы можете сделать так, чтобы она загружалась позже, чем основное содержимое. Конечно, это не всегда возможно, но если вы постараетесь загружать важный контент как можно быстрее, в итоге вы получите сайт, который будет казаться быстрее и, возможно, будет занимать более высокие позиции с точки зрения SEO.
6. Используйте правильные размеры изображений. При выводе изображений в WordPress вы можете указать размер изображения, который будет использоваться. Чаще всего вы знаете, какого размера будут эти изображения: тематические изображения, иконки небольших постов, аватары и так далее. С помощью функции add_image_size() вы можете указать эти размеры изображения. Это означает, что при загрузке изображения WordPress будет создавать копию загруженного изображения с указанным размером. Идея заключается в том, что если нам нужно изображение 600×320, мы должны взять изображение именно такого размера по двум причинам:
- Если мы берем изображение большего размера, мы тратим полосу пропускания и снижаем скорость.
- Изменение размера изображения – неважно, уменьшаем мы его или увеличиваем – требует вычислительной мощности на клиенте и снижает качество изображения.
Конечно, наш собственный Smush тоже может помочь, когда речь идет о правильных размерах изображений. Обязательно узнайте больше здесь.
7. Сокращение и оптимизация запросов. Запросы к базе данных могут привести к значительному падению скорости, в основном из-за использования памяти. Я работал над проектом, где сервер падал столько раз из-за неправильных запросов, что хостер временно отключил сайт. Здесь можно использовать две тактики. Уменьшение и оптимизация запросов. Но, как я уже говорил выше, оптимизация может означать увеличение числа запросов для замены особенно ресурсоемкого. Прежде всего, избегайте необработанных запросов к базе данных в WordPress. В вашем распоряжении легионы функций для получения всего, от постов до комментариев, пользовательских таксономий и метаданных. Если вам необходимо написать запрос самостоятельно, обязательно используйте класс WPDB для максимальной безопасности и эффективности. Старайтесь избегать объединения таблиц или других сложных вещей, во многих случаях лучше использовать два отдельных, но гораздо более быстрых запроса. Существует масса инструментов, позволяющих выяснить, хорошо ли написаны ваши запросы, и увидеть все запросы, выполняемые во время запроса. Вы можете использовать плагин Query Monitor или использовать define('SAVEQUERIES', true) в вашем конфигурационном файле и вывести все запросы через $wpdb->queries.
У вас также есть возможность регистрировать медленные запросы к MySQL. Эта функция включена у многих хостеров, вы можете включить ее сами или попросить вашего хостера сделать это за вас. Вы можете найти больше информации по этой теме на сайте MySQL.
8. Использование крючков активации, деактивации и деинсталляции. Многие вещи, которых добивается плагин, на самом деле не нужно делать при каждом запросе. Создание дополнительных ролей, регенерация правил переписывания, добавление пользовательских таблиц базы данных и так далее – вот лишь некоторые из них. Их следует обернуть в функцию активации, которая будет выполняться только при активации плагина. Это сократит время обработки и ускорит работу. С другой стороны, вы должны убедиться, что некоторые из них удаляются при деактивации, а некоторые компоненты полностью удаляются с помощью хуков деактивации и деинсталляции. Это поможет базе данных WordPress оставаться нетронутой, оттягивая момент, когда она начнет замедляться из-за накладных расходов. Когда это неизбежно произойдет, простой оптимизации будет достаточно, чтобы вернуть все на круги своя.
9. Обучайте своих клиентов. Да, это правда, что клиенты и обычные пользователи во многих случаях делают свои собственные сайты медленными, но это во многом зависит от того, насколько хорошо они обучены. Создание документации для конечных пользователей поможет сайту оставаться быстрым, повышая удовлетворенность клиентов и даже снижая вашу рабочую нагрузку в долгосрочной перспективе. Сосредоточьтесь конкретно на тех аспектах, которые могут вызвать проблемы, например, правильное использование плагинов, отказ от установки сразу 24 инструментов аналитики и т.д.
Заключение: скорость – это еще не все
Я хотел бы подчеркнуть, что, хотя скорость чрезвычайно важна, это еще не все. Если дойти до крайности, можно полностью отключить изображения и почти не использовать стили и JavaScript. Это может снизить время загрузки страницы до 345 мс, но будет ли это действительно служить какой-либо цели, кроме бессмысленной гонки за скоростью? Всегда помните о том, какова цель вашего сайта. Если он должен приносить вам деньги, вы должны поставить все на службу этой цели. Цель обычно достигается путем разумного балансирования множества инструментов, и скорость сайта – лишь один из таких инструментов. Вам необходимо сделать сайт визуально привлекательным, сделать его удобным для пользователя и предоставить необходимую информацию для ваших пользователей.
Это обычно означает компромисс в других областях. Вы также должны взвесить финансовые и временные затраты на повышение скорости вашего сайта. Заплатить кому-то 2 000 долларов или потратить месяц на то, чтобы снизить среднее время загрузки с 3,4 секунд до 1,8 секунд, может быть, и стоит, но чем ниже вы опускаетесь, тем сложнее становится. Тратить еще 2 000 долларов или месяц на то, чтобы увеличить время загрузки с 1,8 до 1,2, возможно, не лучший выбор, вы могли бы потратить эти деньги или время на получение дополнительных предложений по продажам, на маркетинг или просто на отдых вашей команды. Я надеюсь, что это руководство поможет вам сделать ваш сайт немного быстрее – если вы сделаете только одну или две вещи из перечисленных, это уже здорово. Каждый маленький кусочек имеет значение.
