Современный человек привык к скорости — быстрая доставка, мгновенный вызов такси, покупка в один клик. Мы ценим время и хотим получать всё сразу. Поэтому, когда сайт загружается медленно, терпения хватает ненадолго. Именно скорость загрузки сегодня становится одним из ключевых факторов успеха любого онлайн-ресурса.
Как проверить скорость загрузки вашего сайта?
Для проверки скорости загрузки сайта можно использовать 2 популярных сервиса:
Google Page Speed
Google Page Speed — сервис от Google, который анализирует насколько быстро загружается сайт по шкале от 0 до 100 для двух типов устройств: компьютера и мобильных. Он оценивает технические параметры, влияющие на производительность (время ответа сервера, вес изображений, скрипты, адаптацию под мобильные устройства) и выдаёт рекомендации по улучшению.
Помимо замеров скорости загрузки сайта, Google Page Speed оценивает:
Специальные возможности — то, насколько сайт адаптирован под людей с ограниченными возможностями (слепо-глухо-немых)
Рекомендации — список советов, которые сервис предлагает после анализа вашего сайта
Поисковая оптимизация — показатель SEO-оптимизации сайта
Интерфейс Google Page Speed
Pingdom Website Speed Test
Pingdom Website Speed Test — еще один популярный сервис для измерения скорости загрузки сайта. В отличие от Google PageSpeed, Pingdom делает упор на реальное время загрузки, вес структуру страницы, а не только на технические показатели.
Интерфейс Pingdom Website Speed Test. На скриншоте выделены показатели загрузки.
Это действительно удобно, ведь мы видим конкретные цифры, с помощью которых можно анализировать скорость загрузки сайта. К примеру, Page size (вес страницы) лучше держать в пределах 5-6 MB, а Load time (фактическое время загрузки) в пределах 3-4 s.
Как ускорить сайт, если вы не программист?
Способ 1: Оптимизация изображений
Одна из самых частых причин долгой загрузки сайта являются изображения, а именно их вес.Вес изображения больше всего зависит от его разрешения и формата.
Что можно сделать для снижения веса изображений и как следствие лучшей скорости загрузки страницы:
Снижения разрешения изображения — зачастую, при скачивании изображения для загрузки на сайт, его разрешение является очень высоким (4100 x 5400 и т.д.).Наша задача — уменьшить его. Для сайта будет достаточно не более 2500px в ширину. Это можно удобно сделать с помощью Инструмента «изменить размер» сервиса ILoveIMG
Сжатие изображения — изображения в формате PNG или JPEG имеют много лишнего в своих данных, от чего имеют большой вес. Сжать их без потери качества можно с помощью Инструмента «сжать изображение» сервиса ILoveIMG
Конвертация в другой формат — конвертация изображения в современные форматы webp или avif значительно уменьшит их размер. Сделать это можно с помощью сервиса Cloud Convert
Способ 2: Кеширование
Я думаю, вы не раз слышали такой совет для улучшения скорости загрузки сайта, но как им воспользоваться? Для начала разберемся, что такое кеш.
Кеш — способ временного хранения данных сайта для ускорения его загрузки. Кеш бывает двух основных видов:
Кеш браузера (клиентский) — когда человек впервые заходит на сайт в память его браузера скачиваются изображения, стили и скрипты вашего сайта. При следующем визите браузер не загружает их заново с сервера, а берёт из своей памяти. Это позволяет ускорить загрузку страниц сайта.
Кеш сервера — обычно WordPress (и другие CMS) формирует страницу «на лету» — каждый раз, когда кто-то её открывает. Кеширование на сервере помогает создать «копию страниц» сайта прям на вашем хостинге и открывать их быстрее для всех пользователей.
Как настроить кеширование?
Звучит страшновато, но на самом деле настроить кеширование для ускорения загрузки сайта несложно. Для этого можно использовать специальные плагины для вашей CMS. Рассмотрим плагин «WP Fastest Cache» для WordPress. Данный плагин позволяет настроить кеширование достаточно просто и ускорить загрузку сайта. О нем я рассказывал в статье Лучшие плагины для WordPress: установи и улучшай свой сайт!
Как установить и настроить плагин WP Fastest Cache?
Для его установки перейдите в админ-панель WordPress, наведитесь на раздел «Плагины» в левом меню и нажмите на «Добавить плагин».
После этого введите «WP Fastest Cache» в поле «Поиск плагинов». Далее нажмите «Установить сейчас» и «Активировать».
После установки и активации в левом меню появится WP Fastest Cache. Нажимаем на него и переходим к настройке плагина. Ее можно бесплатно забрать в моем Telegram-канале. Кликайте на ссылку и ускоряйте свой сайт с помощью правильного кеширования.
Способ 3: Удаление лишних плагинов
В предыдущем пункте мы разобрались, как установить и настроить плагин для кэширования, чтобы ускорить загрузку сайта.Но довольно часто я замечаю, что на сайтах клиентов установлено слишком много плагинов — многие из них не используются вовсе, а только создают лишнюю нагрузку и замедляют работу сайта. В таком случае, неиспользуемые плагины лучше удалить.
Лучше всего перед удалением плагинов проконсультироваться с разработчиком вашего сайта или со мной.Я помогу безопасно определить, какие плагины действительно замедляют работу, а какие — нужны для корректной работы сайта. Напишите в личные сообщения и получите консультацию бесплатно.
Какие плагины точно не стоит удалять?
Advanced Custom Fields и Carbon Fields — плагины, которые создают кастомные поля для редактирования контента в админ-панели сайта.
Yoast SEO — плагин для настройки SEO на сайте
Contact Form 7 и WP Mail SMTP — плагины, отвечающие за отправку заявок из форм обратной связи
Как удалить плагин?
Удаление плагина снова разберем на примере CMS WordPress. Перейдите в админ-панель WordPress, наведитесь на раздел «Плагины» в левом меню и нажмите на него.
После этого пролистните до нужно плагина и нажмите сначала «Деактивировать», а потом «Удалить».
Шаг 1: Деактивируем плагин
Шаг 2: Удаляем плагин
Таким образом мы избавимся от «лишнего» и ускорим скорость загрузки сайта, ведь каждый плагин тянет свои стили, скрипты и другие ресурсы, что замедляет загрузку.
Вывод
Три способа, которые мы рассмотрели — оптимизация изображений, кэширование и удаление лишних плагинов — уже помогают ускорить сайт без навыков программирования.
Для более глубокой оптимизации, включая работу с кодом и скриптами, понадобится помощь разработчика. Если хотите ускорить сайт напишите мне в Telegram — я помогу проанализировать ваш сайт и предложу конкретные шаги для улучшения скорости.
Представьте, вам сделали сайт, но далее встает вопрос: а на каком хостинге его разместить, да так чтоб было недорого, работал без перебоев и с хорошей скоростью?
На самом деле, подбор хостинга — несложный процесс. Тем более сегодня, когда большинство популярных провайдеров предлагают вполне хорошие условия, подходящие под 80% сайтов.Но всё же понимать ключевые критерии при выборе — это огромный плюс. Это избавит от лишней головной боли в будущем и минимизирует риски.
Скажу как есть: как правило, вопросом подбора хостинга заказчик не задается, так-как мы с командой, выполняя разработку сайта «под ключ» берём этот вопрос на себя и подбираем хостинг под конкретную задачу. Но, как я уже говорил выше, знать об этом моменте самому — хороший плюс.
Что такое хостинг и зачем он нужен?
Начнем с базы. Если кто-то не знал, чтобы ваш сайт работал и был доступен в интернете, ему нужно место для хранения — файлы, изображения, база данных, письма, CMS — всё это размещается на сервере. Именно это место предоставляет хостинг.
Услуга платная, потому что вы арендуете часть вычислительных ресурсов (пространство, трафик, обработку запросов и т.д.).
На вопрос: «существует ли бесплатные хостинги?», я могу ответить «да», но есть свои нюансы. Подробнее можно прочитать в посте «Как опубликовать свой сайт в интернете бесплатно?» в моем Telegram-канале.
На практике большинство современных хостингов просты в использовании. Их интерфейс представлен панелью администратора, в которой разберётся практически каждый.
На картинке выше — пример стандартной админ-панели хостинга.Можно увидеть баланс, действующий тариф, количество сайтов, занятое место, ваши домены, сайты и многое другое.
Какие бывают виды хостингов?
Не смотря на то, что суть всех хостингов одна — позволить вам использовать вычислительные мощности для своего проекта, обеспечивая его стабильную работу в сети, хостинги бывают разных видов.Мы рассмотрим самые основные, узнаем их плюсы и минусы, а также подробно поговорим про тот, который с большей долей вероятности подойдет именно вам ⤵️
1. Виртуальный хостинг
Виртуальный хостинг (так же известный как «веб-хостинг») представляет собой наиболее доступный и популярный способ аренды. На виртуальном хостинге такие ресурсы как процессорное время, оперативная память, дисковое пространство и сетевое подключение распределяются между всеми сайтами всех пользователей, которые размещены на данном сервере. При выборе тарифа вы сможете опираться только на такие параметры как дисковое пространство (для файлов сайта), количество баз данных, почтовая квота и количество самих сайтов.
Плюсы виртуального хостинга:
Дешевизна — благодаря совместному использованию ресурсов, виртуальный хостинг становится недорогим решением под размещение сайта
Простота в управлении — как видно на картинке выше, виртуальный хостинг очень прост для управления: понятные разделы, удобный интерфейс, ничего лишнего
Автоматическое обслуживание — провайдер обычно берет на себя обслуживание сервера и его обновление
Универсальность — виртуальный хостинг подходит под 80% сайтов
Минусы виртуального хостинга:
Отсутствие гибкости — невозможность гибкой настройки под ресурсоемкие сайты, установки своего ПО
Ограниченные ресурсы — производительность сайта может зависеть от нагрузки других сайтов на том же сервере
Виртуальный хостинг — это оптимальное решение для малого и среднего бизнеса, особенно если ваш сайт не требует гибкой настройки сервера.Он недорогой, простой в управлении и не требует технических знаний, что делает его идеальным выбором для большинства.
Скорее всего, такой вид хостинга для сайта подойдет именно вам, уважаемый читатель!Про то, как выбрать виртуальный хостинг в ближайшее время напишу пост в своем Telegram-канале про сайты простыми словами. Подписывайтесь, чтобы не пропустить!
2. VPS / VDS (виртуальный выделенный сервер)
VPS (Virtual Private Server) или VDS — это следующий уровень хостинга по сравнению с обычным виртуальным. Здесь вы всё так же делите сервер с другими пользователями, но получаете отдельную часть ресурсов, изолированную от соседей. Это значит, что ваш сайт не будет «тормозить» из-за чужих проектов на сервере, как это может быть на виртуалке.
На VPS вы уже сами управляете сервером: устанавливаете нужное ПО, настраиваете окружение, обновляете компоненты.
Плюсы VPS:
Гибкость — можно установить всё, что нужно: PHP нужной версии, Node.js, Docker, Redis, собственные конфигурации
Выделенные ресурсы — оперативная память, процессор и дисковое пространство закреплены только за вами
Масштабируемость — легко увеличить ресурсы по мере роста проекта
Минусы VPS:
Требует навыков администрирования — нужно понимать, как работать с Linux-сервером, или нанимать специалиста на постоянную поддержку
Дорогая стоимость — дороже, чем виртуальный хостинг — особенно с хорошими параметрами
VPS подходит для тех, у кого сайт активно растет, есть нестандартные задачи или нужна повышенная стабильность. Если у вас интернет-магазин с высокой нагрузкой и тысячами товаров, веб-сервис или проект с большим функционалом — VPS будет отличным выбором. Но будьте готовы к тому, что за сервером придётся следить.
3. Облачный хостинг
Облачный хостинг является современным форматом размещения сайта, где ресурсы берутся не с одного конкретного сервера, а из распределённой сети серверов (облака). Это обеспечивает высокую отказоустойчивость, гибкость и масштабируемость.
Плюсы облачного хостинга:
Надёжность — если один сервер выходит из строя, сайт продолжает работать через другие
Гибкая настройка — можно платить только за использованные ресурсы, удобно под нагрузки
Подходит под любой тип проекта — от небольших лендингов до нагруженных приложений
Минусы облачного хостинга:
Часто сложный интерфейс — не для новичков, нужно разбираться в структуре
Требует опыта — как и VPS, может понадобиться помощь админа, который будет заниматься поддержой, а это дополнительные траты
Пример админ-панели облачного хостинга можно увидеть ниже ⤵️
Облачный хостинг — это уже уровень выше VPS. Он подойдёт, если у вас нагруженный проект, веб-приложение или бизнес с нестабильной нагрузкой (например, сезонные всплески трафика). Но для запуска простого сайта такой формат чаще всего неоправдан.
В этой статье мы по шагам разобрались какой вид хостинга выбрать, исходя из плюсов и минусов каждого. Как я говорил ранее, для большинства людей подойдет именно виртуальный хостинг — это недорого, не нужен администратор, а также подходит для 80% сайтов.
О том, как выбрать виртуальный хостинг смотрите в моем 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 — самая популярная 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-канал. Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!
Семантика — это не просто красивое слово, а важнейший инструмент, который улучшает восприятие сайта поисковыми системами и самим пользователем. В этой статье простым языком объясню, почему семантика важна не только для разработчиков, но и для контент-мейкеров, маркетологов, а также тех, кто ведет блог или пишет статьи. Разберемся, что это такое, и как можно начать использовать семантику прямо сейчас ⤵️
Что такое семантика?
Семантика — широкое понятие в мире веб-разработки и продвижения. Мы же с вами будем говорить о семантике в текстах и коде (верстке) сайта, которая представляет из себя правильное назначение ролей элементам. То-есть, важно явно указывать, что этот элемент — заголовок, а этот — нумерованный список и т. д. При этом, элементы должны идти в правильной последовательности друг за другом, имея четкую структуру.
Такой подход позволяет:
Улучшать SEO и видимость в поиске — поисковики намного лучше понимают назначение элементов
Попадать в блок быстрых ответов (Featured Snippets)
Оптимизировать рекламные и маркетинговые кампании — поисковые системы будут использовать семантику для точного понимания назначения страниц
Основные принципы и использование семантики контента
Правильная структура семантики заключается в следующем:
► Корректное использование заголовков
Используйте заголовок первого порядка (<h1>) на странице только один раз — это главный заголовок
Заголовками блоков будут <h2>, а уже подзаголовки этого блока <h3> и так далее по вложенности
► Разделение контента на типы:
<a> — для ссылок
<nav> — для элементов навигации (меню и т.д.)
Списки нужно делать через <ul> (маркированные точкой) и <ol> (нумерованные по порядку)
<strong> — для выделения важных элементов жирным
► Разделение блоков и контентных единиц:
Использование <header>, <footer>, <section>, <article>, <aside> вместо обычного <div>
С полным списком семантических тегов и примеров можете ознакомиться в памятке по семантике, которую можно забрать в моем Telegram-канале.
Почему семантика важна при создании контента и статей?
Многие авторы статей, в том числе на vc, допускают типичные ошибки:
Вкладывают один <h2> в другой
Пишут ссылки в абзацах (<p>) в виде обычного текста https://kadweb.ru вместо вставки в тег <a>. Это лишает пользователя удобства нажатия на ссылку, помимо плохого восприятия поисковиками
Делают списки в абзацах или вовсе заголовках, вместо <ul> и <ol>
Как известно всем, блог и его статьи являются одним из ключевых инструментов продвижения сайта. За счет статей мы индексируем как можно большее количество страниц нашего сайта, но при этом, для действительно хорошего результата мы должны правильно подавать контент, придерживаясь семантики. Именно так поисковые системы смогут как можно лучше воспринимать страницу и показывать ее при большем количестве запросов. Также возрастает шанс попасть в блок быстрых ответов (Featured Snippets).
Почему семантика важна в верстке?
Ровно для того же, что и в статьях — для лучшего восприятия поисковой системой. Но на разработчике лежит куда больше ответственности, так как при создании сайта важно семантически правильно сверстать абсолютно все страницы сайта. Если на сайте есть функционал блога — предусмотреть редактор так, чтоб администратор мог как можно более комфортно заполнять статью, используя элементы семантически правильно.
На просторах интернета не редко встречаются сайты, где все сделано тегами <div> и максимум, что использует разработчик, помимо этого тега — это тег <a>, просто, чтоб сделать ссылки кликабельными. Если у вас уже есть сайт и вы заметили, что он создан одинаковыми тегами, без принципа семантической верстки, можно смело сказать, что вы наткнулись на некомпетентного исполнителя.
При этом, сайты, созданные на конструкторе, практически всегда лишены правильной семантики. Рассмотрим пример сайта на Tilda, на котором элементы сделаны преимущество, с помощью <div>, в то время как элемент должен быть сделан с помощью списка <ul>.
Итоги и выводы
► Семантика в коде улучшает индексацию, удобство работы с сайтом и его доступность. Использование <header>, <article>, <nav> и других тегов делает сайт понятнее для поисковых систем.
► Семантика в текстах помогает авторам правильно оформлять статьи, улучшает восприятие информации пользователями и поисковыми системами.
► Использование семантики — несложный, но при этом эффективный способ улучшить свой сайт.
Что делать дальше?
► Проверить верстку своего сайта на соответствие семантическим принципам.
► Улучшать структуру своего контента.
► Забрать бесплатную памятку по семантике в моем Telegram-канале. В нем рассказываю о разработке сайтов простыми словами. Подписывайтесь, будет интересно!
При работе с админ-панелями сайтов на WordPress я часто сталкивался с хаосом в боковом меню. Такое количество разделов в хаотичном порядке буквально сбивает с толку. Особенно такая админка будет тяжела к пониманию для обычного заказчика.
Сегодня разберемся, как это исправить и сделать меню админки в разы удобнее.
Используем плагин Admin Menu Editor.
Качаем, активируем и заходим в настройки.
В настройках мы видим различные функции, но в основном пригодятся две:
🟢 New Separator - добавляет разделяющую линию между элементами меню🔴 Delete Menu - скрывает любой элемент меню
Далее настроим все под себя. К примеру, я скрыл разделы «Записи» и «Комментарии», а также выстроил пункты меню в удобном порядке: страницы, типы записей, страницы ACF-опций, плагины и т.д.
Уже с этими действиями админка будет выглядеть лучше, но есть небольшая загвоздка. Стандартный разделитель пунктов меню в WordPress (Separator) не имеет цвета, поэтому добавим его вручную.
Для этого создадим отдельный css файл для стилей админки, к примеру, admin-style.css и поместим в него следующее:
#adminmenuli.wp-menu-separator {
height: auto;
width: 100%;
margin: 15px;
}
#adminmenudiv.separator {
height: 1px;
background: rgba(255, 255, 255, .4);
}
Здесь я немного увеличил отступы от Separator и добавил ему фоновый цвет.
Далее нужно подключить этот файл на хуке «admin_enqueue_scripts» в файле functions.php
function my_admin_styles() {
$theme_path = get_template_directory();
$theme_url = get_template_directory_uri();
wp_enqueue_style(
'admin-style',
$theme_url . '/css/admin-style.css',
[],
filemtime($theme_path . '/css/admin-style.css'),
);
}
add_action('admin_enqueue_scripts', 'my_admin_styles');
Теперь админ-панель стала гораздо понятнее благодаря структурированному меню и разделению пунктов с помощью цветных линий.
Вот так, всего за несколько минут можно сделать админ-панель WordPress гораздо удобнее. Многие разработчики пренебрегают этим, но поверьте, так вы в разы облегчите навигацию по админке для заказчика.
Понравилась статья?
Тогда подписывайтесь на мой Telegram-канал о создании сайтов. Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!
На моей памяти было достаточно много проектов и во многих из них заказчики допускают одни и те же ошибки.Да-да, вы не ослышались, ошибки может допускать не только исполнитель работ, но и сам заказчик, ведь от последнего зависит досточно много моментов: от правильной постановки задачи до регулярной обратной связи по ходу работ.
О ключевых ошибках заказчиков поговорим сегодня достаточно подробно.
1. Отсутствие четкого ТЗ
Пожалуй, самый важный пункт из всех. Правильная постановка задачи - залог успеха, как ни крути и этот фактор можно применить не только к разработке сайтов. Мы не можем прийти к, условному, дизайнеру интерьера и сказать «Хочу как в той квартире», показав фотографии квартиры родственников или знакомых и при этом получить полностью удовлетворяющий результат.
Точно так же и при создании сайта, достаточно часто заказчик приходит с запросом «Хочу как у моего конкурента» не предоставляя уточняющих деталей, желаний и четкого результата, который хочет получить.Это также влечет за собой постоянные незапланированные нововведения по ходу работ, которые никак не обсуждались ранее.
Именно поэтому перед заказом сайта важно создать или хотя бы сформулировать в голове четкое техническое задание, которое вы сможете предоставить исполнителю.
2. Сжатые сроки и экономия бюджета
Это пункт является достаточно массовым, особенно для нашего менталитета, который привык экономить на всем.
Само собой, сжатие сроков и ограниченный бюджет зачастую являются вынужденным ограничением в силу различных факторов, и даже под такие случаи я и моя команда подбираем подходящие решения.
Но вместе с тем стоит понимать, что результат может быть не таким топовым, каким вы его ожидали, так-как ресурсы и время достаточно ограничены. Именно поэтому, если есть возможность, не нужно стараться экономить на сайте.
3. «Одноразовое вложение»
Из пункта про экономию перетекаем в мнение о том, что сайт является одноразовым вложением. Мол, один раз заплатил за создание и все.Но это суждение неверное, как минимум будут затраты на оплату домена и хостинга.Как максимум необходимость дальнейших доработок исходя из поведения настоящих пользователей и эффективности сайта.
Я слежу за сайтами, которые уже работают в интернете и всегда информирую заказчиков по нужным доработкам.
4. Некачественная обратная связь
Важность этого пункта нельзя переоценить, ведь по ходу работ постоянно возникает надобность о запросе контента, информации о компании, согласовании части проделанной работы.
И если заказчик отвечает невнятно, не предоставляет нужную информацию или вовсе редко выходит на связь, то это вызывает торможение скорости работ и растерянность исполнителя.
5. Слишком большой акцент на красоте дизайна
Дизайн сайта делится на 2 составляющих:
UI (пользовательский интерфейс)Она отвечает за внешний вид и оформление интерфейса: как выглядят кнопки, шрифты, цвета, иконки и другие визуальные элементы. Это про то, чтобы дизайн был красивым, гармоничным и интуитивно понятным.На этой составляющей и любят заострить внимание заказчики, ведь все «хотят красиво».
Но вместе с этим есть и другая составляющая.
UX (пользовательский опыт)Отвечает за то, как пользователь ощущает взаимодействие с сайтом. Простыми словами, это про удобство, простоту, логику и удовольствие от использования. Если сайт понятный, кнопки там, где вы их ожидаете, текст легко читается, а действия выполняются без лишних усилий — значит, UX продуман хорошо.
Поэтому не стоит забывать о UX, отдавая внимание только красоте интерфейса.
Вывод
Заказ сайта — это не просто разовая сделка, а процесс, в котором от заказчика зависит не меньше, чем от исполнителя. Избежав типичных ошибок, можно получить действительно качественный и эффективный продукт.
Понравилась статья?
Тогда подписывайтесь на мой Telegram-канал о создании сайтов.Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!
