Все 36 способов ускорить ваш сайт WordPress

Этот пост был первоначально опубликован 3 декабря 2019 года и был обновлен, чтобы включить более современные инструменты.

Большинство сообщений в блогах об ускорении работы WordPress — сплошной беспорядок.

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

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

Это просто безумие. Вот как устроено это руководство по производительности…

Начните с высокоэффективных шагов .

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

На самом деле, если вы не будете использовать никакую тактику помимо первых 9, все будет в порядке.

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

И есть еще одна вещь, которую вы должны знать.

Это точная тактика, которую я использую

Я не буду перечислять какие-либо тактики, которые не использую сейчас.

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

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

Вот результаты GTMetrix:

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

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

Google попытался количественно оценить эту идею с помощью Core Web Vitals. Эти показатели производительности вращаются вокруг воспринимаемой скорости вашего сайта.

Правда в том, что на самом деле не имеет значения, загружается ли ваш сайт за 5 секунд, если все видно и интерактивно за 1 секунду.

Но есть проблема.

Основные веб-жизненные показатели сложны!

Их намного сложнее понять, чем старые метрики, и еще сложнее их оптимизировать.

И вот в чем дело.

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

Итак, вот мое предложение…

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

Создайте до и после

Если вы хотите следовать этому руководству, начните с измерения производительности вашего сайта с помощью GTMetrix и инструмента Google Page Speed.

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

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

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

1. Переключитесь на более быстрый хост

Хостинг — это мощность вашего сайта.

С более мощным хостингом весь ваш сайт будет загружаться быстрее.

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

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

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

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

Как премиальный хостинг WP, в панели управления есть много вкусностей помимо стандартного хостинга.

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

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

Узнайте больше о Rocket.net

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

2. Добавьте кеширование

Чему равно 9027 разделить на 17?

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

Теперь, если я спрошу вас еще раз, сколько будет 9027, разделенное на 17?

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

Вот что такое кэширование.

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

Как вы понимаете, это крайне расточительно.

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

Есть смысл?

Теперь давайте поговорим о том, как использовать эту технологию на своем веб-сайте.

Как добавить кеширование на свой сайт

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

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

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

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

Вы можете следовать моему руководству по настройке WP Rocket, чтобы начать:

Проверить WP Rocket →

Если вам нужна бесплатная альтернатива, я рекомендую WP Super Cache, если вам нужно что-то простое в использовании, и W3 Total Cache, если вам нужны более продвинутые возможности.

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

Осталась только одна вещь, которая может полностью сорвать ваше выступление.

Вы ДОЛЖНЫ использовать следующие три шага

Как только вы настроите кэширование, обратите внимание на изображения вашего сайта.

Если вы не оптимизируете свои изображения, ваш сайт никогда не достигнет времени загрузки 2-3 с, вы никогда не получите оптимизированную оценку PageSpeed.

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

Первый способ оптимизировать ваши изображения — это сжать их.

3. Сжимайте изображения

Современные алгоритмы сжатия изображений удивительны.

Они могут уменьшить размер файла изображения на 70% без заметного влияния на его качество. Дело в том, что вы можете ускорить загрузку всех изображений на вашем сайте без ухудшения их качества. Нет недостатка – серьезно!

Когда дело доходит до оптимизации изображений, мой любимый плагин — Optimole.

Вы узнаете больше об Optimole в следующих двух шагах, но вот что вам нужно знать в первую очередь:

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

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

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

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

Я с удовольствием использовал ShortPixel на этом сайте в течение многих лет и переключился на Optimole только для этой следующей тактики.

4. Измените размер изображений

Обратите особое внимание, потому что детали имеют решающее значение.

Вот большая идея:

Чем больше размеры изображения, тем больше будет размер его файла.

Например, изображение шириной 3000 пикселей может иметь размер 900 КБ, но при изменении размера до 600 пикселей оно составляет всего 60 КБ. Это 15-кратное уменьшение размера файла!

Вот почему это так важно.

