В связи с 10-летием WPBeginner я поделился тем, что хостинговая инфраструктура WPBeginner получила значительное обновление благодаря нашему партнеру по веб-хостингу HostGator.
Вскоре после этого я начал получать письма от читателей с просьбой поделиться подробностями о том, как мы заставили WPBeginner загружаться невероятно быстро.
Да, WPBeginner загружается быстрее, чем большинство разработчиков статических сайтов, а в некоторых случаях быстрее, чем сайты Google AMP.
В этой статье я дам вам закулисный взгляд на то, как мы сделали WordPress быстрее, чем статические сборщики сайтов и безголовые платформы CMS.
Примечание: Эта статья более техническая, чем то, что мы обычно публикуем на WPBeginner. Для нетехнических пользователей я рекомендую следовать нашему исчерпывающему руководству о том, как ускорить работу WordPress.
обновление: Мы больше не используем общие настройки в этой статье. Вместо этого мы полностью переключились на платформу Google Cloud, управляемую SiteGround. Мы получили те же результаты по скорости и разблокировали еще более высокую производительность бэкенда. Прочитайте, почему мы перешли на SiteGround.
фон
В последнее время WordPress получил много плохих репутаций от «современных» разработчиков, которые говорят, что WordPress работает медленно.
Как правило, после этого утверждения вы должны переключиться на статический генератор сайтов JAMstack, такой как GatsbyJS. Другие в деловом мире скажут, что вам следует перейти на безголовую CMS, такую как Contentful.
Несколько моих очень успешных друзей-предпринимателей начали спрашивать меня, правда ли это.
Некоторые даже начали процесс перехода на безголовую CMS, потому что они читали примеры из практики того, как другие открыли огромные улучшения скорости, переключаясь с WordPress на генераторы статических сайтов.
Это очень расстраивало меня, потому что я знал, что десятки тысяч долларов были потрачены впустую на миграционные расходы. Не говоря уже о бесконечных затратах на настройку, которые будут накапливаться в будущем.
Поэтому я решил доказать, что отличный контентный сайт WordPress, такой как WPBeginner, может загружаться так же быстро, если не быстрее, чем большинство современных разработчиков статических сайтов.
Вы можете называть меня старой школой, но в конце концов статический сайт – это просто страница, которая загружается из кеша.
результаты
Прежде чем перейти к точной инфраструктуре хостинга WordPress, настройкам сервера и плагинам, я думаю, что полезно поделиться результатами.
Вот как быстро домашняя страница WPBeginner загружается в Pingdom с вашего сервера в Вашингтоне:
В зависимости от времени суток и местоположения, с которого вы проверяете, этот результат будет варьироваться от 400 до 700 мс, что довольно быстро для домашней страницы.
Вот тест, который я провел для одной страницы поста, так как она содержит большие изображения и больше контента:
Мы также получили абсолютную оценку «100» в тесте скорости страницы Google Desktop. Хотя у нас есть возможности для улучшения показателей в мобильных приложениях.
Вышеуказанные результаты относятся к кэшированным страницам, что получают наши читатели и роботы поисковых систем, когда они посещают наш веб-сайт. Время загрузки WPBeginner воспринимается практически мгновенно (об этом позже).
Для сравнения приведу результаты теста скорости на домашней странице Gatsby. Это популярный генератор статических сайтов, который взволнован многими разработчиками:
Вот результат теста скорости домашней страницы Netlify, популярного статического хоста сайта, который рекомендуется многими разработчиками. Обратите внимание, что они имеют половину количества запросов и что их размер страницы составляет 30% WPBeginner, но он все равно загружается медленнее, чем наша домашняя страница.
Скорость домашней страницы Contentful, безголовой CMS, которая «как компании предоставляют лучшие цифровые технологии», просто не оптимизируется вообще. Это был самый медленный сайт, который мы тестировали.
Я делюсь этой статистикой не для того, чтобы дискредитировать другие структуры, но чтобы дать представление о том, что не все новые вещи настолько блестящие, как могут показаться.
WordPress с подходящей хостинг-инфраструктурой и оптимизацией может быть столь же быстрым, как любой статический генератор сайтов. Кроме того, ни одна другая платформа не приблизится к уровню гибкости, которую WordPress предлагает владельцам бизнеса благодаря своей большой плагинной и тематической экосистеме.
Хостинговая инфраструктура WPBeginner
Когда дело доходит до скорости сайта, ничто не играет большей роли, чем ваша инфраструктура веб-хостинга.
Как многие из вас уже знают, я являюсь клиентом HostGator с 2007 года. Я начал вести блог WPBeginner в 2009 году с небольшой учетной записи общего хоста HostGator.
По мере роста нашего сайта мы перешли на ваш VPS-хостинг, а затем на выделенные серверы.
За последнее десятилетие у меня была возможность тесно сотрудничать со многими членами их команды, и они стали расширенной частью семейства WPBeginner.
Поэтому, когда я решил сделать WPBeginner быстрее, чем статические сборщики сайтов, я обратился к ним за помощью.
Я поделился своим видением с их руководящей командой, и они предложили мне помочь создать уникальную корпоративную систему хостинга для WPBeginner.
Они заставили лучших инженеров из команды Bluehost и HostGator тесно сотрудничать со мной, чтобы сделать WPBeginner невероятно быстрым.
Вот краткий обзор конфигурации хостинга WPBeginner:
Как видите, это конфигурация с несколькими серверами, распределенная в двух географических регионах (Техас и Юта). Всего существует 9 серверов, не включая облако балансировки нагрузки. Каждый сервер представляет собой 8-ядерный (16-проводной) процессор Xeon-D с 32 ГБ ОЗУ и 2 х 1 ТБ SSD (конфигурация RAID).
Мы используем облачную платформу балансировки нагрузки Google, поэтому мы можем осуществлять автоматическое масштабирование и балансировку нагрузки по всему миру.
После того, как оборудование было настроено с правильной синхронизацией данных, команда Bluehost и HostGator работали вместе, чтобы оптимизировать настройки сервера для WordPress. Я надеюсь, что некоторые из этих оптимизаций скоро появятся в будущих планах хостинга WordPress. 
Сводка конфигурации сервера
Суммирование конфигураций серверов этой сложной конфигурации всего за несколько параграфов очень сложно, но я сделаю все возможное.
Мы используем Apache для нашего программного обеспечения веб-сервера, потому что команда более знакома с ним. Я не буду вступать в дебаты NGINX против Apache.
Мы используем PHP 7.2 вместе с группами PHP-FPM, поэтому мы можем обрабатывать большие процессы и запрашивать нагрузки. Если ваша хостинговая компания не использует PHP 7+, вам не хватает серьезной оптимизации скорости.
Мы используем кеширование кода операции с расширенным подогревателем кеша, чтобы гарантировать, что ни один реальный пользователь не получит посещения страницы без кеша.
Мы также используем объектный кеш с memcache, поэтому мы можем улучшить время отклика для некэшированных обращений к страницам и другое время отклика API в административной области WordPress для зарегистрированных пользователей (наших авторов). Вот вкладка загрузки по сети для нашего экрана «Все сообщения» в менеджере WordPress:
Для сравнения, наш опыт в области администрирования теперь в 2 раза быстрее, чем у нас ранее.
Для нашего сервера базы данных мы переключились с MySQL на MariaDB, который является клоном MySQL, но быстрее и лучше. Мы также переключились с HyperDB на LudicrousDB, потому что это помогает нам улучшить репликацию базы данных, отработку отказа и балансировку нагрузки.
Есть также много других настроек, которые помогают нам с производительностью и масштабируемостью, таких как HTTP / 2 и HSTS для более быстрого соединения + шифрование, возможность активации дополнительных серверов в новых регионах в случае сбоя центра обработки данных и т. Д.
Я чувствую, что не делаю невероятных настроек, которые команда сделала справедливо, но знаю, что моя главная сила – маркетинг. Да, я блоггер, который пишет о WordPress, но многие технические оптимизации здесь намного выше моего уровня зарплаты.
Они были сделаны супер умными инженерами из команды Endurance, включая Дэвида Коллинза (Lead Endurance / CTO Architect для HostGator), Майка Хансена (Lead WordPress Developer) и других, за которых я буду благодарен в разделе кредитов ниже.
CDN, WAF и DNS
Помимо веб-хостинга, другими областями, которые играют большую роль в скорости вашего сайта, являются ваш DNS-провайдер, ваша сеть доставки контента (также известная как CDN) и брандмауэр веб-приложений (WAF).
Несмотря на то, что я назвал его тремя отдельными вещами, многие компании теперь предлагают эти решения в интегрированном плане, такие как Sucuri, Cloudflare, MaxCDN (StackPath) и т. Д.
Поскольку я хочу иметь максимальный контроль и распределять риски, я использую три отдельные компании для эффективной обработки каждой части.
WPBeginner DNS работает с DNS Made Easy (той же компанией, что и Constellix). Они неизменно считаются самыми быстрыми DNS-провайдерами в мире. Преимущество DNS Made Easy заключается в том, что я могу направлять глобальный трафик, когда определенный центр обработки данных на моем CDN или WAF не работает должным образом, чтобы обеспечить максимальное время безотказной работы.
Наша CDN работает с MaxCDN (StackPath). По сути, они позволяют нам обслуживать наши статические ресурсы (изображения, файлы CSS и скрипты Java) из его большой сети серверов по всему миру.
Мы используем Sucuri в качестве брандмауэра для веб-приложений. В дополнение к блокированию атак, они также выступают в качестве еще одного слоя CDN, и их общая производительность просто потрясающая. Я думаю, что у них есть лучшее на рынке решение для брандмауэра WordPress.
При работе над оптимизацией скорости сайта важно уменьшать каждую миллисекунду. Вот почему использование этих поставщиков решений в сочетании с нашей новой инфраструктурой веб-хостинга имеет большое значение.
Для иллюстрации приведем каскадную разбивку WPBeginner.com против GatsbyJS.org против CloudFlare.com:
Обратите внимание, что время DNS WPBeginner, время SSL, время соединения и время ожидания являются первосортными по сравнению с этими другими популярными сайтами. Каждое из этих улучшений объединено для достижения наилучших результатов.
Instant.page, оптимизированные изображения и другие лучшие практики
Одна из вещей, которые вы, возможно, заметили, это почти мгновенное время загрузки при просмотре постов и страниц WPBeginner.
В дополнение ко всем вещам, которые я упомянул ранее, мы также обманываем задержку, используя скрипт Instant.page, который использует предварительную загрузку как раз вовремя.
Обычно, прежде чем пользователь нажимает на ссылку, он должен навести указатель мыши на эту ссылку. Когда пользователь остается в течение 65 мс (очень короткий период времени), каждый второй фактически нажимает на ссылку.
Сценарий Instant.page начинает предварительно загружать эту страницу прямо сейчас, поэтому, когда пользователь фактически нажимает на ссылку, большая часть тяжелой работы уже выполнена. Это заставляет человеческий мозг воспринимать время загрузки сайта практически мгновенно.
Чтобы включить Instant.page на своем сайте, вы можете просто установить и активировать плагин WordPress Instant Page.
Этот скрипт довольно хорош. Я рекомендую посетить ваш сайт и нажать кнопку «проверить свою скорость клика», чтобы увидеть, как это обманывает мозг.
обновление: На данный момент я отключил instant.page и в ближайшее время буду тестировать плагин FlyingPages. Gijo Varghese поделился со мной своим новым дополнением в группе Facebook WPBeginner Engage, и, кажется, сочетает в себе лучшее из Instant.page и скрипта быстрой ссылки.
Оптимизация изображений для Интернета
Хотя новые форматы изображений, такие как webp, разрабатываются, мы еще не используем их. Вместо этого мы просим всех наших авторов оптимизировать каждое изображение с помощью инструмента TinyPNG.
Вы также можете автоматизировать сжатие изображений с помощью плагинов, таких как Optimole или EWWW Image Optimizer.
Однако я лично предпочитаю, чтобы команда делала это вручную, поэтому мы не загружаем большие файлы на сервер.
В настоящее время мы не выполняем отложенную загрузку изображений, но я планирую добавить ее в ближайшем будущем, когда в Google есть поддержка отложенной загрузки, встроенная в Chrome 76.
В ядре WordPress также есть билет для добавления этой функции на все сайты (надеюсь, что это произойдет в ближайшее время), поэтому мне не нужно писать собственный плагин.
обновление: Спустя несколько часов после того, как я опубликовал сообщение в блоге, Google выпустил плагин Native Lazy Load для WordPress.
Ограничение HTTP-запроса + лучшие практики
В зависимости от используемых плагинов WordPress, некоторые будут добавлять дополнительные файлы CSS и JavaScript при каждой загрузке страницы. Эти дополнительные HTTP-запросы могут выйти из-под контроля, если у вас есть много плагинов на вашем сайте.
Чтобы узнать больше, посмотрите, как плагины WordPress могут влиять на время загрузки вашего сайта.
Теперь, прежде чем я ошибочно заключу, что слишком много плагинов WordPress являются плохими, я хочу сообщить вам, что на веб-сайте WPBeginner работает 62 активных плагина.
Что нужно сделать, так это объединить файлы CSS и JavaScript, когда это возможно, чтобы уменьшить HTTP-запросы. Некоторые плагины WordPress, такие как WP Rocket, могут делать это автоматически с помощью функции минимизации.
Вы также можете следовать инструкциям в этой статье, чтобы сделать это вручную, что и сделала наша команда в WPBeginner.
В дополнение к HTTP-запросам, которые добавляют плагины и темы, вы также должны знать о других сторонних скриптах, которые вы добавляете на свой сайт, потому что каждый скрипт будет влиять на скорость вашего сайта.
Например, если вы запускаете много рекламных или перенаправляющих сценариев, они замедляют работу вашего сайта. Возможно, вы захотите использовать такой инструмент, как Google Tag Manager, для условной загрузки сценариев только при необходимости.
Если у вас есть веб-сайт с поддержкой рекламы, такой как TechCrunch или TheNextWeb, то с этим мало что можно поделать, так как удаление рекламы не вариант.
К счастью, WPBeginner не полагается на сторонние рекламные скрипты, чтобы заработать деньги. Хотите посмотреть, как WPBeginner зарабатывает деньги? Смотрите мой блог о доходах WPBeginner.
Извлеченные уроки (пока) + Мои последние мысли
Это совершенно новая хостинговая инфраструктура, и я уверен, что есть куча уроков, которые я выучу со временем.
До сих пор я люблю улучшения в скорости, потому что это помогло нам улучшить наш SEO-рейтинг, а наша админка намного быстрее.
С новой установкой с несколькими серверами мы представляем новый рабочий процесс развертывания, чтобы WPBeginner был наравне со всеми другими сайтами продуктов Awesome Motive.
Это означает, что теперь у нас есть правильная версия, которая контролирует встроенный элемент управления, и существуют меры, позволяющие предотвратить его безрассудство (то есть добавление плагинов без надлежащего тестирования, обновление плагинов с панели мониторинга без тестирования и т. Д.).
Эти изменения также определяют путь выхода из разработки и передачи управления сайтом WPBeginner нашей команде разработчиков.
Я терпел это годами, но думаю, что время придет, и мне просто нужно принять это.
В новой конфигурации нет cPanel или WHM, так что в любом случае это делает меня практически бесполезным, так как я больше не очень хорошо разбираюсь в командной строке.
До сих пор мы выучили два замечательных урока:
Во-первых, обновление WordPress не так просто из-за синхронизации / репликации сервера. Когда мы обновили мой личный блог (SyedBalkhi.com) до WordPress 5.2, файлы обновления не синхронизировались должным образом на одном из веб-узлов, и отладка заняла гораздо больше времени, чем ожидалось. Мы работаем над созданием лучшего процесса сборки / тестирования для этого.
Во-вторых, нам нужно улучшить взаимодействие между командами, потому что у нас был небольшой кризис с неправильными настройками балансировщика нагрузки, что привело к простою. Что еще хуже, я был на трансатлантическом рейсе Turkish Airlines, и WiFi не работал.
К счастью, все было решено благодаря быстрому времени ответа команды хостинга, но это помогло нам создать несколько новых Стандартных операционных процедур (SOP), чтобы лучше справляться с инцидентом в будущем.
В целом, я очень доволен настройкой и знаю, что некоторые настройки / оптимизации кэширования, которые были сделаны для WPBeginner, станут стандартной частью планов хостинга HostGator Cloud и Bluehost WordPress.
Я думаю, что само собой разумеется, что если вы только начинаете веб-сайт, блог или интернет-магазин, вам НЕ нужны эти сложные бизнес-настройки.
Я всегда рекомендую начинать с небольших общих планов HostGator или Bluehost, а затем обновлять инфраструктуру хостинга по мере роста вашего бизнеса.
Вы можете применить многие из оптимизаций, которыми я ранее поделился, в ваших текущих планах хостинга WordPress.
Например, стандартный план Bluehost уже поставляется со встроенным плагином кэширования, который вы можете использовать, и они также предлагают PHP 7 по умолчанию.
Вы можете комбинировать это с CDN + WAF, как Sucuri, чтобы значительно ускорить ваш сайт.
Теперь, если вы являетесь компанией среднего бизнеса / бизнеса и хотите подобную настройку хостинга, свяжитесь со мной через нашу контактную форму. Я могу помочь направить вас в правильном направлении.
Отдельное спасибо + Кредиты
Хотя в предыдущей статье я выразил огромную благодарность брендам HostGator и Bluehost, я хочу воспользоваться моментом, чтобы поблагодарить и оценить отдельных людей, которые работали за кулисами, чтобы это произошло.
Во-первых, я хочу поблагодарить руководство Endurance Suhaib, Mitch, John Orlando, Mike Lillie и Brady Nord за то, что они согласились помочь мне в решении этой проблемы.
Я также хочу поблагодарить Майка Хансена, Дэвида Коллинза, Рика Рэдингера, Криса Майлза, Дэвида Райана, Джесси Кука, Дэвида Фостера, Мику Вуда, Уильяма Эрнхардта, Робина Мендиету, Рода Джонсона, Альфреда Наджема и других членов команды центра обработки данных. делать тяжелую работу и сделать это.
Я хочу поблагодарить Стивена Джоба (основателя DNSMadeEasy) за то, что он быстро ответил на мои вопросы и помог мне лучше понять некоторые настройки. Я также хочу поздороваться с Тони Пересом и Дэниелом Сидом в Sucuri за то, что они всегда спиной.
И последнее, но не менее важное: я хочу выразить особую признательность Крису Кристоффу. Он является соучредителем MonsterInsights, и он был достаточно любезен, чтобы помочь мне во многих тестах и реализации.
Я действительно надеюсь, что вы нашли это закулисным примером использования инфраструктуры хостинга WPBeginner. Возможно, вы также захотите ознакомиться с нашим исчерпывающим руководством по ускорению работы WordPress, которое гораздо удобнее для начинающих.
Prima: Вот лучшие плагины и инструменты WordPress, которые я рекомендую для всех сайтов WordPress.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube, чтобы посмотреть обучающие видеоролики WordPress. Вы также можете найти нас на Twitter и Facebook,
