Как перестать загружать ненужные файлы и уменьшить HTTP-запросы веб-сайта — советы по оптимизации WordPress
Опубликовано: 2020-09-08
На Crunchify мы опубликовали несколько руководств по оптимизации скорости, к которым вы можете обратиться в любое время.
Мы используем MaxCDN в качестве поставщика контента. Прошло уже почти 4 года и пока все работает отлично. Genesis WordPress Framework и MaxCDN — лучшая комбинация. По умолчанию Genesis Framework поставляется с множеством оптимизаций, схемой разметки Google, удобной для мобильных устройств структурой и многим другим.
На прошлой неделе я просматривал свою учетную запись MaxCDN и вдруг заметил самые популярные ресурсы для загрузки. Как вы видите на изображении выше top 9 out of 10 resource files были загружены более ~ 5 millions раз за последнюю неделю.
Я был удивлен и подумал, действительно ли мне нужны эти ресурсы? Должен ли я загружать эти файлы отдельно? Как избавиться от этих файлов, если они не требуются, кроме файла style.css , который абсолютно необходим для загрузки сайта.
Давайте начнем с того, как я избавился от всех этих 9 файлов с помощью простых трюков.
Не для всех читателей
Эти шаги не для всех читателей WordPress. На Crunchify мы используем Crayon Syntax Highlighter и настраиваемые изображения для конкретных тем, поэтому это применимо к ограниченным пользователям.
Шаг 1
Давайте list all of those 9 files . 2-й столбец показывает, сколько раз он был загружен.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
Шаг 2
Давайте сгруппируем вместе файлы плагина Crayon Syntax Highlighter .
Есть 3 файла:
neon.css , crayon.min.css и crayon.min.js . Я написал полное отдельное руководство с 7 подробными шагами, чтобы избавиться от этих файлов. Пожалуйста, просмотрите его и дайте мне знать, если вы обнаружите какие-либо проблемы.
Шаг 3
Теперь wp-embed-min.js . Пожалуйста, посетите учебник Как отключить скрипт автоматической вставки для WordPress 4.4+. Он перестанет загружать файл для встраивания в интерфейсе.
Шаг-4
Давайте рассмотрим еще 3 more .png :
bg-pattern.png
Я загружал это изображение в фон заголовка и нижнего колонтитула. Я избавился от него, используя вместо него цвет #333 .
crunchify-sprite.png
Я загружал это изображение спрайта, чтобы показать кнопки социальных сетей на боковой панели. Я заменил его шрифтами fontawesome .
h3.png
Я загружал это, чтобы показать галочку для сообщений H3 в некоторых местах. Я заменил его шрифтами fontawesome . Ниже приведен потрясающий эквивалент.
Шаг-5
Теперь у нас осталось только 2 файла. crunchify-logo.png и bg.png , которые я думал сохранить. Итак, вместо того, чтобы вызывать как изображение, я добавил эквивалент изображения base64 для этого файла.
До:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
После:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
Я преобразовал оба изображения в изображения base64. Преимущество, которое мы получим, не будет необходимости открывать другое соединение и делать HTTP-запрос на сервер для изображения.
Меньше запросов = лучшее время загрузки страницы
Использование SVG (Scalable Vector Graphic) image имеет некоторые преимущества, поскольку изображения масштабируются до любого размера без потери четкости (кроме очень маленьких), что отлично смотрится на дисплеях Retina.
Эти Data URIs относятся не только к .png или изображениям, но и к любым ресурсам. Вот простой инструмент для конвертации .png в .svg, который я использовал онлайн.
Резюме
Это руководство является частью раздела «Как ускорить WordPress и повысить производительность». Там вы найдете все хитрости и советы по оптимизации WordPress.
Выполнив эти шаги, я избавился от всех 9 ненужных ресурсов из 10. Это означает, что моя страница загружается намного быстрее, так как на каждой странице будет на 9 запросов меньше.
Дайте мне знать, если у вас есть какие-либо другие советы, которые улучшат скорость страницы сайта. В Crunchify скорость является основным критерием, поэтому мы используем очень мало плагинов. Все страницы загружаются within half a second .
