Оптимизация кода сайта - что за зверь?
Подводные камни на пути к прекрасному
С каждым годом растет количество интернет-пользователей, использующих мобильные телефоны, небольшие нет-буки и планшеты. Это удобно и практично – можно не отрываться от «мира сего» ни в командировках, ни в дороге, ни в поездках на работу – с работы. Да даже банально удобнее просматривать любимые сайты и паблики, лежа на диване, нежели у стационарного компьютера. Не говоря уже о просмотре роликов или серфинге сайтов в горячей ванной, используя смартфон. Мммм….
В общем, так или иначе, все чаще отдается предпочтение гаджетам с невысокой шириной экрана, в виду их компактности. Раньше были очень популярны ( да и сейчас, чего греха таить, они активно используются) мобильные версии сайтов. Сейчас же все больше разработчиков и владельцев сайтов признают удобство адаптивной гибкой верстки. Написал код один раз под разные разрешения экрана и отлично. Здесь только один минус. Что может сделать сайт более красивым и привлекательным? Красочные «сочные» картинки. Но в них и заключается главный подводный камень.
Только необходимое?
Предположим, что у нас есть красивый баннер на странице, который изумительно смотрится на экране шириной, к примеру 1366. Чтобы картинка подстроилась под другие разрешения, мы прописываем :
img {width: 100%;}
Вроде бы, все правильно… Но если открыть страницу с мобильного телефона, то страница будет грузиться на 3-4 секунды дольше. Вряд ли посетители нашего сайта захотят ждать так долго. Можно вообще не показывать картинку на мобильных устройствах. Прописываем через медиа запрос:
@media screen and (max-width: 600px) { img {display:none;}}
Готово, теперь картинка не отображается на экране смартфона. Страница стала грузиться намного быстрее, за счет того, что браузеру не нужно тратить время на отрисовку изображения. Но не спешите ликовать – картинка все равно скачивается, съедая трафик пользователя. А трафик мобильного интернета, зачастую, ограничен рамками выбранного пользователем размера. Выходит, наша картинка, в прямом смысле, поедает деньги наших посетителей! Куда это годится?
Через фон?
Картинку, так же, можно прописать фоном. При определенном разрешении экрана, будет просто загружаться свой вариант изображения. Пишем:
.img-block { background: url(/адрес картинки) no-repeat center/cover; }
@media screen and (max-width: 600px) { .img-block { background: url(/адрес картинки) no-repeat top center; }
На первый взгляд, все идеально. Под каждую ширину экрана грузится та версия, которая необходима. Но! Представляете, сколько придется прописывать кода? Для каждой картинки, под разные медиа запросы… С ума сойти! А если у Вас как раз сайт, где разные картинки и есть большая часть контента? Ох, не завидую… =)
Так есть ли выход из этой ситуации? Более простой, не связанный с такими танталовыми муками?
Решение есть!
Все-таки, время не стоит на месте. Много талантливых людей, профессионалов в своем деле, занимались созданием отзывчивых сайтов и решением этой проблемы. При помощи специальных атрибутов к тегу img мы облегчаем жизнь и себе, и пользователям!
Под каждое указанное разрешение экрана будет грузится своя картинка!
Проверьте свой сайт!
Чтобы узнать, сколько трафика впустую расходует сайт, можно проделать следующие манипуляции.
- Заходим в Google Chrome в режиме инкогнито.
- Переходим: Инструменты разработчика (DevTools)/ Network/img
- Заходим на тестируемый сайт и видим результат.
Чтобы избежать этого, для начала проведите тест Тафта, проверьте Ваш сайт на скорость загрузки, оптимизируйте картинки и используйте новые атрибуты к ним! Давайте вместе экономить трафик наших посетителей!