В этом году главной стратегией SEO стала оптимизация контента в целом и картинок в частности. Картинки занимают около 90% веса всей страницы и влияют на скорость ее загрузки.
Скорость загрузки страницы
Скорость сайта и глубина просмотров тесно связаны между собой и очень важны для привлечения поискового трафика. Пользователи не хотят ждать более 2 секунд. Особенно в условиях повальной мобилизации контента. Поэтому оптимизаторы делают все для того, чтобы снизить скорость загрузки.
Чаще всего сайты тормозят из-за тяжелых картинок. Чтобы проверить общий вес фотографий — воспользуйтесь сервисом Image Size Checker.
Как измерить скорость сайта
Cкорость сайта влияет на page rank и другие бизнес-показатели. Измерить скорость своего сайта можно с помощью инструмента Google Pagespeed.
Если по данным pagespeed сайт получил менее 85 баллов из 100, то его нужно немедленно отправлять на оптимизацию.
Юзабилити
С точки зрения юзабилити все изображения на сайте или его мобильной версии должны быть responsive (отзывчивыми), соответствовать контенту и быть уникальными.
Для отзывчивых картинок:
max-width: 100% Обязательным условием остаются мета-теги alt и title. Title помогает поисковику понять смысл картинки, а alt делает картинку user-friendly.
Пример правильного alt и title:
<img src = "images/image.png" alt="дом в горах" title = "Дом на горе Говерла, Карпаты">
Социальные мета-теги
Социальные сети все еще в тренде. Социализация сайтов повышает не только конверсию, но и место в выдаче. Для анонсов в соц. сетях используется протокол Open Graph. А именно мета-тег og:image позволяет выбрать картинку для иллюстрации социального поста.
<meta property="og:image" content="http://example.com/link-to-image.jpg" />
Общие рекомендации
Оптимизация изображений
Пора забыть об атрибутах width и height. Больше никаких изображений размером 5000х4000 втиснутых в 500х400. Каждое изображение должно соответствовать своему размеру в html-документе.
Нужно приучить себя сохранять малоцветные изображения в PNG вместо JPG.
Обязательно оптимизировать картинки с помощью инструментов JpegTran, Pagespeed Image Optimizer и других.
Если сайт развернут на сервере apache с поддержкой модуля Google Pagespeed, то в файле .htaccess можно прописать следующий код:
<IfModule pagespeed_module> ModPagespeed on ModPagespeedEnableFilters rewrite_images </IfModule> Этот фильтр включает в себя рекомпрессию картинок, конвертацию из jpg в png, конвертацию из обычного jpg в прогрессивный и изменение размеров. Подробнее об использовании в документации Google.
Облачные хранилища
Использовать облачные хранилища для картинок и сэкономить кучу времени для сайтов с большим запасом фотографий. Хотя это и требует дополнительных капиталовложений.
<?php $file = upload_image_to_cloud($_FILES['image']['tmp_name']); ?>
Sitemap для картинок
Создать отдельную sitemap для картинок или добавить информацию о них в существующую. Тогда поисковики быстрее проиндексируют картинки. Пример генератора sitemap.
Метод спрайтов
Использовать метод спрайтов, чтобы сократить количество http-запросов.
.icon { width: 16px; height: 16px; float: left; background: url(icons.gif) no-repeat; } .first .icon { background-position: 0 0px; /* по умолчанию */ cursor: pointer; } .second.icon { background-position: 0 -16px; /* div сдвигается вверх на 16px */ cursor: pointer; } Конспект
- Картинки занимают 90% веса страницы и влияют на скорость ее загрузки.
- Чтобы измерить скорость сайта используйте Google Pagespeed
- Для анонсов в соц. сетях используйте Open Graph.
- Облачные хранилища для картинок экономят время загрузки.
- Для картинок нужен отдельный sitemap.
ссылка на оригинал статьи http://habrahabr.ru/post/259931/
Добавить комментарий