16 способов ускорить работу вашего сайта WordPress уже сегодня!

Ускорение вашего сайта — единственный гарантированный способ получить больше трафика и увеличить продажи.

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

Возможно, тонкая настройка внутренних триггеров скорости вашего сайта WordPress слишком сложна.

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

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

Существует множество бесплатных онлайн-инструментов, таких как WebPageTest, GTmetrix, Google PageSpeed ​​Insights и Pingdom, которые могут помочь вам выявить проблемы, вызывающие медленную загрузку и плохое взаимодействие с пользователем на вашем сайте.

Вот как взять на себя ответственность за производительность вашего веб-сайта.

1. Включить сжатие

Сжатие файлов CSS и Javascript поможет браузерам быстрее их загружать.

Сжатие Gzip может легко уменьшить размер файла с 200+ КБ (без сжатия) до менее 40 КБ (сжатый). Если на вашем сервере включено сжатие, воспользуйтесь им.

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

Добавьте следующий фрагмент кода в файл .htaccess, чтобы включить сжатие статических файлов.

Приложение AddOutputFilterByType DEFLATE/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] без gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Заголовок добавляет Vary User-Agent

2. Оптимизируйте свои изображения

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

Оптимальный способ их оптимизации — использовать Photoshop или любое другое программное обеспечение для обработки изображений. Сохраняйте изображения для Интернета с качеством изображения до 60%.

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

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

Неоптимизированное изображение

Оптимизированное изображение

3. Переместите файлы Javascript в нижний колонтитул

Хотя библиотеки Javascript, такие как jQuery, Mootools и Prototype, великолепны, потому что они расширяют функциональность вашего веб-сайта, они также могут блокировать отображение ваших страниц.

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

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

Если вы используете Wordpress, вы можете переместить вызовы скриптов из header.php в footer.php в вашей теме и использовать true в качестве четвертого параметра всякий раз, когда вы используете функцию wp_enqueue_script.

Переместите JS-скрипты в нижний колонтитул страницы

4. Убедитесь, что у вас включен KeepAlive

Apache (наиболее часто используемый сервер для общих планов хостинга в недорогих хостинговых компаниях) имеет отличную «функцию» под названием KeepAlive, которая поддерживает соединения открытыми для более чем одного HTTP-запроса.

Убедитесь, что KeepAlive активирован в вашей хостинговой компании.

Если у вас есть доступ к вашему файлу httpd.conf, включите KeepAlive, убедившись, что у вас есть «KeepAlive On», в противном случае просто добавьте следующий фрагмент кода в ваш файл .htaccess.

 <ifModule mod_headers.c>
 Набор заголовков
</ifModule>

Включите KeepAlive для вашего сайта

5. Объединяйте файлы CSS — встраивайте небольшие файлы CSS

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

Объединив все ваши файлы CSS только в один файл CSS, страница отображается намного быстрее.

Если у вас есть файлы CSS размером менее 2 КБ, вам следует встроить их вместо того, чтобы делать дополнительный HTTP-запрос.

В Wordpress есть несколько отличных плагинов, таких как Autoptimize и Better WordPress Minify, которые могут помочь вам объединить или даже встроить ваши таблицы стилей CSS.

Объединяйте файлы CSS и встраивайте их

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

Кэширование значительно сокращает время загрузки страниц, которые не так часто меняются.

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

W3 Total Cache, WP Super Cache и WP Fastest Cache — это лишь небольшой набор бесплатных плагинов Wordpress, которые обеспечивают различные виды кэширования, например кэширование страниц, кэширование базы данных и кэширование объектов среди прочего.

Плагин W3 Total Cache обеспечивает кэширование страниц, БД и объектов.

7. Используйте сеть доставки контента

Независимо от того, используете ли вы CMS, например Wordpress, Joomla, Magento, Drupal, или собственный сайт на PHP или HTML, я настоятельно рекомендую настроить сеть доставки контента (CDN).

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

Кстати, нагрузка на ваш сервер также резко снижается благодаря CDN.

CloudFlare — это бесплатный провайдер CDN и DNS среди прочего. MaxCDN также является отличным и доступным вариантом для оптимизации времени загрузки вашего сайта. Они оба настолько хороши, насколько это возможно.

CloudFlare — бесплатная сеть доставки контента

8. Минимизируйте количество HTTP-запросов

Чем больше у вас HTTP-запросов, тем медленнее будет время загрузки вашего сайта.

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

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

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

