--- title: "Поднимаем First Contentful Paint и Largest Contentful Paint в интернет-магазине Joomla JoomShopping - WebTolk" description: "Немного СЕО оптимизации Joomla JoomShopping. Поднимаем First Contentful Paint и Largest Contentful Paint для интернет-магазина на базе Joomla, увеличиваем показатели Page Speed" url: "https://web-tolk.ru/blog/podnimaem-first-contentful-paint-i-largest-contentful-paint-v-internet-magazine-joomla-joomshopping" date: "2024-09-23T12:02:52+00:00" language: "ru-RU" --- # Поднимаем First Contentful Paint и Largest Contentful Paint в интернет-магазине Joomla JoomShopping Автор: Сергей Толкачев Создано: 23 сентября 2024 Обновлено: 01 сентября 2025 Просмотров: 987 ![](https://web-tolk.ru/blog/images/blog/podnimaem-first-contentful-paint-i-largest-contentful-paint-v-internet-magazine-joomla-joomshopping/header.webp) Немного СЕО оптимизации **Joomla** **JoomShopping**. Поднимаем **First Contentful Paint** и **Largest Contentful Paint** - увеличиваем показатели Page Speed. Размеры картинок для категорий выбраны 300х300, так как в мобильном виде категории выводятся в 2 колонки. Атрибут `loading="lazy"` НЕ указываем для первых 4-х картинок, так как они должны отобразиться сразу, а остальные можно и попозже. В коде шаблона выводим картинки с помощью HTMLHelper. ``` image_category_path . '/' . (($category->category_image) ? $category->category_image : $this->noimage); $img_alt = (property_exists($category, 'img_alt') && !empty($category->img_alt) ? htmlspecialchars($category->img_alt) : $category->name); $img_attribs = [ 'title' => (property_exists($category, 'img_title') && !empty($category->img_title) ? htmlspecialchars($category->img_title) : $category->name), 'class' => 'img-fluid jshop_img', 'width' => $jshopConfig->image_category_width, 'height' => $jshopConfig->image_category_height, ]; if ($lazy_loading_iterator > 4) { // Not loading=lazy for first 5 images $img_attribs['loading'] = 'lazy'; } $lazy_loading_iterator++; echo HTMLHelper::image($img_src, $img_alt, $img_attribs); ``` Размеры картинок для категорий берём из настроек JoomShopping. Сами картинки пакетно обрабатываем с помощью XnConvert, закидываем обратно в папку `components/com_jshopping/files/img_categories`. В базе данных нужно обновить имена файлов - заменить расширения файлов. Для этого в PhpMyAdmin выполняем SQL запрос для таблицы `#__jshopping_categories`: ``` UPDATE #__jshopping_categories SET `category_image` = REPLACE(`category_image`, '.jpg', '.webp'); ``` В функции REPLACE указываю расширение с точкой - `.jpg` и `.webp` - для того, чтобы случайно не переименовать это сочетание где-нибудь в середине имени файла, так как это менее вероятно, чем упоминание расширения в имени файла. Подобные рекомендации применимы к любой странице. JoomShopping лишь в качестве примера. ## Об авторе ![Толкачев Сергей Юрьевич](https://web-tolk.ru/images/uslugi/sergey-tolkachyov-apr-2023.webp) ### Толкачев Сергей Юрьевич Joomla-разработчик. [Контрибьютер ядра Joomla](https://github.com/joomla/joomla-cms/pulls?q=is%3Apr+author%3Asergeytolkachyov+). Один из ведущих Telegram-канала русскоязычного Joomla-сообщества [JoomlaFeed](https://t.me/joomlafeed), один из модераторов [чата русскоязычного Joomla-сообщества](https://t.me/joomlaru). Мои расширения в официальном маркетплейсе расширений Joomla - [Joomla Extensions Directory](https://extensions.joomla.org/profile/profile/details/528051/). Имею публикации в [официальном журнале международного Joomla-сообщества - Joomla Community Magazine](https://magazine.joomla.org/authors/sergeytolkachyov) и на [официальном сайте русскоязычного Joomla-сообщества](https://joomlaportal.ru/users/sergey-tolkachyov). Муж. Отец 3 детей. Россия, Саратов. ## JSON-LD Schema ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://web-tolk.ru/", "name": "Главная" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://web-tolk.ru/blog", "name": "Блог" } }, { "@type": "ListItem", "position": 3, "item": { "name": " Поднимаем First Contentful Paint и Largest Contentful Paint в интернет-магазине Joomla JoomShopping" } } ] } ``` ```json { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://web-tolk.ru/#/schema/Organization/base", "name": "WebTolk", "url": "https://web-tolk.ru/", "logo": { "@type": "ImageObject", "@id": "https://web-tolk.ru/#/schema/ImageObject/logo", "url": "images/webtolk-1080p.jpg", "contentUrl": "images/webtolk-1080p.jpg", "width": 1920, "height": 1080 }, "image": { "@id": "https://web-tolk.ru/#/schema/ImageObject/logo" }, "sameAs": [ "https://github.com/WebTolk", "https://github.com/sergeytolkachyov", "https://vk.com/web_tolk", "https://vk.com/webtolkru", "https://tenchat.ru/sergeytolkachyov", "https://t.me/sergeytolkachyov", "https://t.me/webtolkru" ] }, { "@type": "WebSite", "@id": "https://web-tolk.ru/#/schema/WebSite/base", "url": "https://web-tolk.ru/", "name": "WebTolk", "publisher": { "@id": "https://web-tolk.ru/#/schema/Organization/base" } }, { "@type": "WebPage", "@id": "https://web-tolk.ru/#/schema/WebPage/base", "url": "https://web-tolk.ru/blog/podnimaem-first-contentful-paint-i-largest-contentful-paint-v-internet-magazine-joomla-joomshopping", "name": " Поднимаем First Contentful Paint и Largest Contentful Paint в интернет-магазине Joomla JoomShopping - WebTolk", "description": "Немного СЕО оптимизации Joomla JoomShopping. Поднимаем First Contentful Paint и Largest Contentful Paint для интернет-магазина на базе Joomla, увеличиваем показатели Page Speed", "isPartOf": { "@id": "https://web-tolk.ru/#/schema/WebSite/base" }, "about": { "@id": "https://web-tolk.ru/#/schema/Organization/base" }, "inLanguage": "ru-RU", "breadcrumb": { "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17" } }, { "@type": "Article", "@id": "https://web-tolk.ru/#/schema/com_content/article/107", "isPartOf": { "@id": "https://web-tolk.ru/#/schema/WebPage/base" } } ] } ```