Изображения в этом сообщении блога будут иметь максимальную ширину 600 пикселей. В моем примере это изображение было изменено до 600 пикселей в ширину и весит всего 60 КБ.

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

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

Вот в чем проблема.

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

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

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

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

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

Попробуйте Optimole на своем сайте →

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

5. Ленивая загрузка ваших изображений

Этот пост в блоге очень длинный и содержит много изображений.

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

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

Я сделал визуализацию в этом видео, которая иллюстрирует, как это работает, более четко, чем я могу объяснить в письменной форме:

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

Как добавить ленивую загрузку

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

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

Во-вторых, если вы не используете Optimole, но решили использовать WP Rocket, просто установите этот флажок здесь, в настройках:

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

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

Следующие две оптимизации идут рука об руку и особенно важны для веб-сайтов WordPress.

6. Минимизируйте ваши файлы

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

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

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

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

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

Точно так же, как вы сжимали изображения, вы можете минимизировать файлы CSS и Javascript (и HTML), чтобы сделать их меньше и уменьшить вес страницы.

Как минимизировать файлы

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

В WP Rocket есть флажки для включения минимизации CSS, JS и HTML.

Это все, что вам нужно сделать.

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

Если вам нужна бесплатная альтернатива минификации, воспользуйтесь плагином Autoptimize.

7. Объедините ваши файлы

Concatenate — еще один технический термин, который означает «объединять».

Когда вы объединяете файлы, вы объединяете их.

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

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

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

Каждый загружаемый файл требует HTTP-запроса. Каждое изображение, JS-файл, CSS-файл и т. д. — все они требуют одного HTTP-запроса.

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

Например, если на вашем веб-сайте есть 5 файлов CSS размером 5 КБ, он будет загружаться быстрее, если вы объедините их в один файл CSS размером 25 КБ.

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

Как добавить конкатенацию

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

Есть флажки для объединения файлов CSS и файлов JS.

Вам просто нужно установить оба флажка, сохранить изменения, и все готово.

Эти параметры также доступны в плагине Autoptimize.

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

8. Загружайте файлы с помощью CDN

Интернет — это магия.

Верно?

Но на самом деле нет, это не так.

Это сеть компьютеров, и все соединения в этой сети в конечном счете физические.

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

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

Я сказал, что странно думать об этом.

А что, если вы храните копию своего сайта на сервере в Токио? Не будет ли он загружаться быстрее для посетителей из Японии?

Да!

И это именно то, что делает CDN.

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

Таким образом, независимо от того, где кто-то находится во время посещения, рядом с ним находится сервер для доставки контента вашего сайта.

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

Как добавить CDN на свой сайт

Если вы используете Rocket.net, то все уже готово.

Они управляют вашим сайтом с Cloudflare Enterprise, поэтому ваш сайт уже доставляется с ближайших серверов по всему миру.

Если вы не используете Rocket.net, я бы рекомендовал вместо этого подписаться на бесплатный уровень Cloudflare.

Но если вы действительно не занимаетесь техническими вопросами и не хотите вносить изменения в DNS на своем сайте, вы можете вместо этого использовать RocketCDN, созданный командой WP Rocket.

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

9. Выберите быструю тему

Хорошо, я должен признать, что этот последний совет немного отличается.

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

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

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

• Один CSS-файл
• Один мини-файл Javascript
• Один запрос Google Fonts
• Иконочный шрифт Font Awesome (для иконок социальных сетей)

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

Не все темы оптимизированы, но, на мой взгляд, это не так уж и важно. Это связано с тем, что даже если ваша тема плохо оптимизирована и загружает два файла CSS и три файла Javascript, и ни один из них не минимизирован, такой плагин, как WP Rocket, все равно объединит и минимизирует их для вас, поэтому конечный результат аналогичен.

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

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

Дополнительные оптимизации

Фу!

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

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

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

10. Прекратите использовать Google Analytics

До сих пор я упоминал Google Analytics несколько раз, потому что это неизбежная потеря производительности.

