Ни для кого не секрет: сегодняшним веб-пользователям нужна скорость. Поскольку Интернет и сотовая связь становятся все быстрее и быстрее, пользователи ожидают, что сайты будут загружаться быстро, и задача разработчика — сделать все возможное для быстрого обслуживания этих страниц. Так как же сделать так, чтобы ваш сайт работал быстро? Вот что вы должны делать конкретно при сборке с помощью WordPress.

Прежде всего: проверьте скорость своего сайта

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

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

Имейте в виду, что эта статья посвящена полностью настроенным сайтам WordPress. Если вы проводите тесты скорости на сайте с громоздкой темой и 19 сторонними плагинами (плагины могут замедлять работу как клиентской, так и серверной части), начните с чистого листа и медленно активируйте плагины один за другим, чтобы найти нужные. которые замедляют работу.

Фронтальная производительность

Как улучшить доступность вашей темы WordPress прямо сейчас

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

Золотое правило производительности, по словам директора по производительности Fastly Стива Содерса, заключается в том, что 80-90% общего времени загрузки страницы приходится на внешний интерфейс (правило 80/20). 10-20% серверной части имеют решающее значение, но даже если вы используете самый быстрый хостинг, который можно купить за деньги, ваш сайт все равно не будет полностью раскрывать свой потенциал без оптимизации внешнего интерфейса, чтобы пользователи воспринимали это. он загружается быстро. Восприятие важно, когда дело доходит до оптимизации внешнего интерфейса. Пользователю все равно, сколько секунд загружается сайт. Все, что их действительно волнует, — это то, как быстро они могут взаимодействовать с ним и видеть контент или выполнять действия без задержки. Не сказать, что вам не следует беспокоиться о фактическом времени загрузки (вы должны), но, следуя приведенным ниже методам, вы можете как можно быстрее убедиться, что ваш сайт находится в пригодном для использования состоянии, а затем быстро с полной загрузкой страницы. все активы.

CSS

Самое важное, что нужно сделать с вашим CSS, прежде чем он будет доставлен в браузер, — это просто сжать его и удалить неиспользуемые селекторы. Создание хорошего рабочего процесса разработки при разработке тем делает этот процесс тривиальным, особенно если вы используете препроцессор, такой как Sass. Я использую Grunt, средство запуска задач на JavaScript, которое выполняет команды за вас во время разработки. Для Grunt есть плагин grunt-contrib-sass, который просто компилирует все ваши файлы Sass в один (то есть, если вы используете партиалы Sass), минимизирует их и сжимает. Добавьте к этому плагин grunt-contrib-watch, и он будет запускать задачу Sass всякий раз, когда вы сохраняете файл. Легко! Не теряйте сон, если вы не используете новейшую и лучшую методологию CSS, но старайтесь следовать какому-то стандарту при создании CSS, чтобы избежать дублирования и огромных размеров файлов.

Когда ваша таблица стилей готова к работе, самый простой (и, безусловно, стандартный) способ загрузить ее — просто указать ссылку на нее в <head> ;. Таким образом, браузер загружает и анализирует его до загрузки остальной части DOM. Однако существует новый метод, при котором «критические» стили встраиваются в <head> , а затем полная таблица стилей загружается асинхронно с помощью JavaScript. Я действительно использую эту технику только тогда, когда я абсолютно пытаюсь заставить сайт загружаться (или воспринимать загрузку) менее чем за секунду, но это отличная вещь, чтобы посмотреть, может ли она вписаться в ваш рабочий процесс. У Filament Group есть большая обширная статья об использовании этой техники.

JavaScript

Понимание того, как WordPress использует MySQL

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

Золотое правило оптимизации JavaScript простое: используйте как можно меньше файлов JavaScript, минимизируйте и объединяйте их. Сторонние плагины WordPress могут нанести ущерб, раздувая документ неминифицированными блокирующими файлами JavaScript, поэтому важно быть внимательным при выборе плагинов. В идеале вы должны объединить ВСЕ файлы JavaScript в один, а затем минимизировать его. Для тех случаев, когда невозможно объединить все ваши файлы в один, существуют атрибуты HTML, называемые «асинхронный» и «отложенный», которые можно использовать для асинхронной загрузки файлов JavaScript или после загрузки остальной части страницы.

В настоящее время наиболее распространенное место для ссылки на JavaScript — внизу вашего документа, прямо перед закрывающим тегом. Однако существуют более продвинутые методы загрузки JavaScript. Опять же, Filament Group провела массу исследований по этому вопросу и имеет несколько проектов с открытым исходным кодом, которые вы можете использовать, если стремитесь к сверхбыстрому времени загрузки страницы (кстати, я никоим образом не связан с Filament Group; Я просто думаю, что их вещи потрясающие). Лучшим подходом является динамическая загрузка скриптов путем встраивания небольшой функции в <head> ; который затем добавляет теги сценария, не блокируя остальную часть страницы. Для получения дополнительной информации ознакомьтесь со сценарием loadJS.

Картинки

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

Инструменты сжатия необходимы для того, чтобы выжать из изображений как можно больше лишнего. ImageOptim — отличное приложение для Mac, которое хорошо справляется с этой задачей, наряду с OptiPNG и jpegtran для использования с такими исполнителями задач, как Grunt.

Шрифты

Веб-шрифты очень распространены в наши дни. Я использую веб-шрифты Google почти в каждом проекте, но до недавнего времени я не осознавал потери производительности, просто ссылаясь на них в <head> . Удар по производительности невелик, но эта статья о том, как сделать сайты невероятно быстрыми, так что все имеет значение! Для лучшей производительности при использовании веб-шрифтов я рекомендую использовать загрузчик веб-шрифтов, разработанный совместно Google и Typekit. Это скрипт с открытым исходным кодом, который одновременно управляет загрузкой ваших шрифтов от третьих лиц, таких как Google Web Fonts, и позволяет им загружаться асинхронно (еще не надоело это слово?).

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