telegram kadweb instagram kadweb
telegram kadweb instagram kadweb

Как вы тратите деньги при загрузке изображений на сайт?

Александр Канашкин
Веб-разработчик
Как вы тратите деньги при загрузке изображений на сайт?

При передаче сайта клиенту и последующем администрировании с его стороны, я замечаю одну и ту же ошибку: бездумная загрузка изображений на сайт, вес которых является слишком большим и как следствие вызывает множество проблем: от трат ресурсов хостинга до худшей позиции в поиске. Сегодня разберемся, как бездумная загрузка изображений тратит ваши деньги и как буквально в пару кликов избежать этого. ⤵

Что может быть не так в загрузке изображений?

Изображения — достаточно ресурсоемкие элементы, вес которых занимает основную часть общего размера страницы сайта.

Для быстрой загрузки сайта общий вес страницы должен занимать максимум 4-5 МБ. Хотя само собой, в зависимости от специфики сайта, это значение может несколько превышаться.

Один из моих клиентов на днях загрузил на сайт картинку, вес которой составляет 7 МБ, а ведь это всего одна из картинок на странице.

Проверить вес своего сайта можно на сервисе Pingdom Test.
Просто вставьте ссылку и запустите тест. Размер страницы при загрузке будет отображаться в поле «Page size».

На что влияет вес изображений и как тратятся ваши деньги?

► Долгая загрузка сайта

Этот пункт можно назвать самым важным, так как он вызывает целый ряд проблем:

  • Уход пользователей с сайта — никто не будет ждать долгую загрузку, как следствие теряем потенциального клиента.
  • Низкие позиции в поисковой выдаче (SEO) — поисковые системы, такие как Google, учитывают скорость загрузки страниц как один из факторов ранжирования.
  • Повышенная нагрузка на сервер — медленная загрузка может быть связана с высокими затратами ресурсов на сервере. Это приводит к перегрузке серверов.

► Трата ресурсов хостинга

Мы арендуем у провайдера хостинг в рамках определенного тарифа, предусматривающего выделенные ресурсы в установленном объеме.
Да-да, хостинг не резиновый) 🤫

Соответственно, чем большего размера мы загружаем изображения, тем быстрее исчерпываем ресурс памяти хостинга. Как следствие, это вызывает потребность покупать более дорогой тариф. Да, этого можно не бояться на мелких сайтах, но, условный интернет магазин может занимать в разы больше.

► Проблемы с пользовательским опытом

Мобильный трафик — на мобильных устройствах пользователи особенно чувствительны к медленным сайтам. Ожидание загрузки страниц на мобильных устройствах может вызвать негативный опыт и отказы. Мобильные пользователи могут быть особенно склонны покидать сайт при долгой загрузке.

👉 Дополнение: Google в своих исследованиях отмечает, что 53% пользователей покидают сайт, если он не загружается за 3 секунды. Это особенно важно для бизнеса, где мобильная аудитория составляет до 60-70% трафика.
Читать полностью

Как оптимизировать изображения и избежать проблем?

Проанализировать вес и размер изображений можно следующими способами:

  • Просмотр элементов через DevTools, если разбираетесь в этом
  • Просмотр информации о изображениях через медиатеку вашей CMS

Для этого можно использовать различные сервисы, могу порекомендовать сервис I Love IMG. Для работы с ним, в основном понадобятся 2 инструмента:

При сжатии просто выбираем набор нужных изображений и скачиваем уже сжатые. Сжатие происходит без потери качества.

При изменении размера выбираем также процентное соотношение сжатия. После чего можно также дополнительно сжать картинку.

Результат: 26.99 КБ ➡ 3.42 КБ!

⚠ Предупреждение: будьте осторожны с изменением размера, так-как нужно понимать на какие элементы вы будете добавлять эти картинки. Если на большие и сожмете изображение в маленький размер, оно будет расстягиваться и отображаться с ужасным качеством.

► Формат WEBP — Google одобряет

WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.

Конвертировать в WebP можно практически все изображения, кроме маленьких по размеру или иконок. После чего полноценно использовать на сайте.
Для конвертации можно использовать популярный сервис cloudconvert.

Конвертируем одну из картинок из формата jpg и получаем 1.1 МБ вместо 1.5 МБ без видимой потери качества!

