Одна из моих основных целей при оптимизации веб-сайта — улучшить первую содержательную отрисовку и первую значимую отрисовку, как можно быстрее сделать указанное выше содержимое сгиба видимым.
В идеале браузер должен иметь возможность отображать и рисовать содержимое над сгибом с наименьшим количеством 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
Давайте подготовим наши изображения для встраивания:
- Преобразование изображения в base64 — https://www.base64-image.de/
- Изменение размера изображений — https://resizeimage.net/
- Сжимайте изображения — https://compressor.io/
- Уменьшите SVG — https://jakearchibald.github.io/svgomg/
Если вы можете редактировать URL-адрес изображения, вы можете напрямую вставить текст base64:
Однако некоторые изображения / значки жестко запрограммированы в тему / плагины. В этом случае вам нужно найти нужный файл и заменить код
Обычно я нахожу имя класса соответствующего изображения (или родительского элемента) и ищу файл в теме / плагине.
String locator — хороший плагин для этого. Он будет искать строку внутри файлов, и вы можете ее редактировать.
Вывод
Встраивание изображений немного сложно в зависимости от вашей темы / плагина и имеет некоторые подводные камни, как я обсуждал выше. Но если вы выберете правильные изображения и сделаете это правильно, это может дать вам отличные результаты.
Попробуйте сами.