По крайней мере, так было до недавнего времени.

Теперь для пользователей WordPress есть гораздо лучшие варианты, такие как Independent Analytics.

В отличие от Google Analytics, Independent Analytics не загружает никаких внешних файлов. На самом деле, он вообще не загружает файлы. Он делает один внутренний запрос REST API к вашему собственному сайту, и все.

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

Узнайте больше о независимой аналитике.

11. Отложите Javascript

Если вы используете только одну тактику из остального списка, используйте эту.

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

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

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

Концепция довольно продвинутая, но, повторюсь, ее не так уж сложно реализовать.

Как отложить Javascript

Вам это понравится.

Какой бы продвинутой ни была тактика, все, что вам нужно сделать, это установить флажок в настройках WP Rocket.

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

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

12. Оптимизируйте доставку CSS

Как и Javascript, CSS блокирует рендеринг, поэтому мы можем отложить его для повышения производительности.

Теперь я знаю, о чем вы думаете: разве мы только что отложили JS, чтобы мог загрузиться CSS, а теперь мы откладываем и CSS??

Вот что происходит…

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

Это очень продвинутая тактика, и я бы даже не беспокоился о ней, если бы WP Rocket не сделал ее чертовски простой.

Как оптимизировать доставку CSS

Вы, наверное, уже привыкли к этому…

Все, что вам нужно сделать, чтобы оптимизировать доставку CSS с помощью WP Rocket, — это установить этот флажок:

Затем WP Rocket генерирует критический CSS, необходимый для каждой страницы, и встраивает его в HTML. Остальная часть CSS затем откладывается.

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

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

13. Отключите поддержку смайликов в WordPress.

WordPress добавил поддержку эмодзи еще в версии 4.2.

Чтобы эмодзи работали на вашем сайте, WordPress загружает небольшой файл Javascript на каждую страницу вашего сайта. Вот в чем дело…

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

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

Вы можете установить этот флажок в WP Rocket, чтобы убрать поддержку эмодзи:

Плагин Disable Emojis — это простая бесплатная альтернатива.

14. Отключите встраивание WordPress

Когда вы вставляете ссылку из Твиттера в сообщение, WordPress автоматически создает красивое поле для встраивания.

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

Поскольку WordPress загружает дополнительный файл Javascript для этой функции встраивания, его удаление уменьшает вес вашей страницы и избавляет от еще одного HTTP-запроса.

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

Это небольшая оптимизация, но каждый бит помогает.

15. Обновите версию PHP

Современные языки кодирования удивительно быстры.

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

Эта тактика отличается тем, что на самом деле она ускоряет работу кода на вашем сайте.

Новые версии PHP становятся быстрее, поэтому, если вы все еще используете PHP 5, вы увидите огромные преимущества, перейдя на 7 или 8.

Вот посмотрите, как PHP 8 улучшил производительность по сравнению с PHP 7, и прирост от 5 до 7 также был огромным.

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

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

Как обновить версию PHP

Вот чему я научился за эти годы.

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

У большинства хостов этот элемент управления находится где-то на панели инструментов, поэтому его несложно обновить.

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

16. Сократите использование плагинов

Плагины замедляют работу вашего сайта?

Вроде, как бы, что-то вроде. Все сложно. Я приведу вам несколько примеров.

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

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

С другой стороны, я также использую плагин Format Media Titles для автоматического добавления заголовков к моим изображениям на основе имени файла. Этот плагин немного запускает PHP в панели администратора, когда я загружаю изображения, вот и все. Это никак не влияет на производительность моего сайта.

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

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

Внешний вид вашего сайта — это то, что видят посетители. «Бэкенд» — это панель администратора.

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

17. Используйте изображения webP

Я уверен, что вы знакомы с такими форматами изображений, как JPG и PNG.

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

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

Пока не все браузеры поддерживают изображения webP. Это означает, что если вы использовали webP для всех своих изображений, они могут вообще не отображаться в таких браузерах, как Safari. На данный момент вам необходимо обслуживать изображения webP, а также иметь резервную версию JPG или PNG каждого изображения.

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

