Итак… я направился в Google PageSpeed Insights и решил проверить свой веб-сайт. Результат был не очень приятным, как вы можете видеть ниже. Оценка 58/100 и красный цвет, что указывает на плохую оптимизацию скорости. Ну, я должен был что-то сделать!
Оптимизация изображений
Изображения являются очень важной частью каждого веб-сайта. Следовательно, веб-сайт может быть замедлен слишком большим, слишком большим или в основном плохо оптимизированным изображением. Первое, о чем предупредил PageSpeed Insights, было то, что большинство изображений, используемых в Cats Who Code, были слишком большими и плохо оптимизированы.
Как я решил проблему: я использовал бесплатный плагин WordPress под названием WP Smush . Он имеет супер полезную опцию, которая позволяет оптимизировать все ваши прикрепленные изображения (их более 800 в блоге), в общем 50. Это занимает некоторое время, но оно того стоит: я уменьшил свои изображения в среднем на 20%, в то время как сохраняя достаточное качество на всех моих фотографиях.
Для этого установите WP Smush , затем выберите « Медиа» → WP Smush. Прокрутите немного вниз, и вы увидите «Smush in Bulk». Нажмите на кнопку «Bulk Smush 50 attachments» и подождите. Вам нужно будет снова нажимать на кнопку каждые 50 изображений, если вы используете бесплатную версию плагина. После того как WP Smush оптимизирует каждое изображение на вашем сайте, вы можете быть уверены, что сэкономили много времени на загрузку. Проверьте разницу в Google PageSpeed Insights!
Дальнейшее чтение: полное руководство по оптимизации изображений для Интернета.
Минимизация HTTP-запросов
Следующая проблема, с которой я столкнулся, заключалась в том, что мой сайт запрашивал много файлов. При использовании WordPress наиболее удобный способ улучшить функциональность вашего блога — добавить плагины. Плагины — это круто, но многие из них должны выполнять дополнительные HTTP-запросы (в основном файлы CSS и JS), чтобы работать правильно.
Как я исправил проблему: я использовал лучший из когда-либо созданных плагинов для кэширования / минимизации, мощный W3 Total Cache . Плагин предлагает множество возможностей для того, чтобы кэшировать ваш сайт и сделать его быстрее. Например, очень полезная вещь в вашем стремлении к скорости — это параметры Minify: вы можете легко объединить 3 CSS-файла в один, что в итоге приведет к одному HTTP-запросу вместо трех. Я включил все параметры кэширования (кроме тех, которые требуют платных сторонних сервисов) и сократил мой JavaScript, CSS и HTML.
Monarch плагин Я использую добавлял шрифт Open Sans в своем блоге, что вызвало запрос ненужный HTTP. Чтобы удалить шрифт и последующее предупреждение, выданное PageSpeed Insights, я добавил следующее в свой файл темы WordPressfunctions.php . Этот маленький кусок кода просто удаляет шрифт, добавленный плагином.
//Remove Open Sans font added by Monarch
wp_dequeue_style( 'et-open-sans-700' );
Кроме того, маленькая форма, предоставленная MailChimp для моего списка рассылки, импортировала небольшой файл CSS. Я просто удалил вызов этой таблицы стилей и вставил правила CSS в мой основной .cssфайл.
Еще одна важная вещь: я удалил виджет Facebook «..», который загружал кучу таких вещей, как файлы CSS и JavaScript. Я планирую использовать простой значок в заголовке моего сайта вместо этого раздутого виджета.
Дополнительные исправления
Поскольку все веб-сайты различны, вот список дополнительных советов, которые могут быть полезны для решения проблем, с которыми вы сталкиваетесь.
Первый — использовать качественный хост. Если ваш сайт размещен на дрянном дешевом виртуальном хостинге, не ждите, что он будет быстрым. Мой веб-хостинг Vidahost работает быстро, и Google PageSpeed Insight говорит, что сервер очень отзывчивый. Так что большие пальцы за них! Если вы хотите присоединиться к Vidahost , вы можете использовать код купона CATSWHOCODE, чтобы получить 10% скидку на ваш хостинг.
Есть немного малоизвестный, но очень эффективный плагин WordPress, который вы можете попробовать: Speed Booster Pack . Он специально разработан для того, чтобы сделать ваш сайт быстрее и занять более высокие позиции в основных инструментах для быстрого тестирования. У него есть несколько очень интересных опций, которые вы должны проверить и поэкспериментировать.
Чистый код! Это может показаться очевидным, но все же тонна сайтов использует плохо оптимизированный код, будь то php или html / css. Чистый и оптимизированный код загружается быстрее, чем плохой. Поэтому, если вы ищете скорость, убедитесь, что ваш код правильно оптимизирован.
Используйте CDN: CDN (сеть доставки контента) — это сеть серверов, которые распространены по всему миру. Каждый из этих серверов хранит копию вашего статического контента. С CDN, когда пользователь заходит на ваш сайт, он перенаправляется на ближайший сервер к своему местоположению.
Не можете исправить свой сайт? Получить помощь от кого-то с опытом. Исправить скорость веб-сайта непросто, и есть почти 100% готовых решений, так как все сайты разные. Получение помощи от эксперта по скорости может быть лучшим способом ускорить ваш сайт. Хочешь мне помочь? Я могу сделать это с разумной скоростью, не стесняйтесь связаться со мной .
А теперь давайте посмотрим, как быстро работает Cats Who Code, согласно Google PageSpeed Insights :