Итоги

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

► Вес изображений влияет на скорость загрузки — чем тяжелее файлы, тем дольше грузится сайт, что приводит к потере клиентов и ухудшению позиций в поисковой выдаче.

► Неправильная загрузка изображений увеличивает затраты — лишний вес расходует ресурсы хостинга, заставляя платить за более дорогие тарифы.

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

Подписывайтесь на мой Telegram-канал. Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!

Последние статьи

Почему сайт под ключ — исключительно командная работа?

Почему сайт под ключ — исключительно командная работа?

Достаточно часто клиенты, которые приходят ко мне для создания сайта под ключ не знают какие специалисты задействованы в работе или вовсе не знают факт того, что сайт делается не одним специалистом. В этой статье разберемся: почему качественный сайт под ключ делается целой командой, какие специалисты участвуют в процессе и как именно ⤵️ Специалисты «Все в одном» Для начала разберемся с мнением, что разработка сайта под ключ делается одним человеком. Особенно часто такое мнение имеют люди, которые пересмотрели услуги по созданию сайтов на сервисе «Авито», ведь именно там целый рассадник таких «мастеров на все руки». Они тебе и дизайнеры, и разработчики, и SEO-оптимизаторы, и маркетологи. Действительно ли все так просто? Сначала может показаться, что такой специалист — просто золото, ведь он умеет все, так еще и сделал фото с доверчивой улыбкой на слайдах к объявлению о создании сайта, но на деле мы получаем: Сайт без продуманного дизайна — большинство таких «специалистов» делают сайты на конструкторе и рисуют дизайн сразу в них, а не в Figma для экономии времени или из-за отсутствия навыков работы в Figma. Это не позволяет создать продуманный UX / UI, а также провести должные тесты. Некачественная разработка — в предыдущем пункте упоминал о создании сайтов на конструкторе, большинство из них неоптимизированы, имеют проблемы с адаптивом, много лишнего кода и как следствие более медленную загрузку. Проблемы в SEO — вряд ли такой специалист будет собирать семантическое ядро, составлять корректные SEO-заголовки, отдавать задания копирайтеру на прописывание текста с нужными ключевыми фразами, следить за индексацией. Он скорее выдумает ключи из головы, а контент сгенерирует через Chat GPT. Маркетинг — такой специалист может настроить рекламу в Яндекс.Директ «по-быстрому», не учитывая множество факторов, таких как минус-слова, ограничение бюджета, корректная настройка таргетинга по регионам. По итогу клиент получает не то, что хотел и теряет деньги. Все это можно сравнить с квартирой, в которой вы живете.Сомневаюсь, что ее строил один человек, ведь на самом деле этим занимался целый ряд работников: Архитектор — продумывает планировку и общую концепцию. Прораб — управляет процессом, следит за сроками и качеством. Строители — возводят стены и выполняют черновые работы. Инженер — отвечает за электрику, воду, вентиляцию. Отделочник — делает ремонт: штукатурка, покраска, плитка и т.д. Дизайнер интерьера — отвечает за стиль, уют и финальный вид. 📌 Один человек не может качественно выполнять всё это одновременно.То же самое и с разработкой сайта: над хорошим проектом работает целая команда. А какие именно специалисты участвуют в этом, поговорим ниже ⤵️ Разделение труда: какие специалисты будут создавать ваш сайт под ключ Как мы выяснили, сайт делается не в одиночку. Тогда кто именно занимается создание сайта и в какой последовательности? 1. SEO-специалист Если сайт нацелен на получение органического трафика из поиска в браузерах, в работе над сайтом потребуется специалист по SEO-оптимизации. Что входит в его обязанности: Сбор и кластеризация семантики — это подбор ключевых слов, по которым пользователи ищут ваш товар или услугу, и их группировка по смыслу.Например, запросы «купить велосипед», «купить велосипед в Санкт-Петербурге» и «купить велосипед Stels» относятся к одной теме. Их можно объединить в одну группу и использовать на странице каталога, где речь идёт о продаже велосипедов. Составление SEO-заголовков и описания страниц — это определяет тему страницы, именно их вы видите в поиске. Заголовки (Title) и описания (Description) должны быть понятными, привлекательными и содержать ключевые слова. Формирование структуры сайта — SEO-специалист составляет структуру сайта исходя из иерархий ключевых запросов (см. пункт 1) Оптимизация технических параметров — ускорение загрузки страниц, настройка мета-тегов, корректные заголовки h1–h6, карта сайта, robots.txt и другие элементы, влияющие на индексацию. Составление технического задания для копирайтера — SEO-специалист прописывает какой контент нужно составить для страниц и сколько в нем должно быть ключевых слов. 2. Копирайтер После получения ТЗ от «сеошника» в работу включается копирайтер.Его задача — написать тексты, которые одновременно содержат ключевые слова, цепляют пользователя, расставляют смысловые акценты и доносят нарративы бренда. Копирайтер должен не просто вставить ключевые слова в текст — он передаёт смысл, ценность продукта или услуги, помогает объяснить преимущества, формирует доверие и побуждает к действию. Он пишет как продающие тексты для главной страницы и разделов с услугами, так и информационные статьи для блога или SEO-страницы под низкочастотные запросы. 3. Веб-дизайнер После того, как структура сайта утверждена, а тексты написаны, эстафету принимает веб-дизайнер. Он отвечает за визуальное оформление сайта — то, как будут выглядеть страницы, каким будет интерфейс, цвета, шрифты, кнопки и другие элементы. Работа веб-дизайнера — не просто «нарисовать что-то красивое», она содержит такие аспекты как: Правильное распределение текста с ключевыми словами — дизайнер создаёт структуру страниц таким образом, чтобы важные тексты, содержащие ключевые фразы, находились в заметных и логически обоснованных блоках. Приятный UI (пользовательский интерфейс) — создание красивого и визуально приятного интерфейса, который отражает фирменный стиль и айдентику компании. Качественный UX (пользовательский опыт) — вместе с красотой нужно совмещать удобство. Ведь правда, все мы любим когда кнопки находятся в интуитивно-понятном месте, в поле ввода выскакивают подсказки, элементы выбора удобно раскрываются, скрываются и т. д. Отрисовка состояний и подготовка макета к разработке — под состояниями имеются ввиду те анимации, которые проихсодят когда мы навелись на кнопку, изменили данные в поле ввода и т.д. 4. Веб-разработка Когда дизайн-макеты готовы, можно начать разработку сайта, а именно кодинг.Стоит сказать сразу, что веб-разработка делится на 2 части: Front-End — написание верстки (создание блоков, кнопок, вставка картинок, позиционирование всех этих элементов), а также написание запросов на сервер, к примеру, когда вы нажимаете кнопку «Отправить», Front-End говорит Back-End'у «Я тебе посылаю это сообщение, обработай его» Back-End — обработка запросов от «фронта» на сервере. Когда Back-End получает данные, он их обрабатывает и решает, отправить сообщение или нет, и если все хорошо, отправляет его адресату. Веб-разработчик играет важную роль в создании сайта под ключ, превращая дизайн-макеты в работающий продукт. Именно он обеспечивает функциональность сайта: чтобы формы отправлялись, фильтры работали, корзина считала товары, а страницы загружались быстро и без ошибок. 5. Маркетолог Продукт готов — самое время заняться его продвижением. Вы спросите: а как же SEO-специалист? Разве не он продвигает сайт?Все верно! Но SEO является бесплатным трафиком из поисковой системы, на развитие которого потребуется время: поисковым системам нужно добавить сайт в свою базу (индекс), определить его тематику и многое другое. А можно получить трафик на сайт под ключ благодаря контекстной рекламе, к примеру Яндекс.Директ. Именно этим занимается маркетолог. В его задачи входит настройка рекламных кампаний, анализ аналитики сайта (Яндекс.Метрика), составление ТЗ дизайнеру на креативы для рекламных баннеров. Рекламу можно настроить в виде строки в поисковой выдаче. Она будет помечена как «промо» и будет стоять на первых позициях. А также можно настроить рекламу вашего сайта с помощью РСЯ (рекламная сеть Яндекса). Она будет отображаться в виде баннеров на различных сайтах. Такие объявления помечены как «реклама» Выводы Исходя из такого списка задач у каждого специалисты, можно прийти к выводу, что создание сайта под ключ — исключительно командная работа, требующая команду, время и компетентность.