Как использовать изображения webP

Если вы используете плагин Optimole, он полностью обрабатывается за вас.

На самом деле, для этого даже нет настройки.

Optimole автоматически создает веб-версии ваших изображений и предоставляет их посетителям, если их браузер поддерживает это. Небольшой файл Javascript с полифиллом загружается для предоставления версий изображений JPG/PNG, когда браузер посетителя не поддерживает webP.

18. Используйте предварительную выборку DNS

Предварительная выборка DNS — это очень круто.

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

Если вы используете Google Analytics, ваш веб-сайт будет загружать необходимые файлы Javascript с серверов Google вместо ваших. Это занимает больше времени, чем загрузка файлов, размещенных в вашем домене.

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

Детали довольно технические, но это идея этой тактики.

Как использовать предварительную загрузку DNS

WP Rocket предоставляет простую опцию для предварительной выборки.

В меню «Предварительная загрузка» вы можете ввести URL-адреса для всех внешних файлов, загружаемых вашим веб-сайтом.

На вашем сайте, вероятно, используются шрифты Google, поэтому добавление «//fonts.googleapis.com» активирует предварительную выборку для этого доменного имени.

19. Ограничьте количество сообщений на странице

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

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

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

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

Как ограничить количество сообщений на странице

WordPress имеет встроенную опцию для управления вашими сообщениями на странице в меню «Настройки чтения».

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

20. Объедините запросы Google Font

Я почти на 100% уверен, что ваша тема загружает Google Fonts.

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

Однако есть вероятность, что плагины на вашем сайте также загружают шрифты Google или вы сами добавили больше шрифтов. Если это так, ваш сайт делает несколько запросов Google Fonts, что означает несколько HTTP-запросов. Помните, чем меньше HTTP-запросов, тем лучше.

How to combine Google Fonts request

You're probably used to this by now…

To combine the Google Fonts requests on your site with WP Rocket, check this box:

If you're not sure if your site is making multiple Google Fonts requests, there's no harm in using this option, so I would recommend always turning it on.

21. Optimize Gravatar requests

When people leave comments on your site, their avatars show up automatically. That's because WordPress integrates with Gravatar to get the avatars.

Gravatar is a free service and all it does is associate an avatar with an email address. If you create an account and add an avatar, you'll see it show up on your site and all over the web automatically.

Here's the problem.

Every single one of those images makes another external request to the Gravatar servers. That means that if you get 10 comments on a post, your website is going to make up to 10 external HTTP requests – that's a lot!

There are three ways to optimize Gravatar, so it doesn't slow down your site.

How to optimize Gravatar avatars

The first option is very simple: lazy load Gravatar images.

Unfortunately, Optimole's lazy loading doesn't work with Gravatar images. In order to lazy load Gravatar images, you can use the free a3 Lazy Load plugin.

Alternatively, you can disable Gravatar entirely. In the Discussion settings, turn off avatars with this option:

As the setting implies, this disables avatars in the comments entirely. If you still want default avatars to show up, you can install the Disable User Gravatar plugin instead.

If commenters have their own accounts on your site, you can use the WP User Avatar plugin to let them upload their own avatars.

The third option is to cache the Gravatar images with a plugin like FV Gravatar Cache, but this plugin has been getting mixed user reviews.

While those three options are all viable, this next performance optimization is a fourth approach and the solution I use for this website.

22. Lazy load your comments

This is a really cool performance optimization I just started using.

Comments on your site don't show up until after all the post content, so why load them right away?

Since Optimole wasn't working to lazy load Gravatar images, I installed the Lazy Load for Comments plugin to lazy load the entire comments section. Problem solved!

Now when someone visits a post, none of the comments or Gravatar images are loaded until they scroll all the way down to the comments section. This removes all of the HTTP requests from Gravatar until well after the initial load.

While we're talking lazy loading , let's keep going with one more implementation.

23. Lazy load all videos

