Оптимизация скорости сайта для улучшения позиций в поисковых системах.
Преимущества ускорения работы сайта на CS-Cart
SEO-оптимизация
Скорость загрузки страниц напрямую влияет на рейтинг сайта в поисковых системах.
Увеличение доходов
Быстрая загрузка сайта помогает не терять клиентов, что способствует увеличению продаж.
Комфорт пользователей
Оптимизация скорости сайта на CS-Cart улучшает опыт пользователей, особенно с мобильных устройств.
Улучшение клиентской лояльности
Оптимизированный сайт вызывает позитивные впечатления у пользователей, укрепляя доверие клиентов.
Методы ускорения сайтов на CS-Cart
Сжатие JS, CSS и HTML кода
Оптимизация изображений
Улучшение загрузки шрифтов
Кэширование на стороне сервера и клиента
Оптимизация баз данных
Адаптация под мобильные устройства
Оптимизация критического пути рендеринга
Настройка HTTPS и TLS
Перенос на более быстрый хостинг
Сервисы для тестирования скорости сайта
Этот сервис оценивает сайт по эффективности для настольной и мобильной версий и предлагает рекомендации по улучшению.
Административная панель
Многие CMS имеют встроенные инструменты для оценки производительности сайта по различным критериям.
Яндекс.Метрика
Универсальный сервис, который также сохраняет историю измерений производительности сайта.
Консоль браузера
В браузере Google Chrome есть встроенные инструменты для измерения скорости загрузки сайта.
Этапы ускорения сайта на CS-Cart
Процесс оптимизации
Выполнение комплекса работ по оптимизации кода, изображений, контента, сжатию и кэшированию.
Не теряйте время — оставьте заявку уже сегодня!
Наши специалисты проведут детальный анализ и оптимизируют скорость работы каждой страницы вашего сайта.
Как увеличить скорость работы сайта
Сообщите нам о своих потребностях
Позвоните нам или оставьте заявку на сайте, и мы свяжемся с вами для обсуждения деталей.
Заполните бриф
Сообщите нам о ваших потребностях и пожеланиях.
Доверьтесь нам
Наши профессионалы проведут все необходимые работы по ускорению и оптимизации вашего сайта.
Наши преимущества
15
300
Сайтов разработано за все время
250
Обширный опыт
Уже более 15 лет мы создаем профессиональные сайты.
Доверие клиентов
За нашими плечами более ста успешно выполненных проектов, с которыми можно ознакомиться в разделе примеров.
Этапная оплата
Мы принимаем оплату по завершении каждого этапа разработки.
Поддержка после сдачи проекта
Мы всегда готовы помочь вам с любыми вопросами по работе вашего интернет-магазина.
Обучение работе с сайтом
Мы обучим вас, как управлять вашим сайтом через административную панель и вносить изменения самостоятельно.
Создание брифа
Если у вас нет специалиста для заполнения брифа, мы поможем вам с этим.
Адаптивные решения
Ваш сайт будет корректно отображаться на всех устройствах, независимо от размера экрана.
Максимальная SEO-подготовка
Вы получите сайт, оптимизированный для SEO-продвижения.
Гарантия качества
Ваш безупречный сайт — наша безупречная репутация. Мы стремимся к максимальному результату.
Хостинг
Размещение сайта на оптимальном хостинге с учетом нагрузки проекта.
SEO-продвижение
Вывод сайта на лидирующие позиции в поисковых системах.
Программирование CS-Cart
Профессиональная разработка по вашим требованиям.
Интеграции
Установка полезных модулей для улучшения работы интернет-магазина.
Ускорение
Анализ скорости сайта и устранение проблем, замедляющих загрузку страниц.
Разработка личного кабинета CS-Cart
Создание личного кабинета с функционалом под любые потребности.
Ищете опытных специалистов для ускорения сайта?
Или позвоните нам +7 (925) 289-49-07
Часто задаваемые вопросы
Мы собрали наиболее частые вопросы об ускорении работы сайтов и ответили на них.
В стоимость оптимизации включены: первичный аудит скорости, настройка кэширования и сжатия данных, оптимизация кода и изображений, а также перенос сайта на другой хостинг при необходимости.
Это один из инструментов проверки, но полагаться только на его показатели недостаточно. Нужно провести более детальный аудит, если вы хотите полноценной оптимизации сайта.
Да, это также важный показатель. Большинство людей используют мобильные устройства для просмотра сайтов. Современная ситуация диктует свои правила, поэтому необходимо учитывать мобильных пользователей и создавать для них удобные условия просмотра сайта.
Частично вы можете улучшить скорость, следуя рекомендациям сервиса PageSpeed Insights. Однако это лишь малая часть от полного процесса оптимизации. Более сложные задачи требуют вмешательства квалифицированного специалиста. Обратитесь к нам — мы гарантируем высокое качество услуг.
Метод 1. Адаптивный дизайн
Основная особенность заключается в том, что все элементы интерфейса автоматически подстраиваются под экраны разных размеров. Благодаря этому такие сайты одинаково хорошо отображаются на ПК, ноутбуках, смартфонах и планшетах.
- сайт всегда подстраивается под текущее разрешение экрана — при смене ориентации на мобильном устройстве или при уменьшении окна браузера на десктопе;
- не требуется настройка редиректов;
- сайт лучше ранжируется в мобильной выдаче;
- упрощенное управление сайтом, так как контент автоматически адаптируется под различные устройства;
- экономия — адаптивная верстка сайта дешевле разработки отдельного сайта для мобильных устройств.
- Основной недостаток этого подхода в том, что он не решает проблему скорости загрузки сайта. На ПК и мобильных устройствах загружается одинаковый объем информации. Поэтому важно учитывать, что сайт, который быстро открывается на ПК, на смартфоне или планшете с мобильным интернетом может загружаться медленно.
Метод 2. Мобильная версия
Мобильная версия предполагает создание двух сайтов: основного для ПК и мобильного для смартфонов и планшетов.
- как и адаптивная верстка, мобильная версия лучше ранжируется в мобильной выдаче;
- возможность размещать на сайте только необходимый для мобильных устройств функционал и контент;
- настройка меню, навигации и других элементов дизайна под нужды мобильных пользователей;
- возможность изменять основную и мобильную версии независимо друг от друга;
- быстрое время загрузки.
- затраты на поддержку и управление двумя ресурсами одновременно, обеспечение актуальности информации на обоих;
- при добавлении контента необходимо сначала адаптировать его для мобильных устройств, а затем публиковать дважды: на основной и мобильной версиях сайта;
- необходимость настройки перенаправлений;
- проблемы с дублированием контента — одна и та же статья имеет два разных URL, что негативно сказывается на уникальности и позициях в поисковых системах;
- мобильная версия сайта требует значительных вложений: необходимо учитывать затраты на разработку, обновления мобильной версии и покупку отдельного домена.
Итог сравнения: мы рекомендуем переход на адаптивную верстку. Этот вариант не только менее затратен по времени и средствам по сравнению с мобильной версией, но и позволяет удобно управлять сайтом.
Из нашего опыта.
На нашей платформе сейчас работает более 50 000 активных ресурсов: интернет-магазинов, сайтов компаний и специалистов, лендингов, портфолио и блогов. В декабре 2016 года мы запустили новые адаптивные шаблоны и предложили пользователям перейти на них в пару кликов, без потери информации и бесплатно.
На данный момент на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это повлияло на статистику их сайтов.
1. Поисковый трафик
Некоторые пользователи опасались, что переход на адаптивный дизайн может негативно сказаться на трафике и потребуется время на его восстановление. По графикам ниже видно, что этого не произошло.
2. Поисковый мобильный трафик
Поисковые системы ранжируют адаптивные сайты выше в мобильной выдаче, а Google даже в десктопной версии выдачи отмечает сайты без адаптивности строкой «Ваша страница не оптимизирована для смартфонов». По графикам видно, что после перехода на адаптивную верстку мобильный трафик постоянно увеличивается.
3. Поведенческие факторы
Адаптивный дизайн не только выглядит современно, но и улучшает поведенческие показатели сайтов, такие как показатель отказов, глубина просмотра и время на сайте, что особенно актуально для мобильного трафика.
На графиках ниже представлены изменения в поведенческих факторах до и после смены шаблона.
Обратите внимание, что показатель отказов снизился, а глубина просмотра и время на сайте увеличились. Поведенческие факторы улучшились не только для мобильного трафика, но и для всех устройств в целом.
Вывод: переход на адаптивный дизайн положительно влияет на трафик из поисковых систем и поведенческие факторы.
Негативных моментов не обнаружено. Если вы о них знаете, делитесь в комментариях!
В материале использована статистика сайтов: https://astramed72.ru, https://crimeabeauty-nn.ru, https://салон-онлайн.рф, http://restbu.ru, https://tmk-stroykomplekt.ru, https://tentnalodku.ru, https://donkupidon.ru.
Как сделать сайт дружественным для мобильных устройств
Недавно Google уведомил веб-мастеров сайтов, не оптимизированных под мобильные устройства, что их ресурсы не будут высоко ранжироваться в мобильной выдаче.
Мы решили разобраться, на что стоит обратить внимание владельцам таких ресурсов при оптимизации своих сайтов.
Доля мобильных пользователей неуклонно растет
Увеличивать продажи — легко! С цифровыми решениями для бизнеса.
Запускайте новые рекламные каналы, создавайте удобные связи с клиентами, собирайте данные о вызовах и аналитику посещений офлайн. Подключайте сервисы от МегаФона ПроБизнес и получайте до 15 000 бонусных рублей. Узнать больше >>
Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585
Все больше покупок совершается с мобильных устройств. По данным Google, 39% пользователей смартфонов покупали через мобильные устройства, 55% ищущих информацию о товарах или услугах на смартфонах планируют покупку в течение часа, 83% — в тот же день. В 47% случаев такой поиск приводит к покупке на ПК, в 82% — в офлайн-магазине, и в 17% — через смартфон. Удобство использования мобильных устройств значительно влияет на конверсию в покупки, звонки или полезный трафик.
Варианты адаптивных сайтов для мобильных устройств
- Мобильная версия сайта (некоторые сайты имеют также WAP-версию) — это отдельные URL (например, www.domain.ru/mobile/page_1) или поддомен (например, m.domain.ru/page_1). Обычно это упрощенная версия основного сайта с ограниченным функционалом. Мобильные версии теряют популярность из-за развития CSS и сложностей с разбором user-agent-ов. Пользователям неудобно запоминать несколько URL сайта.
- Мобильное приложение сайта — специализированное приложение для определенной платформы (iOS, Android, Windows Phone). Приложения интегрированы с платформой и отличаются высоким быстродействием. Это оправдано, если проект ориентирован на офлайн-работу и мобильных пользователей. Основной недостаток — необходимость скачивания приложения, иначе пользователь видит полную версию сайта в маленьком масштабе. Поэтому важно иметь качественную мобильную версию сайта даже при наличии приложения.
- Сайты с адаптивным дизайном — автоматически подстраиваются под устройство, с которого осуществляется вход. Плюс — один URL для всех устройств, что устраняет необходимость редиректов и запоминания адресов мобильных версий. Это самый популярный вариант, так как позволяет работать над одним сайтом для всех устройств и экономит трудозатраты на внесение изменений и оптимизацию.
Особенности оптимизации сайта для мобильных устройств
Для создания мобильного сайта необходимо учитывать три основных аспекта:
- оптимизация CSS и настройка медиазапросов;
- настройка области просмотра с помощью метатегов;
- оптимизация используемых плагинов.
Оптимизация CSS и настройка медиазапросов
Первая проблема при просмотре полной версии сайта на мобильном устройстве — некорректное отображение относительно разрешения экрана.
Это происходит из-за того, что верстальщики часто задают размеры элементов в пикселях для разрешений ПК:
Этого можно избежать, задавая размеры элементов в процентах:
Это позволит элементам страницы адаптироваться под масштабирование.
Настройка области просмотра
Большинство сайтов, просматриваемых на небольших экранах, отображаются в том же разрешении (около 980 пикселей), что и на ПК:
В итоге пользователю приходится увеличивать необходимую область просмотра, чтобы увидеть содержимое.
Применение специального метатега viewport позволяет адаптировать ширину экрана под любое устройство:
"viewport" content="width=device-width, initial-scale=1.0">
Атрибут initial-scale=1 указывает браузеру пользователя соотношение пикселей CSS и устройства (равное 1:1), обеспечивая корректное отображение вне зависимости от ориентации экрана.
Оптимизация плагинов
Многие мобильные устройства и браузеры либо не поддерживают, либо ограниченно поддерживают современные плагины. Поэтому рекомендуется пересмотреть необходимость использования Flash, Silverlight или Java на сайте. Многие элементы HTML5 уже сейчас могут заменить плагины, сохраняя качество отображения контента.
Кроме того, отказ от использования плагинов позволит уменьшить вес страниц, что положительно скажется на их индексации поисковыми системами.
Дополнительные советы
Помимо вышеупомянутого, существует множество дополнительных настроек, которые могут сделать ваш сайт удобнее для использования на мобильных устройствах:
- Подходите к выбору контрольных точек для задания процентных величин элементов макета осмысленно. Подробнее об этом можно узнать у эксперта по адаптивному веб-дизайну Итана Маркотта.
Пример оптимизации контента для смартфонов и ПК:
- Максимально оптимизируйте JavaScript.
- Используйте понятную навигацию в верхней части страницы. Это особенно важно для сайтов с гибким дизайном. Убедитесь, что навигация удобна как на мобильных устройствах, так и на ПК. Простое меню и удобная навигация помогут пользователям не потеряться на вашем сайте. Пример адаптивного лендинга можно увидеть на сайте The Verge.
Пример адаптивной навигации на ПК и смартфоне:
- Используйте сжатие gzip или deflate для ускорения загрузки страниц на всех устройствах.
- Обязательно используйте кеширование изображений.
- Зафиксируйте значения таких показателей, как время загрузки страниц, глубина просмотра, показатель отказов, позиции сайта по ключевым запросам и статистику по мобильным устройствам и технологиям до и после оптимизации. Это поможет оценить правильность выполненных изменений.
Следует ли мобильным сайтам позволять масштабирование?
Масштабирование на мобильных устройствах часто необходимо из-за того, что сайты не адаптированы для них; обычно пользователи не хотят увеличивать или уменьшать контент. Мобильные сайты должны быть адаптированы и работать, как мобильные приложения, где масштабирование обычно не требуется. Вы не можете увеличивать содержимое в большинстве мобильных приложений; макет фиксирован, как и на адаптивных мобильных сайтах. Следует ли мобильным сайтам разрешать масштабирование? Это обсуждается как вопрос доступности, но такие опции, как правило, настраиваются в браузере — увеличение шрифта и т.д. Масштабирование при помощи жестов может быть неудобным и не имеет большого смысла в адаптивных макетах. Однако когда его следует разрешать? Какие преимущества оно дает пользователям или дизайнерам?
40.8k 10 10 золотых значков 112 112 серебряных значков 183 183 бронзовых значка
Конечно, я могу переписать текст, сохранив его смысл и HTML-разметку:@DA01, честно говоря, я сам не уверен, на чьей я стороне. Кажется, вся суть оптимизации для мобильных устройств заключается в том, чтобы избавиться от необходимости увеличения. На самом деле, в большинстве случаев, увеличение должно снижать удобство использования. Но что, если ваш текст слишком мелкий?
Я сталкивался с мобильными сайтами, которые отключали функцию увеличения, выбрав неудачные настройки по умолчанию, и в итоге шрифт был слишком мелким для чтения. Зачем вообще лишать пользователя этой опции, если очевидно, что универсальный размер не подходит для всех?
Согласен с @MonicaCellio. Я – пользователь, и если мне нужно увеличить изображение, почему дизайнер должен меня ограничивать? На своих сайтах я заметил, что мой Android плохо определяет нажатия на ссылки, поэтому возможность увеличения при необходимости важна. (конечно, мне нужно добавить немного отступов; просто отмечаю).
Что? Вы хотите сказать, что эти сайты специально отключают увеличение? Я думал, это баг! Меня бесит, когда я пытаюсь увеличить, а ничего не происходит, или случайно нажимаю на кнопку «назад/вперед», которая появляется только при касании экрана. Почему мне нужно увеличивать, если сайт оптимизирован для мобильных устройств? Ну, если на сайте есть фотографии, графики или комиксы (может быть, загруженные пользователями), мне наверняка понадобится увеличение, чтобы увидеть детали или прочитать текст на изображении.
14 ответов 14
Отсортировать по: Сбросить к начальным настройкам
На основе моих исследований мобильных пользователей, я бы предпочел не отключать возможность увеличения.
Люди, с которыми я беседовал в ходе исследований юзабилити, приходили с теми же ментальными моделями, которые они создали, используя настольные компьютеры. Это значит, что их цели и привычки не изменяются.
Поскольку люди привыкли увеличивать (особенно изображения и инфографику), мы должны им это позволить.
55k 22 22 золотых знака 141 141 серебряных знака 241 241 бронзовых знака
Владимír Калинай Владимír Калинай
Верно, инфографика на мобильных устройствах — это боль.
Полностью согласен с этим наблюдением (т.е. ментальная модель пользователей остается неизменной). Но разве это не аргумент против создания специализированного мобильного решения? Для таких пользователей было бы лучше использовать обычную десктопную версию с возможностью увеличения?
@JørnE.Angeltveit, нет, вам всё равно нужно создать дизайн, который будет хорошо работать на маленьком экране. Взгляните на SE, который фиксирует ширину в 1024 пикселя (если я не ошибаюсь); это плохо для телефона, а увеличение вызывает горизонтальную прокрутку. С другой стороны, мобильная версия сайта работает хорошо — и, кстати, поддерживает увеличение.
Я замечал отсутствие возможности увеличения на большинстве оптимизированных для мобильных устройств сайтов, которые я видел. В основном, потому что ссылки и кнопки слишком маленькие или расположены слишком близко друг к другу (размер текста не был проблемой). Обычно я переключаюсь на обычную десктопную версию.
НО: Хорошо спроектированное приложение не должно сталкиваться с такими проблемами.
Так что, возвращаемся к сути юзабилити-инженерии:
1) Оптимизированное для мобильных устройств решение должно иметь цель. Зачем создавать отдельную мобильную версию? Какова основная задача пользователя, когда он посещает сайт с мобильного устройства?
2) Проверяйте фактическое использование по сравнению с заранее определенными целями юзабилити. Это важнее, чем когда-либо. Тестируйте, тестируйте, тестируйте. Плохо спроектированные мобильные решения могут стать абсолютно бесполезными. (Десктопные решения более терпимы, на мой взгляд, и пользователь обычно может разобраться или найти обходной путь).
Этот второй пункт действительно
Вот уникальная версия текста на русском языке с сохранением HTML-разметки:На самом деле, весь мобильный мир всё ещё находится в стадии развития, и подобные вопросы — отличный пример тому — показывают, что мы всё ещё не до конца разобрались, как лучше использовать все возможности.
Jørn E. Angeltveit Jørn E. Angeltveit
12.6k 4 4 золотых знака 41 41 серебряных знака 79 79 бронзовых знаков
+1 к проблеме с ссылками/кнопками. Подходящий размер текста для чтения не всегда является удобным для точного нажатия, особенно если у вас крупные пальцы и/или маленькое мобильное устройство. Я почти всегда увеличиваю ссылки перед тем, как нажать на них, иначе я часто нажимаю не на то, что нужно, или выделяю не связанную часть текста и так далее.
Комментарий 26 июня 2013 в 10:39
Пожалуйста, никогда не отключайте масштабирование.
Возможно, вы думаете, что правильно спроектировали свой сайт, подобрали правильный размер шрифта и сделали все фотографии достаточно чёткими, чтобы пользователи не нуждались в увеличении.
Ваши пользователи приходят на сайт, мобильная версия включается, и они спокойно прокручивают его вверх и вниз, не задумываясь о необходимости масштабирования.
Но вы всё-таки решаете отключить масштабирование, чтобы точно убедиться, что пользователи понимают, как вы задумали использование сайта. Ваш код блокировки масштабирования почти не используется, потому что сайт и так идеален, но его наличие придаёт вам уверенности. Может, это заставляет тестировщиков проверять сайт определённым образом. Как бы там ни было, у вас есть причина, которую вы сочли оправданной.
Но вот кто-то пытается зайти на ваш сайт с айфона в машине. Ему нужно найти почтовый индекс. Он хочет скопировать его и вставить в приложение для навигации. Дети кричат. Жена начинает нервничать, а ваш пользователь отчаянно пытается увеличить масштаб. Из-за странного форматирования или других особенностей он продолжает выделять весь текстовый блок. Ему просто нужен почтовый индекс. Он снова и снова пытается увеличить масштаб. Он просто хочет увеличить текст так, чтобы можно было легко выделить нужный участок. Но этого не было в вашем сценарии. Он пытается повернуть телефон, но это не помогает. Жена начинает плакать. Всё становится критическим. Он находит ручку в кармане двери, закопанную среди салфеток и обёрток, и записывает индекс на руке. Ручка царапает кожу, прежде чем начинает писать. Затем он с раздражением закрывает ваш «веб-приложение», загружает навигатор и вручную вводит индекс, надеясь, что не перепутает L с 1 и не окажется в другой части страны.
Теперь он ненавидит ваш сайт и вашу организацию, он ближе к разводу, опаздывает на свадьбу, у него иссякло терпение, он ненавидит свой телефон, а его жена считает технологии пустой тратой времени.
Только потому, что вы решили удовлетворить своё желание отключить масштабирование.
Оптимизируйте сайт для мобильных устройств, если хотите. Тратьте часы и убедитесь, что он выглядит прекрасно. Но позвольте пользователям самим решать, увеличивать масштаб или нет. Они лучше вас знают, что им нужно.
Этот текст сохранил смысл и HTML-разметку оригинала, но переформулирован на русском языке, что делает его уникальным.