Лучшие плагины для WordPress: установи и улучшай свой сайт!

Лучшие плагины для WordPress: установи и улучшай свой сайт!

WordPress — самая популярная CMS в мире. Согласно последним данным, около 43,6% всех веб-сайтов в мире используют WordPress в качестве своей CMS, что составляет примерно 506,39 миллиона сайтов. В России WordPress также занимает лидирующие позиции. Согласно исследованиям, около 43,81% сайтов в доменной зоне .ru работают на WordPress, что соответствует примерно 566 000 доменов. Один из плюсов WordPress — обширный выбор плагинов для установки на свой сайт. Поэтому, сегодня разбираем лучшие бесплатные плагины, которые должен установить каждый! 1. WP Fastest Cache WP Fastest Cache — это один из самых популярных плагинов для кэширования WordPress, который помогает значительно ускорить загрузку страниц. Он создает статические HTML-версии страниц, сокращая нагрузку на сервер и уменьшая время отклика. После установки потребуется определенная настройка плагина. Правильную настройку можно забрать в моем Telegram-канале бесплатно! 2. Robin image optimizer Продолжаем тему оптимизации и на очереди у нас один из самых важных аспектов — оптимизация изображений. Про важность контроля над весом изображений я писал отдельную статью «Как вы тратите деньги при загрузке изображений на сайт?» Robin image optimizer имеет достаточно простую настройку и позволяет оптимизировать изображения двумя способами: Массовая оптимизация — сжатие всех изображений на сайте сразу. Выборочная оптимизация — сжатие выбранной картинки в разделе «Медиафайлы». Настройку плагина можно также забрать в моем Telegram-канале! 3. All-in-One WP Migration and Backup All-in-One WP Migration and Backup — удобный плагин для создания резервных копий сайта и переноса с помощью всего одного файла формата .wpress. У плагина есть 3 основных действия: Экспорт — создание новой резервной копии и скачивание на ваш ПК. Импорт — загрузка скачанного файла на другом сайте. Данное действие полностью перезаписывает весь сайт на тот, что был скопирован. Очень удобно при переносах. Резервные копии — создание резервной копии без скачивания на ПК. 4. Yoast Seo Yoast SEO — это самый популярный SEO-плагин для WordPress, который помогает оптимизировать сайт и повышать его позиции в поисковой выдаче. Плагин предоставляет достаточно обширные возможности, вот некоторые из них: Настройку тегов title и decription. Запрет или разрешение на индексацию различных страниц. Настройка микрозазметки Open Graph для отображения в социальных сетях. Анализ контента и мета-тегов. 5. Плагины для админки Удобство при администрировании сайта — один из важнейших моментов для эффективного менеджмента контента. Ниже будут несколько плагинов для вашей панели администратора WordPress: Yoast Duplicate Post — позволяет клонировать уже созданную запись. Пример: у вас есть заполненный товар и нужно создать похожий. Просто нажимаем «Клонировать» и товар копируется со всеми уже заполненными полями. Меняем то, что нужно и публикуем! Post Types Order — позволяет менять порядок вывода записей, ведь по умолчанию WordPress выводит записи от более новых к более старым без выбора порядка. Admin Menu Editor — позволяет настроить боковую панель меню и сделать ее более удобной для навигации. Про этот плагин писал достаточно подробную статью «Как сделать админку WordPress приятнее и понятнее: плагин Admin Menu Editor». Понравилась статья? Тогда подписывайтесь на мой Telegram-канал о создании сайтов. Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!