Do you embed Youtube videos in your posts?

Loading videos can be a major drag on performance, especially if you have more than one on the page.

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

Как лениво загружать видео

Я использую функцию ленивой загрузки Optimole для изображений, но в WP Rocket есть опция специально для iframe и видео, которую вы можете включить следующим образом:

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

24. Уменьшите количество редиректов

Если вы посетите этот веб-сайт, используя «http», вместо этого он перенаправит вас на версию «https».

Кроме того, если вы зайдете без «www», вы будете перенаправлены на версию с «www».

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

При ссылке на свой собственный веб-сайт либо внутри, либо с другого веб-сайта всегда используйте конечный URL-адрес, на который приходят посетители. Я всегда использую «https://www.competethemes.com/», чтобы не было редиректов.

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

25. Используйте меньше шрифтов

Вы уже оптимизировали свои JS и CSS, так что давайте серьезно подойдем и к оптимизации шрифтов.

Когда дело доходит до производительности, шрифты стоят дорого.

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

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

Теперь немного подробнее.

26. Используйте меньший вес шрифта

Каждый вес шрифта умножает потери производительности при выборе шрифта.

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

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

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

27. Загружайте только набор символов вашего языка

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

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

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

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

28. Отключите функции OpenType в Adobe Fonts.

Если вы используете Adobe Fonts (ранее TypeKit) для своих шрифтов, то, вероятно, у вас есть доступ к некоторым функциям OpenType.

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

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

При редактировании проекта отключите функции OpenType здесь:

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

29. Замените Font Awesome на Fontello

Эта тактика очень техническая, но, поскольку она помогла мне, я включаю ее для тех, кто читает, кому удобно писать код.

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

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

Поскольку я использую только 26 различных иконок на этом сайте, я смог значительно уменьшить размер файла шрифта и его таблицы стилей (примерно 100 КБ).

Если у вас есть полный технический контроль над вашим сайтом, удаление Font Awesome и замена его собственным пакетом веб-шрифтов от Fontello — отличный способ еще больше повысить производительность вашего сайта.

Другие оптимизации

Я постоянно вижу другие веб-сайты, которые рекомендуют следующие советы, но вот в чем дело…

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

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

Вот последние 7 тактик.

30. Отключите пингбеки и трекбэки

Никто больше не использует пингбэки или трекбэки по законным причинам.

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

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

Плагины не нужны.

31. Замедлите API Heartbeat

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

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

Хотя для большинства людей это не имеет большого значения, вы также можете замедлить его с помощью этой настройки в плагине WP Rocket:

Уменьшение активности просто указывает API Heartbeat запускаться каждые две минуты, а не каждую минуту.

32. Отключить хотлинкинг

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

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

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

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

33. Оптимизируйте свою базу данных

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

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

Существует множество плагинов для оптимизации вашей базы данных, но это то, что я делаю и с WP Rocket.

Меню «База данных» в настройках WP Rocket также включает в себя параметры для автоматического удаления спам-комментариев и других бесполезных данных из вашей базы данных.

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

34. Отключите или ограничьте количество ревизий сообщений

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

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

Меню «База данных» в WP Rocket включает возможность удаления ревизий сообщений.

Вы можете запустить эту опцию вручную или запланировать ее.

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

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

35. Удалить строки запроса

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

Строки запроса в URL-адресах файлов потенциально могут предотвратить их кеширование. С большинством плагинов кэширования, таких как WP Rocket, это не так, поэтому наличие строк запроса не является проблемой.

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

Просто активируйте эту опцию в WP Rocket и покончим с этим:

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

36. Удалить неактивные плагины

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

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

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

Наслаждайтесь своим более быстрым веб-сайтом

В более чем 7000 слов это официально самый длинный пост в блоге, который я когда-либо писал. Я хотел включить все!

Есть еще одна вещь, которую я должен тебе сказать…

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

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

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

Если у вас есть какие-либо вопросы, я оставлю раздел комментариев открытым, поэтому пишите ниже!