Содержание
На Crunchify мы опубликовали несколько руководств по оптимизации скорости, к которым вы можете обратиться в любое время.
Мы используем MaxCDN в качестве нашего контент-провайдера. Прошло почти 4 года, и до сих пор это работает слишком хорошо. Genesis WordPress Framework и MaxCDN — лучшая комбинация. По умолчанию Genesis Framework поставляется с множеством оптимизаций, схемой разметки Google, удобной для мобильных устройств структурой и многим другим.
На прошлой неделе я просматривал свою учетную запись MaxCDN и неожиданно обнаружил лучшие ресурсы для загрузки . Как вы видите на изображении выше top 9 out of 10 resource files были загружены более чем ~ 5 millions время на прошлой неделе.
Я был удивлен и подумал, что мне действительно нужны эти ресурсы? Нужно ли загружать эти файлы отдельно? Как избавиться от этих файлов, если не требуется, кроме style.css файл, который абсолютно необходим для загрузки сайта.
Давайте начнем с того, как я избавился от всех этих 9 файлов с помощью простых приемов
Шаг 1
Давайте list all of those 9 files , 2-й столбец показывает, сколько раз он был загружен .
|
1
2
3
4
5
6
7
8
9
|
/ wp — включает в себя / js / wp — embed . мин . JS 12 , 626 , 575 2,41 гигабайт
/ wp — контент / плагины / мелок — синтаксис — подсветка / темы / неон / неон . CSS 11 , 406 , 345 2,61 гигабайт
/ wp — content / plugins / crayon — синтаксис — подсветка / css / min / crayon . мин . CSS 11 , 259 , 474 4,50 гигабайт
/ wp — content / themes / crunchify / images / bg . PNG 9 , 268 , 221 3,45 гигабайт
/ wp — content / themes / crunchify / images / bg — pattern . PNG 9 , 135 , 288 3,41 гигабайт
/ wp — контент / темы / crunchify / images / h3 . PNG 6 , 289 , 690 1,18 гигабайт
/ wp — контент / темы / crunchify / images / crunchify — логотип . PNG 5 , 476 , 295 7,05 гигабайт
/ wp — content / themes / crunchify / images / crunchify — sprite . PNG 5 , 334 , 562 7,45 гигабайт
/ wp — content / plugins / crayon — синтаксис — подсветка / js / min / crayon . мин . JS 4 , 344 , 704 2,60 гигабайт
|
Шаг 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
|
, заголовок — изображение , сайт — название {
дисплей : блок ;
плавать : слева ;
min — высота : 60px ;
текст — отступ : — 9999 пикселей ;
ширина : 100 % ;
фон — позиция : центр ! важно ;
фон — размер : содержать ! важно ;
фон : url ( images / crunchify — logo . png ) нет — повторить ;
}
|
После:
|
1
2
3
4
5
6
7
8
9
10
|
, заголовок — изображение , сайт — название {
дисплей : блок ;
плавать : слева ;
min — высота : 60px ;
текст — отступ : — 9999 пикселей ;
ширина : 100 % ;
фон — позиция : центр ! важно ;
фон — размер : содержать ! важно ;
фон : URL — адрес (данные: изображения / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 // O778xjMrlbFpJHmPN957vv3WXu3Llzz / zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF + oQULyPsMw4pUGM2pra0d1WqUa75 / sqcHo1Jld8QWgQaz2Ec / jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc / RxeYnXVmU8qohyeVKf8qrVX7feM + NVliQ3lPwmisykgrz83tckRHZ4r / XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v + JXA / aPieXs2tlqrF + TUZSwwqfQY0XXlsQl0hbo9rvW1J7 / 7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo + PredSMl / YtU89XPuPoMfQm6kF + NFRVccou2n6ABqos9tXVlZoNiPPiA / emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI + Rx8xtxrvxafI / 3VSB + / Id7OjVse2R / 5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPff Не NaYUXExRKJHicGA + D2IAgw0xH / a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP + XSfCT8M8yGZ + uYKm3jdCTTk2aNMUqAZ / UrcqtV / VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG + 1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq / lKdge / wzLg ==) не повторять;
}
|
Я конвертировал оба изображения в изображения base64. Преимущество мы получим, не открывая другое соединение и не отправляя HTTP-запрос на сервер для изображения.
Меньше запросов = лучшее время загрузки страницы
Есть некоторые преимущества использования SVG (Scalable Vector Graphic) image поскольку изображения масштабируются до любого размера без потери четкости (за исключением очень крошечного), который отлично смотрится на дисплеях сетчатки.
Эти Data URIs не ограничиваются .png или изображения, но для любых ресурсов. Вот простой инструмент конвертации .png в .svg, который я использовал онлайн.
Резюме
Это руководство является частью раздела « Как ускорить работу WordPress и повысить производительность ». Там вы найдете все приемы и советы по оптимизации WordPress .
Выполнив эти шаги, я избавился от всех 9 ненужных ресурсов из 10. Что означает — моя страница загружается намного быстрее, поскольку на каждой странице будет меньше запросов
Дайте мне знать, если у вас есть другие советы, которые улучшат скорость страницы сайта . В Crunchify скорость является основным критерием, и именно поэтому мы используем очень мало плагинов . Все страницы загружаются within half a second ,
0.00 (0%) 0 votes