Как вы тратите деньги при загрузке изображений на сайт?

Как вы тратите деньги при загрузке изображений на сайт?

При передаче сайта клиенту и последующем администрировании с его стороны, я замечаю одну и ту же ошибку: бездумная загрузка изображений на сайт, вес которых является слишком большим и как следствие вызывает множество проблем: от трат ресурсов хостинга до худшей позиции в поиске. Сегодня разберемся, как бездумная загрузка изображений тратит ваши деньги и как буквально в пару кликов избежать этого. ⤵ Что может быть не так в загрузке изображений? Изображения — достаточно ресурсоемкие элементы, вес которых занимает основную часть общего размера страницы сайта. Для быстрой загрузки сайта общий вес страницы должен занимать максимум 4-5 МБ. Хотя само собой, в зависимости от специфики сайта, это значение может несколько превышаться. Один из моих клиентов на днях загрузил на сайт картинку, вес которой составляет 7 МБ, а ведь это всего одна из картинок на странице. Проверить вес своего сайта можно на сервисе Pingdom Test.Просто вставьте ссылку и запустите тест. Размер страницы при загрузке будет отображаться в поле «Page size». На что влияет вес изображений и как тратятся ваши деньги? ► Долгая загрузка сайта Этот пункт можно назвать самым важным, так как он вызывает целый ряд проблем: Уход пользователей с сайта — никто не будет ждать долгую загрузку, как следствие теряем потенциального клиента. Низкие позиции в поисковой выдаче (SEO) — поисковые системы, такие как Google, учитывают скорость загрузки страниц как один из факторов ранжирования. Повышенная нагрузка на сервер — медленная загрузка может быть связана с высокими затратами ресурсов на сервере. Это приводит к перегрузке серверов. ► Трата ресурсов хостинга Мы арендуем у провайдера хостинг в рамках определенного тарифа, предусматривающего выделенные ресурсы в установленном объеме.Да-да, хостинг не резиновый) 🤫 Соответственно, чем большего размера мы загружаем изображения, тем быстрее исчерпываем ресурс памяти хостинга. Как следствие, это вызывает потребность покупать более дорогой тариф. Да, этого можно не бояться на мелких сайтах, но, условный интернет магазин может занимать в разы больше. ► Проблемы с пользовательским опытом Мобильный трафик — на мобильных устройствах пользователи особенно чувствительны к медленным сайтам. Ожидание загрузки страниц на мобильных устройствах может вызвать негативный опыт и отказы. Мобильные пользователи могут быть особенно склонны покидать сайт при долгой загрузке. 👉 Дополнение: Google в своих исследованиях отмечает, что 53% пользователей покидают сайт, если он не загружается за 3 секунды. Это особенно важно для бизнеса, где мобильная аудитория составляет до 60-70% трафика.Читать полностью Как оптимизировать изображения и избежать проблем? Проанализировать вес и размер изображений можно следующими способами: Просмотр элементов через DevTools, если разбираетесь в этом Просмотр информации о изображениях через медиатеку вашей CMS Для этого можно использовать различные сервисы, могу порекомендовать сервис I Love IMG. Для работы с ним, в основном понадобятся 2 инструмента: При сжатии просто выбираем набор нужных изображений и скачиваем уже сжатые. Сжатие происходит без потери качества. При изменении размера выбираем также процентное соотношение сжатия. После чего можно также дополнительно сжать картинку. Результат: 26.99 КБ ➡ 3.42 КБ! ⚠ Предупреждение: будьте осторожны с изменением размера, так-как нужно понимать на какие элементы вы будете добавлять эти картинки. Если на большие и сожмете изображение в маленький размер, оно будет расстягиваться и отображаться с ужасным качеством. ► Формат WEBP — Google одобряет WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве. Конвертировать в WebP можно практически все изображения, кроме маленьких по размеру или иконок. После чего полноценно использовать на сайте.Для конвертации можно использовать популярный сервис cloudconvert. Конвертируем одну из картинок из формата jpg и получаем 1.1 МБ вместо 1.5 МБ без видимой потери качества! Итоги Оптимизация изображений на сайте — это не просто рекомендация, а необходимость, которая помогает избежать потерь денег и улучшить пользовательский опыт. Важно помнить: ► Вес изображений влияет на скорость загрузки — чем тяжелее файлы, тем дольше грузится сайт, что приводит к потере клиентов и ухудшению позиций в поисковой выдаче. ► Неправильная загрузка изображений увеличивает затраты — лишний вес расходует ресурсы хостинга, заставляя платить за более дорогие тарифы. ► Плохая оптимизация портит пользовательский опыт — особенно на мобильных устройствах, где скорость загрузки критически важна. Подписывайтесь на мой Telegram-канал. Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!

Все статьи

Свяжитесь
со мной

Обсудим ваш проект вместе

Где лучше с вами связаться?