Компания
  • Давайте знакомиться!
  • Наша команда
  • Партнеры
  • Вакансии
Услуги
  • Разработка сайтов
    • Сайты на 1С Битрикс
    • Landing Pages
    • Адаптивные сайты
    • Интернет-магазины
  • Продвижение сайтов
    • Продвижение сайта в ТОП 10
  • Реклама
  • Поддержка и развитие сайтов
    • Увеличение конверсии сайта
    • Стоимость разовой поддержки сайта
  • Брендинг и айдентика
  • Мобильные сайты
  • Приложения для сайтов
    • Калькулятор натяжных потолков
    • Калькулятор рольставен (рольставней)
    • Калькулятор деревянных окон
    • Калькулятор ПВХ окон онлайн
    • Калькулятор секционных ворот
  • Продвижение сайта в cоц. сетях
Портфолио
Клиенты
Блог
Контакты
Ещё
    Tomatys — Дизайн с усами.
    +7 (499) 112-34-82
    Заказать звонок
    • Разработка
    • Продвижение
    • Реклама
    • Кейсы
    • О компании
      • Давайте знакомиться!
      • Наша команда
      • Партнеры
      • Вакансии
    • Контакты
    Tomatys — Дизайн с усами.
    • Разработка
    • Продвижение
    • Реклама
    • Кейсы
    • О компании
      • Назад
      • О компании
      • Давайте знакомиться!
      • Наша команда
      • Партнеры
      • Вакансии
    • Контакты
    • +7 (499) 112-34-82
    Москва, ул. Горбунова д 2 стр 204, БЦ «Гранд Сетунь Плаза», офис 228
    hello@tomatys.com
    • Facebook
    • Вконтакте
    • Twitter
    • Instagram
    • Telegram

    Галина Бугаевская

    4 Ноября 2016

    Оптимизация кода сайта - что за зверь?

    Подводные камни на пути к прекрасному

    С каждым годом растет количество интернет-пользователей, использующих мобильные телефоны, небольшие нет-буки и планшеты. Это удобно и практично – можно не отрываться от «мира сего» ни в командировках, ни в дороге, ни в поездках на работу – с работы. Да даже банально удобнее просматривать любимые сайты и паблики, лежа на диване, нежели у стационарного компьютера. Не говоря уже о просмотре роликов или серфинге сайтов в горячей ванной, используя смартфон. Мммм….

    В общем, так или иначе, все чаще отдается предпочтение гаджетам с невысокой шириной экрана, в виду их компактности. Раньше были очень популярны ( да и сейчас, чего греха таить, они активно используются) мобильные версии сайтов. Сейчас же все больше разработчиков и владельцев сайтов признают удобство адаптивной гибкой верстки. Написал код один раз под разные разрешения экрана и отлично. Здесь только один минус. Что может сделать сайт более красивым и привлекательным? Красочные «сочные» картинки. Но в них и заключается главный подводный камень.

    Только необходимое?

    Предположим, что у нас есть красивый баннер на странице, который изумительно смотрится на экране шириной, к примеру 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
    • Заходим на тестируемый сайт и видим результат.

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


    Назад к спискуСледующий
    Tomatys — Дизайн с усами.
    Мы занимаемся разработкой сайтов для России и зарубежных рынков с 2011 года. Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют Томатус предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

    © 2011–2025
    Политика конфиденциальности

    Компания
    • О «Томатус»
    • Процесс
    • Кейсы
    • Наша команда
    • Вакансии
    • Блог
    • Контакты
    Брендинг
    • Логотипы
    • Фирменный стиль
    Разработка
    • Корпоративные сайты
    • Интернет-магазины
    • Сайты на 1С Битрикс
    • Адаптивные сайты
    Продвижение
    • Оптимизация сайта
    • Аудит эффективности
    • Продвижение в ТОП
    • Продвижение в регионах
    • Контекстная реклама
    Поддержка и развитие
    • Техническая поддержка
    • Комплексная поддержка
    • Разовые работы
    +7 (499) 112-34-82
    Оставить заявку