9. Выберите правильный тип файла для ваших изображений

Используйте JPG по умолчанию. Это самый маленький и быстро загружаемый тип файла.

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

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

Хотя следующие два изображения выглядят одинаково, между ними есть огромная разница. Один слева сохранен как файл png и весит 102 КБ, а другой — файл JPG размером 18 КБ, верно, в 6 раз легче!

Изображение сохранено в формате PNG

Изображение сохранено в формате JPG

10. Исправьте ошибки 404

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

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

Если ваш «водопад» (то, как браузер отображает ваш сайт) выглядит так (остерегайтесь красных строк), то ошибка 404 портит время загрузки вашего сайта.

404 ошибки могут испортить время загрузки вашего сайта

11. Позаботьтесь о размере страницы

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

Это еще более важно для мобильных устройств. Необходимость загружать сайт размером 2 МБ через мобильный телефон в 3G-соединении — прямой путь к катастрофе. Учтите, что пользователи не любят ждать рендеринга страницы более 2-3 секунд.

Добавляет ли новое изображение ценность сайту? Если нет, то не стоит добавлять его на свой сайт. Просто так.

Уменьшить размер страницы

12. Масштабируйте изображения

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

Например, если у вас есть изображение размером 1200 x 675 пикселей, и вы хотите использовать «масштабированную» версию размером 480 x 270 пикселей, создайте новую версию исходного изображения с измененным размером и используйте ее.

Это изображение ссылается на «большую» версию изображения, используя уменьшенную миниатюру вместо изменения размеров изображения в HTML.

Миниатюра (масштабированное изображение) Ссылки на изображение большого размера

13. Используйте кеширование браузера

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

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

Обычно это делается путем добавления этого фрагмента кода в файл .htaccess для планов общего хостинга.

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType text/html «доступ плюс 7200 секунд»
ExpiresByType image/gif «доступ плюс 864000 секунд»
ExpiresByType image/jpg «доступ плюс 864000 секунд»
ExpiresByType image/png «доступ плюс 864000 секунд»
ExpiresByType text/css «доступ плюс 864000 секунд»
ExpiresByType text/javascript «доступ плюс 864000 секунд»
Приложение ExpiresByType/javascript «доступ плюс 864000 секунд»
</ifmodule>

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

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

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

Хотя полная оптимизация базы данных может быть очень сложным и трудоемким процессом, phpMyAdmin предлагает вам несколько основных вариантов оптимизации, «оптимизируя ваши таблицы».

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

15. Грамотно выбирайте хостинговую компанию

Выберите тарифный план хостинга, соответствующий потребностям вашего сайта.

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

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

Я настоятельно рекомендую хостинговую компанию Wordpress, управляемую WPEngine, для любого сайта электронной коммерции WordPress или любого сайта WordPress с пиками трафика.

16. Наймите эксперта

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

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

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

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

Время загрузки увеличилось с 8,2 до 2,6 секунды. Время обработки первого байта и начала рендеринга было оптимизировано до 0,147 и 0,384 секунды соответственно, а количество HTTP-запросов уменьшено с 96 до 78. Google PageSpeed ​​Insights также был оптимизирован до 88%.

Показатель отказов снизился примерно на 10% в течение нескольких недель. Клиент и, что более важно, пользователи веб-сайта были довольны, и поддержка сайта стала отличным опытом.

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

Представьте, как обрадуются ваши пользователи, увидев сверхбыструю загрузку!

Если вы хотите нанять меня, я буду рад помочь. Посмотрите мое портфолио и свяжитесь со мной на AwesomeWeb сегодня!

Вывод

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

Google ранжирует вас выше. Пользователи счастливее. Показатели отказов снижаются. Коэффициенты конверсии увеличиваются. И вы делаете больше продаж.

Хватит терять трафик и деньги. Начните оптимизировать время загрузки вашего сайта сегодня.

Сегодня я предлагаю специальный пакет за 497 долларов для читателей IncomeDiary. Это половина моей обычной нормы. Если ваш сайт соответствует моим минимальным требованиям, я позабочусь обо всем, что перечислено в этом посте. Упомяните IncomeDiary в своем сообщении, и я свяжусь с вами в ближайшее время. Начните 2015 год с самого быстрого веб-сайта!

Наймите меня здесь или найдите других фрилансеров по оптимизации скорости на AwesomeWeb здесь.