94

Как и когда вставлять изображения с помощью Base64 / SVG в WordPress

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

В идеале браузер должен иметь возможность отображать и рисовать содержимое над сгибом с наименьшим количеством HTTP-запросов. Создание css критического пути, отсрочка css и js очень помогают.

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

Что такое изображения Base64?

Base64 – это своего рода кодирование двоичного кода в текст. Другими словами, любые данные представлены в виде текста. В нашем случае изображения представлены в виде текста. Любое изображение можно преобразовать в base64.

Нормальное изображение в HTML:

<img src="https://yout-site.com/logo.png"/>

Изображение base64 в HTML (встроенное):

<img src="data:image/png;base64,...[content]..."/>

base64-image.de – хороший инструмент для преобразования изображений в base64.

Что такое изображения SVG?

SVG (масштабируемая векторная графика) – еще один формат изображения, который представлен в виде кода в формате на основе XML. Идеально подходит для векторных изображений. Обычно логотипы, иконки представляют собой векторные изображения.

SVG содержит коды для рисования фигур, таких как контуры, контуры, кривые и т. Д. Следовательно, размер SVG обычно намного меньше, чем размер JPG / PNG / GIF.

Изображение SVG в HTML:

<img src="logo.svg"/>

Встроенное изображение SVG в HTML:

<svg xmlns="http://www.w3.org/2000/svg">...[content]...</svg>

Что не так во встраивании изображений?

Вам нужно тщательно выбрать, какие изображения следует встраивать.

Вот несколько ошибок при встраивании изображений:

  • Преобразование изображений в base64 приводит к увеличению размера на 30%.
  • Размер HTML-страницы увеличивается (слишком много повлияет на TTFB )
  • Изображения не могут быть доставлены через CDN .

Несмотря на все это, есть хорошие места для встраивания изображений.

Когда вставлять изображения?

Я добавил три изображения:

  • Логотип – SVG, 2,5 КБ
  • Значок поиска – SVG, 0,2 КБ
  • Фото группы FB – PNG, 4.5 КБ. После преобразования в base64 – 6 КБ

Размер моего HTML увеличился с 19 КБ до 25 КБ (благодаря сжатию brotli).

Держите размер HTML менее 100 КБ. Кроме того, TTFB немного снизится. Также, если вы кешируете HTML-страницы в Cloudflare , это не проблема.

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

Встраивание изображений в WordPress

Давайте подготовим наши изображения для встраивания:

Если вы можете редактировать URL-адрес изображения, вы можете напрямую вставить текст base64:

base64 Гутенберг

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

Обычно я нахожу имя класса соответствующего изображения (или родительского элемента) и ищу файл в теме / плагине.

String locator – хороший плагин для этого. Он будет искать строку внутри файлов, и вы можете ее редактировать.

локатор строк
встроенное изображение SVG

Вывод

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

Попробуйте сами.

Scroll Up