С возрастом время течет быстрее. По крайней мере, мы так это воспринимаем. Профессор Адриан Бежан изучил данную проблему и пришел к выводу, что восприятие времени субъективно и основывается на внешних стимулах. Чем старше человек, тем медленнее мозг обрабатывает информацию, поэтому у нас создается ощущение быстротечности. Также есть зависимость от внешних стимулов.
Например, в детстве у нас мало информации о мире, практически на каждом шагу мы познаем что-то новое. Поэтому нам кажется, что тогда время текло быстрее, так как за одинаковое количество времени мозг фиксировал больше интересного и нового. Ну и не будем забывать о городской суете, заботах, постоянной занятости. Ведь с возрастом у нас и забот прибавляется.
Когда мы создаем сайт, мы создаем его для пользователя, поэтому нам нужно позаботиться о нем: не только принести пользу, но и сделать удобным процесс использования, сэкономить его время. За такую заботу аудитория нас непременно вознаградит. Низкая производительность сайта увеличивает процент отказов, ухудшает поведенческие факторы, что является плохим знаком для поисковых систем. Они тоже стремятся улучшать выдачу для своей аудитории, так как конкурируют за пользователя с другими поисковыми системами.
Ускоряем сайт до Предела! Как ускорить загрузку своего сайта? Как ускорить сайт?
Путь пользователя
Прежде чем попасть на сайт, посетитель проходит два этапа. Чтобы он начал изучать наш ресурс, мы должны победить на каждом из них.
Мобильный версия
Обычно нет избытка функций, поэтому вносить изменения проще
Пользователю удобно просматривать страницы, он нен натыкается на лишнее
Сайт может загружаться быстрее, поскольку неперегружен данными
Из-за нескольких адресов и одного контента поисковая система может наложить санкцииза дубдированные контент
адаптивный дизайн
Не надо создавать новые URL
Не надо использовать редиректы
Его любят поисковики (особенно Google)
Cайт может загружаться медленнее, поскольку имеет тот же вес, что и для десктопа
Второй этап: открытие сайта. Пользователь, как правило, открывает несколько ресурсов, а после начинает переходить на те, что прогрузились быстрее. Хотя разница в скорости загрузки порой составляет доли секунды, для восприятия пользователя это очень важно. Аудитория не любит ждать, поэтому наш сайт должен открываться быстрее. Опередив конкурентов в этой гонке, мы выиграем в битве.
В данном примере мы открыли все ссылки из выдачи, и, как заметно по скриншоту, 4-я и 6-я загрузились быстрее остальных. Но мы еще не переходили по ссылкам, далее будет важна скорость загрузки контента страницы.
Прежде чем говорить об оптимизации скорости, давайте ответим на вопрос, что же происходит после ввода URL (ссылки) в адресную строку браузера.
1. Отправление DNS-запроса по имени сайта.
2. Инициация TCP-подключения к серверу.
3. Установление соединения http или https.
4. Запрос нужной части страницы и прогрузка ее HTML-кода.
5. Стартовый парсинг HTML.
6. Подгрузка внешних ресурсов (изображений, стилей, скриптов и т. д.).
7. Рендеринг финальной версии страницы со всем содержимым.
8. Исполнение JS-кода. Может потребоваться обработка дополнительных сетевых запросов, изменение страницы или ее шаблона, а это значит не исключен и еще один рендеринг.
Практически на каждом из этих этапов мы можем поспособствовать ускорению процесса. Логично предположить, что чем больше мы проведем работ над их оптимизацией, тем быстрее будет загружаться сайт.
Как проверить скорость загрузки
Один из главных инструментов – бесплатный сервис Google PageSpeed Insights. Как им пользоваться? Вводите ссылку на ресурс и нажимаете «анализировать».
Получаете детальную информацию по ситуации со скоростью загрузки на десктопах и мобильных устройствах. Оптимизировать нужно все пункты, выделенные красным.
Расскажем об основных пунктах, оптимизировав которые вы ускорите сайт в разы.
Серверная оптимизация
Расширение ресурсов сервера
Данная проблема часто возникает у ресурсов на 1С-Битрикс. Они требуют больших ресурсов при работе, поэтому нужно иметь буфер, особенно когда объем трафика сильно увеличивается. Наиболее важными являются показатели нагрузки на CPU (центральный процессор сервера) и скорость дисковой системы. Выбирайте провайдеров с качественным оборудованием.
Кеширование
Если у вас высокий процент повторных заходов на сайт, стоит использовать кеш в браузере пользователей. Сохраняя важные данные, при повторном заходе мы можем загружать страницу быстрее. Благодаря кешированию не только падает нагрузка на сервер, но и уменьшается количество запрашиваемых данных, так как часть из них уже доступна в браузере.
Недостаток этого способа в том, что не все данные можно закешировать. Также это актуально только для сайтов с повторными заходами (если пользователь впервые зайдет к вам на страницу, скорость все равно будет низкая, так как кеша еще нет). И нужно заранее подумать, как потом очищать кеш.
СУБД (системы управления базами данных)
Увеличьте скорость ответа от базы данных. Для этого оптимизируйте запросы и схемы данных. Узнать, какие запросы замедляют процесс, можно, собрав статистику по нагрузке за определенный промежуток времени и проведя анализ лога. После этого вы сможете определить параметры, которые помогут ускорить работу.
Оптимизация TCP, TLS, HTTP/2
Оптимизация TCP актуальна для крупных платформ и серверов со скоростью от 10 G. С выпуском новых ядер сетевая подсистема обновляется, поэтому и вам нужно обновляться.
Корректировка TLS (HTTPS) помогает ускорить подключение защищенного соединения и повышает безопасность.
HTTP/2 используют все чаще. Хотя этот протокол был создан для ускорения работы, специалисты утверждают, что скорость все равно увеличивается не всегда.
Качество серверов хостера и их географическое расположение
Чем дальше находится сервер, тем дольше будет доставляться информация. Поэтому лучше выбирать провайдера, оборудование которого расположено в том же регионе, в котором большая часть вашей аудитории. Конечно, многое зависит еще и от качества оборудования: есть случаи, когда более далекие сервера отвечают быстрее.
CDN
Это сети доставки контента, состоящие из серверов, установленных в разных уголках мира. При подключении сайта создаются копии файлов проекта, а после каждому пользователю подгружаются сведения с того сервера, который находится к нему ближе. В результате скорость доставки контента многократно вырастает. Также большой плюс CDN в том, что число серверов, отвечающих на запросы пользователей, больше, чем при обычном размещении. Поэтому при росте трафика скорость ответа на запросы не замедляется и оборудование успевает обрабатывать информацию.
Использование связки Nginx+Apache
Это два самых распространенных веб-сервера. Причина популярности первого в мощи, второго – в скорости. Из минусов: у Apache ограничена память, а Nginx нуждается в помощи php-fhm или похожих модулей для загрузки динамического контента. Объединив эти два веб-сервера, можно значительно ускорить сайт. Например, Apache можно использовать как бэкенд, а Nginx как фронтенд.
VPS
Если сайт тяжелый, лучше использовать VPS, а если очень тяжелый, понадобится выделенный сервер. Для простых сайтов подойдут обычные хостинги. Как правило, на VPS переходят интернет-магазины, крупные порталы, информационные площадки, СМИ и прочие сервисные и контентные проекты.
Использование внешних серверов
Если у вас на сайте используется тяжелый файл, например видео, загрузите его через сторонние сервисы (YouTube и прочие). Не нужно грузить через FTP видео весом 1 Гб. Это позволит сэкономить ресурсы вашего сервера и улучшить юзабилити. На Ютубе, к примеру, плеер очень хороший, даже при просмотре на низкой скорости видео обычно не прерывается и грузится корректно.
Как уменьшить вес и ускорить загрузку страницы
Сжатие изображений
Пожалуй, один из главных тормозов всех сайтов – это тяжелые изображения. Это банально, всем известно, но актуально до сих пор. Существует множество способов оптимизации, за счет которых можно уменьшить вес файла, сохранив качество. Дополнительно, если качество все же важно, загрузите картинку по ссылке без сжатия. Если кому-то нужна полная версия, то он найдет ее, перейдя по ссылке.
Можно попробовать конвертировать изображение в формат WebP, который, по данным Google, легче PNG и JPEG.
Влияние CMS и кода
Чаще всего скорость работы CMS замедляют плагины, расширения, модификации. Оптимизируйте их или используйте только по мере надобности, отключите ненужные (особенно актуально для 1C-Bitrix и WordPress). Также обычно коды платных CMS «чище», чем коды бесплатных. Потому что платными на регулярной основе занимаются штатные специалисты и постоянно их совершенствуют, бесплатными занимаются волонтеры и вносят изменения, если появляется такое желание.
Поисковыми системами лучше воспринимаются сайты на платных CMS, потому что на них редко создаются сомнительные проекты. Сайты, созданные на конструкторах, не стоит всерьез рассматривать для SEO-продвижения. Там очень сильно смешаны шаблонные коды, причем так, что легче написать заново, чем оптимизировать имеющиеся.
Использование сжатия Gzip
Это утилита для сжатия базы данных. Несмотря на дополнительную нагрузку сервера, обеспечивается повышение скорости сайта и уменьшение объема загружаемых данных. Это позволяет сэкономить ресурсы. С помощью Gzip браузер загружает страницу быстрее, так как сначала загружает архив, а потом распаковывает его и отображает контент. Для использования алгоритма нужно всего лишь добавить в файл .htaccess несколько строчек кода, что занимает не так много времени.
КОД С ПОДСКАЗКАМИ
КОД БЕЗ ПОДСКАЗОК
Оптимизация кода
Это упрощение кода, исключение лишних процессов. Иногда 10 строчек можно легко заменить на одну, результат не изменится, а скорость повысится. Это особенно актуально для старых сайтов и бесплатных CMS, так как разработчики, как правило, не заинтересованы раскручивать бесплатные проекты, поэтому не оптимизируют их.
CSS рекомендуется размещать в начале страницы (некоторые там оставляют главный CSS, а остальное убирают вниз), а скрипты лучше спустить ниже, чтобы они подгрузились позже всего важного. Счетчики аналитики публикуют в начале, лучше в теге , а дополнительные виджеты – в конце. Таким образом браузер начнет грузить страницу с самого важного, второстепенное может подождать, ведь его позднее появление ничего, по сути, не изменит.
Переадресация
Избавьтесь от редиректа (переадресации). Даже переход с site.com -> www.site.com -> m.site.com замедляет работу. Происходят лишние процессы, выполняются лишние запросы – все это впустую тратит ценное время.
Использование минификации HTML, CSS и JS
Для удобства некоторые программисты вставляют комментарии в код, используют пробелы, отступы, разделители блоков, иногда оставляют разрывы строк, ненужные фрагменты, неиспользуемые библиотеки JavaScript, лишние шрифты, избыточные CSS. Все это можно удалить и ускорить тем самым загрузку страницы. Но справедливости ради отметим, что после этого код будет труднее читать и операции с его правкой, редактированием, доработкой займут больше времени. Удаление ненужных символов и называется минификацией. Лучше начать минификацию с HTML, CSS и JavaScript, так как они важны и определяют, как будет выглядеть ваш сайт.
Оптимизация анимации
Довольно распространенная ситуация, когда для красоты добавляют анимированные элементы. Старайтесь их использовать минимально, только там, где это действительно необходимо. Не перегружайте ими страницу.
Асинхронная загрузка для файлов CSS и JavaScript
После чистки кода можно перейти к настройке отображения скриптов. CSS и JavaScript можно загружать синхронно или асинхронно. В первом случае скрипты подгружаются по порядку, как они идут в коде, сверху вниз. А во втором – некоторые из скриптов могут запускаться одновременно. Асинхронная работа ускоряет загрузку страницы.
Отложите загрузку JavaScript
Некоторые скрипты можно отложить до тех пор, пока не загрузится самое важное. Так вы сэкономить ресурсы, и скорость загрузки увеличится.
«Ленивая» загрузка
Это процесс, когда сначала грузится шапка и первый экран, а потом все остальное. Похожая оптимизация используется в компьютерных играх, когда грузится только место вокруг игрока. Таким образом оптимизируется работа ЦП и грамотно используется оперативная память устройства, так как одновременно загружать всю карту большой игры очень тяжело, нам бы просто не хватило мощности.
«Ленивая» загрузка раньше использовалась на Aliexpress. При скроллинге главной страницы после «дна» сайта открывался новый блок с товарами. После пролистывания этого блока открывался еще один и так далее. Если бы такое огромное количество товаров открывалось сразу, страница грузилась бы несколько десятков секунд.
Что быстрее: мобильная версия или адаптивная верстка
Напоследок рассмотрим вопрос двух версий сайтов. Процент пользователей, заходящих с мобильных устройств, очень высокий, и во многих тематиках такого трафика даже больше, чем десктопного. Существуют два популярных способа оптимизации под мобильные устройства – мобильная версия, доступная на отдельном поддомене, и адаптивная верстка, при которой один и тот же код отображается по-разному в зависимости от параметров устройства пользователя.
Плюсы мобильной версии
Сайт грузится быстрее.
Пользователь легко может перейти на нужную версию.
Возможна полноценная оптимизация. Это большой плюс. Юзабилити, дизайн, текстовый контент и многое другое можно разработать специально под смартфоны, потому что чаще всего в варианте для десктопов есть блоки, ненужные при использовании с телефона или планшета. При адаптивной верстке страница на мобильном устройстве будет перегружена.
Минусы мобильной верстки
Содержание обходится дороже, так как ведется двойная работа. Кроме того, существуют сложности при администрировании, добавляются расходы на создание, по сути, двух сайтов. Да и с точки зрения SEO, это не так удобно, придется проделывать лишнюю работу.
Двойной расход времени.
Проблемы для пользователей при передаче ссылок. Например, через WhatsApp кто-то отправит ссылку с мобильной версии, а получатель откроет ее на десктопе и увидит вариант для смартфонов, что не очень удобно. Можно, конечно, изменить адрес вручную, но не каждый догадается так сделать.
Плюсы адаптивной верстки
Интерфейс не меняется.
Минусы адаптивной верстки
Скорость загрузки ниже.
Нет возможности для полноценной оптимизации под мобильные устройства. Если страница на десктопе длинная, на смартфоне она будет выглядеть как рулон, который при скроллинге никак не заканчивается.
Есть проблемы с повышением скорости загрузки. Можно скрыть отображение некоторых скриптов, но это не решит всех задач по оптимизации.
Исходя из перечисленного понятно, что выигрывает мобильная версия. Поэтому, если вам важна скорость сайта и удобство для пользователей, смело выбирайте этот вариант.
Вывод
Как бы мы ни старались увеличить скорость сайта, не забывайте о контенте и содержимом, а если у вас коммерческий проект, то и о ценности продукта и выгодах, которые получает клиент при работе с вами. Потому что страница может загружаться быстрее всех, но пользователи будут сразу уходить, если они не получат то, за чем пришли. Все описанное в этой статье будет важным только в том случае, если вы создадите сильное предложение, а ваш бизнес или проект будут конкурентоспособными. После того как вы этого достигнете, можно будет начинать завоевывать пользователей скоростью работы платформы.
Иногда возникают конфликтные ситуации. Например, у нас был скрипт от сервиса аналитики, который сильно замедлял загрузку. Сервис важный, так как с его помощью мы собирали аудиторию и показывали ей рекламу напрямую или находили похожую (look-a-like). Убрать его мы не могли, так как основные заявки получали за счет использования этого инструмента. Отключив код, мы бы потеряли 90% заявок.
В результате мы оставили его, сосредоточившись на оптимизации других направлений. То есть при возникновении конфликтной ситуации отталкивайтесь от ценности и потерь, взвешивайте за и против и только после этого принимайте решение.
Если вам нужно повысить скорость загрузки сайта или вы хотите получить SEO-аудит, обращайтесь в digital-агентство «Поисковая индустрия». Будем рады сотрудничеству!
Источник: searchindustrial.ru
10 способов ускорить время загрузки вашего блога без смены хостинга
Скорость загрузки (время загрузки блога) является одной из важных составляющих пользовательского опыта любого сайта. Быстрая загрузка блога прямо пропорциональна удовлетворенности посетителей и SEO.
Медленная загрузка плохо сказывается на SEO и заставляет посетителей покидать страницу. В тематическом исследовании, проведенном Akamai и Gomez, целых 47 процентов посетителей ожидают, что страницы будут загружены в течение двух секунд, а 40 процентов из них уходят со страницы, не загруженной в течение трех секунд.
Следует отметить, что человек моргает около 3-4 секунд. Это означает, что контент вашего блога должен быть размещен за мгновение. Невероятно, не правда ли?
Однако, если ваш блог работает медленно, то, конечно, вы должны оптимизировать скорость вашего блога, чтобы обеспечить наилучший опыт для его посетителей.
22 совета для ускорения работы сайта WordPress
Как проверить скорость загрузки сайта:
- Google Developers — один из лучших инструментов для проверки скорости загрузки сайта. Он проверяет не только скорость вашего сайта, но итакже отслеживают производительность сайта.
- GTMetrics предоставляет отличный анализ сайта, выставляя оценки как по Page Speed, так и по YSlow.
- Pingdom также является отличным инструментом для проверки скорости сайта. Pingdom также предлагает проверку работоспособности DNS и бесплатные оповещения, когда ваш сайт не работает. Не волнуйтесь Если скорость вашего сайта низкая, и вы не знаете, как улучшить ваш блог, ниже пошагово описано, как вы можете увеличить скорость или ускорить время загрузки блога без необходимости переноса хостинга.
- Установите плагин W3 Total Cache
Одним из лучших способов ускорить время загрузки блога является установка плагина W3 Total Cache. Этот плагин делает кэш более легко отображаемым браузером.
Мало того, этот плагин также облегчает использование ресурсов процессора хостинга. В итоге, все это положительно сказывается на скорости работы блога.
Честно говоря, на самом деле есть много других, например, плагин кэширования W3 Super Cache. Тем не менее, я рекомендую вам использовать W3 Total Cache для более полного и удобного использования.
- Выполните GZIP-сжатие
Когда вы сжимаете компьютерный файл с помощью 7-Zip или WinRAR, конечно, ваш файл становится легче. То же самое происходит и на вашем блоге, если вы сжимаете его с помощью GZIP.
Перед сжатием вам нужно убедиться, что шаблоны вашего блога уже сжаты с помощью GZIP или нет. Для этого проверьте их через http://checkgzipcompression.com.
Если вы нашли блог.вы еще не сжимаете, то можете сжать сейчас. Есть несколько способов включить GZIP-сжатие. Вы можете включить Gzip-сжатие в плагине W3 Total Cache .
Войдите в WordPress Dashboard , перейдите в Performance → Browser Cache и установите флажок ‘Enable HTTP (Gzip) Compression’.
Если вы не используете плагин кэширования, то вы можете включить Gzip-сжатие, используя HTML-доступ . Для этого добавьте в htaccess следующую строку:
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE text / xml AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / x-javascript AddOutputFilterByType DEFLATE image / x-icon
- Оптимизация размера изображений
Изображение — одна из самых важных частей блога. Но изображения могут замедлять работу наших сайтов.
Около 60 процентов блогов работали медленно из-за использования изображений. Поэтому нам необходимо выполнить действие против одного из таких компонентов.
Помимо уменьшения интенсивности использования изображений, другие меры, которые можно предпринять — это уменьшить (сжать) вес картинки. Существуют различные способы уменьшения размера фотографий. Мой любимый способ — TinyPNG.com.
Прочитайте посты Как уменьшить размер фотографий с помощью TinyPNG, чтобы узнать, как это сделать.
- Ограничьте количество рекламы
Реклама — самый популярный способ монетизации блога. Неудивительно, что реклама является основным способом заработка для блоггеров.
- Заработать деньги легко, написав статус в WhatsApp
- Как заработать деньги в Twitter — простое руководство Тем не менее, необходимо ограничить количество рекламы на вашем блоге.блог. Причина та же, что и в предыдущем случае: чем больше рекламы, тем медленнее будет работать ваш блог. Мало того, чрезмерное количество рекламы также запутывает навигацию посетителей. Еще один момент: избегайте всплывающей рекламы (выдающей новое окно после нажатия на определенные части). Помимо вреда, такая реклама ненавистна посетителям за потерю времени и отвлекает их от читаемой статьи.
- Минифицируйте HTML, CSS и Javascript
Сайт WordPress содержит много файлов, включая HTML, CSS и JavaScript. Это также снижает скорость сайта.
Вы можете проверить это в google speed test или GTMetrics, они также предлагают минифицировать файлы javascript CSS.
Вы можете минифицировать эти файлы с помощью плагина w3 Total cache, или вы можете использовать любой другой плагин минификации.
How to Minify JavaScript and CSS Files In WordPress To Load Site Faster
- Показать максимум 7 постов на главной странице
Еще один способ ускорить скорость загрузки — показать минимум 5-7 постов на главной странице.
Потому что если мы совершим ошибку и покажем большое количество постов на главной странице блога, то скорость загрузки главной страницы замедлится, что, несомненно, отпугнет наших читателей, посетителей, а также приведет к потере органического трафика.
Чтобы уменьшить количество постов на главной странице, перейдите в Настройки » Чтение.
А затем измените количество отображаемых страниц блога на максимум 7.
- Оптимизируйте базу данных WordPress
Вы можете использовать только .Плагин WP-Optimize , который я запускаю на всех своих сайтах.
Этот плагин позволяет вам сделать одну простую задачу: оптимизировать спам вашей базы данных, автосохранять посты, ревизии, черновики, таблицы и т.д.
Я бы также посоветовал плагин WP-DB Manager , который может записывать даты для оптимизации базы данных.
- Используйте ленивую загрузку для видео и изображений
Ленивая загрузка для изображений гарантирует, что когда читатель прокручивает страницу вниз, другие изображения начинают загружаться, как раз перед тем, как они попадают в поле зрения. Благодаря этому время загрузки сайта значительно сокращается,
Чтобы сделать это автоматически, установите плагин jQuery Image Lazy Load .
- Отключите горячие ссылки
При размещении их (чье изображение берется из вашего поста), картинка занимает пропускную способность вашего хостинга. Это также замедлит работу вашего сайта.
Но не волнуйтесь, вы можете защитить свой блог от воров пропускной способности, поместив этот код в ваш корневой файл .htaccess:
отключите горячие ссылки на изображения с помощью опции forbidden или custom image
RewriteEngine on
RewriteCond % !^$
RewriteCond % !^http(s)?://(www.)?sparringmind.com [NC]
RewriteCond % !^http(s)?://(www.)?google.com [NC]
RewriteCond %!^http(s)?://(www.)?feeds2.feedburner.com/sparringmind [NC]
RewriteRule .(jpg|jpeg|png|gif)$ — [NC,F,L]
- Удалите ненужные плагины
Наличие большого количества плагинов, которые загружают много ресурсов, становится проблемой. Это может замедлить скорость загрузки вашего сайта за счет дополнительных HTTP-запросов.
Поэтому просто удалите дополнительные и неактивные плагины, чтобы уменьшить время загрузки сервера.
Эти шаги увеличат скорость вашего сайта, и вам не придется переносить его на другой хостинг.
Спасибо, что прочитали! Пожалуйста, поделитесь этой статьей, если она вам понравилась.
YouTube видео: 10 способов ускорить время загрузки вашего блога без смены хостинга
Вопросы и ответы по теме: “10 способов ускорить время загрузки вашего блога без смены хостинга”
Как сделать так чтобы загрузка шла быстрее?
**Но есть еще некоторые вещи, про которые стоит знать.**1. Установите систему на SSD. 2. Удалите лишние программы из автозагрузки 3. Переводите компьютер в режим сна 4. Включите режим быстрой загрузки 5. Включите режим Fast Boot в BIOS.
Как увеличить скорость загрузки в стим?
Это можно сделать в настройках клиента Steam. Выберите в меню Steam — Настройки (Settings), перейдите на страницу Downloads + Cloud (Загрузки + Облако) и укажите в поле Регион загрузок (Download region) выбранный Вами контент-сервер. Нажмите OK и разрешите перезапуск клиента Steam.
Как увеличить скорость загрузки сайта WordPress?
Использовать специальные плагины, такие как PageSpeed Ninja, WP Rocket, WP Super Cache или W3 Total Cache. Важно помнить, что используя плагины для GZIP-сжатия, рационально применять только один из них, чтобы не дублировать выполнение задачи и не нагружать серверные ресурсы.Сохраненная копия
Почему важна скорость загрузки сайта?
Чем медленнее сайт, тем чаще пользователи покидают его в поисках альтернативы, так и не дождавшись окончательной загрузки страницы. Согласно исследованиям Google, 53% пользователей закроют сайт, если он будет загружаться дольше 3 секунд, и с каждой дополнительной секундой количество ушедших с вашего сайта будет расти.
Как повысить скорость интернета до 100 Мб с?
**Как **увеличить скорость интернета****1. Смените тарифный план 2. Обновите операционную систему, драйверы и приложения 3. Удалите лишние программы 4. Установите антивирус 5. Установите блокировщик рекламы 6. Удалите ненужные расширения браузера. 7. Закройте лишние вкладки 8. Уменьшите разрешение видео
Какая скорость важнее скачать или загрузить?
«ЗАГРУЗИТЬ» — скорость отправки данных в Интернет (исходящая скорость). Наиболее важен для таких операций, как загрузка видео и фото на сайты или если с нашего компьютера что-то будут скачивать.
Источник: gud-pc.com
ТОП-12 вариантов, как улучшить скорость загрузки сайта самому
Медленный сайт не нравится никому – ни пользователям, ни поисковикам. При нынешней скорости интернета люди уже не готовы долго ждать загрузки страницы. Это вам не подключение по диал-апу, где ожидание было неизбежно. А поисковые системы, борясь за качество результатов поиска, не хотят выдавать пользователям плохие (в данном случае, медленные) сайты. Поэтому при прочих равных медленный сайт будет в выдаче ниже, чем его более шустрые конкуренты.
Какую скорость загрузки считать нормой
Чем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы – это вполне нормально.
От чего зависит скорость загрузки
В загрузке сайта участвуют две стороны – браузер пользователя и сервер, где физически расположены файлы сайта. Между этими сторонами происходит обмен данными.
Тормозить загрузку сайта могут проблемы на каждой из сторон и в промежутке между ними.
- Медленный сервер: может банально не хватать оперативной памяти или ядер в процессоре, как у обычного компьютера.
- Медленный движок сайта (CMS): если код был написан неопытными программистами без учета его быстродействия.
- Сервер далеко от пользователя: например, сервер с файлами сайта физически находится в Москве, а на сайт заходит пользователь из Владивостока.
- Много файлов: для отображения страницы браузеру нужно загрузить много картинок, файлов, стилей, скриптов и шрифтов.
- Тяжелые файлы: плюс эти файлы много весят.
Все шаги по оптимизации скорости сайта направлены на устранение данных проблем.
Как проверить скорость сайта
Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed. Работать с ним просто – указываем адрес сайта и жмем кнопку «Анализировать».
В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):
- Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP – First Contentful Paint).
- Через какое время пользователь видит основной контент в браузере (DCL – DOM Content Loaded).
- Насколько сайт оптимизирован в плане скорости загрузки.
- Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).
Желательно попасть в зеленую зону – и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».
Еще один хороший сервис для проверки скорости загрузки, правда, на английском – Pingdom. Отличительная черта – вот такие красивые графики (называются waterfall – водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:
А теперь к сути:
Как ускорить сайт
Шаг 1. Оптимизация картинок
Неоптимизированные картинки – самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.
- Размер картинок (ширина и высота) Если вы отсняли товар и получили фотографии шириной около 5000 пикселей, можете смело уменьшать ширину до 1600, в большинстве случаев этого будет достаточно. Исключением будут те сайты (в основном, интернет-магазины), где можно рассмотреть товар с «лупой», но и там увеличенная картинка загружается не сразу, а только если человек решил воспользоваться этим инструментом.
- Вес картинок (килобайты) Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla.
- Превью к большим картинкам Если у вас есть фотографии товаров (или выполненных работ) и есть страница с их списком, разумно будет сделать небольшие превью (уменьшенные картинки). Тогда список товаров, работ или фотографий будет загружаться быстрее.
Например, Спортмастер использует картинки товаров в трех вариантах:
- Картинка для списка товаров (весит 7 Кб) https://cdn.sptmr.ru/upload/resize_cache/iblock/9f9/176_188_1/14440990299.jpg
- Картинка для карточки товара (весит 18 Кб) https://cdn.sptmr.ru/upload/resize_cache/iblock/9f9/331_394_1/14440990299.jpg
- Картинка для просмотра товара с «лупой» (весит 942 Кб) https://cdn.sptmr.ru/upload/iblock/9f9/14440990299.jpg
Представьте, как долго загружался бы список товаров, если бы Спортмастер использовал только исходные картинки (те, что по 900 с лишним килобайт).
При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:
Шаг 2. Gzip-сжатие
Gzip – это программа для сжатия файлов на сервере (аналог zip-архивов на компьютере). При включенном Gzip сервер, перед тем как отправлять браузеру код страницы (а также скрипты, стили и прочую текстовую информацию), сперва заархивирует эти файлы. Браузер получит архив и распакует его на компьютере пользователя. Сжатая информация будет передаваться быстрее между браузером и сервером.
Как включить Gzip-сжатие:
-
Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
gzip on;
gzip_static on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):
Шаг 3. Кэширование на стороне браузера
Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).
Чтобы использовать кэш браузера, нужно указать ему, какие типы файлов с вашего сайта сохранять в кэш. Как это сделать:
-
Через файл htaccess (кэшируем статические файлы на 10 дней):
ExpiresActive On
ExpiresDefault «access plus 10 days»
ExpiresByType image/gif «access plus 10 days»
ExpiresByType image/jpg «access plus 10 days»
ExpiresByType image/jpeg «access plus 10 days»
ExpiresByType image/png «access plus 10 days»
ExpiresByType image/svg+xml «access plus 10 days»
ExpiresByType text/css «access plus 10 days»
server <
.
location ~* .(jpg|jpeg|gif|png|ico|css|js|txt)$ <
root /var/www/user/data/www/site.ru;
expires 10d;
>
.
>
Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:
Обратите внимание, что настроить кэширование вы можете только для своих ресурсов. Изменить настройки кэша, например, для скриптов Яндекс.Метрики уже не получится.
Шаг 4. Минимизация css- и js-файлов
Минимизация – это сокращение объема файла за счет удаления пробелов, пустых строк, комментариев, использования более коротких имен переменных и т.п. Браузеру все равно, с каким файлом работать – обычным или минимизированным, а весит такой файл меньше.
Пример обычного кода:
.speedometer-wrapper <
position : relative ;
>
.speedometer-wrapper .list <
margin-top : 80px ;
margin-left : -20px ;
padding-bottom : 85px ;
>
.speedometer-wrapper < position : relative >.speedometer-wrapper .list < margin-top : 80px ; margin-left : -20px ; padding-bottom : 85px >
Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей – подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант – 85 Кб. Чувствуете разницу?
Единственный минус минификации – теряется читабельность файла. Если понадобится внести изменения в сжатый файл – сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS – они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.
PageSpeed и здесь заботливо показывает нам список файлов, размер которых можно уменьшить за счет минимизации:
Шаг 5. Порядок загрузки css- и js-файлов
Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет прослыть «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился – тогда отрисовка остановится.
Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) – в конце страницы, перед закрывающим тегом .
Тогда браузер загрузит стили, необходимые для отрисовки, и начнет показывать страницу пользователю, параллельно загружая необходимые скрипты (которые затем обеспечат интерактив – слайдеры, вкладки и пр.).
Шаг 6. Лишние плагины или счетчики
Иногда в коде страниц остаются ссылки на плагины или модули, которые уже не используются на сайте. Например, сначала верстальщик подключил один плагин для слайдеров, а затем заменил его на новый, но не удалил старый. Или остаются коды от счетчиков, статистику по которым вы уже не смотрите. Обязательно уберите такой «мусор» из кода.
Старайтесь оптимизировать использование дополнительных скриптов. Например, если у вас есть слайдеры на трех страницах сайта, то на всех страницах используйте один и тот же плагин для слайдера – не надо каждый раз подключать какой-то особый скрипт.
Шаг 7. Использование CDN
CDN (Content Delivery Network, сеть доставки контента) – это сеть из множества серверов, распределенных географически по стране или всему миру. Каждый из серверов дублирует контент с основного сервера (контент дублируется по первому запросу пользователем и хранится в течение какого-то времени).
Когда пользователь, например, из Хабаровска, хочет загрузить что-то из CDN, то он получает контент не с основного сервера (который может быть, например, в Москве), а с ближайшего к пользователю сервера (который может быть и в том же Хабаровске). Широка страна моя родная, поэтому запрос Хабаровск-Хабаровск пройдет быстрее запроса Хабаровск-Москва. Пусть на миллисекунды, но в умножении на число файлов и их размер это может дать хорошее увеличение скорости.
Как правило, CDN используют в двух случаях:
- Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
- Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath. Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».
Шаг 8. Сокращение числа http-запросов
Чтобы браузер делал меньше обращений к серверу (а это и есть http-запросы), нужно сократить число необходимых ему файлов. Например, если у вас есть три отдельных скрипта (для слайдера, для модальных окон и для всплывающих подсказок), то можно объединить их в один файл, а потом еще и минифицировать (см. шаг 4).
Так как объединять файлы вручную не совсем удобно (если в будущем понадобится заменить один из скриптов), то обычно настраивают их автоматическое слияние. У большинства CMS для этого есть свои плагины (например, Autoptimize для WordPress).
Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.
Шаг 9. Оптимизация шрифтов
Постарайтесь использовать один единый шрифт на всем сайте. Это не только добавит сайту эстетичности, но и уменьшит объем загружаемых файлов для отображения шрифтов.
Также сократить число файлов можно, отказавшись от использования устаревших форматов. Раньше каждый шрифт загружался в форматах eot, ttf, woff, svg для корректного отображения в браузерах. Сейчас современные браузеры позволяют ограничиться только двумя форматами – woff и woff2.
Кроме того, популярные шрифты можно загружать с Google Fonts. Во-первых, это снимет нагрузку с вашего сервера. Во-вторых, файлы со шрифтами уже будут оптимизированы, это перекладывается с ваших плеч на Google (что, согласитесь, приятно).
Шаг 10. Сокращение HTML-кода
Помимо сжатия файлов стилей и скриптов (шаг 4), можно настроить минимизацию и для HTML-кода самой страницы. Думаю, это актуально для длинных страниц – статей в блогах, больших списков товаров и т.п. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).
Шаг 11. Оптимизация работы сервера
Если у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно попробовать проапгрейдить его параметры. Например, добавить оперативной памяти или заменить процессор. Также сисадмин может провести «уборку» на самом сервере – удалить неиспользуемые и обновить текущие модули.
В случае с виртуальным хостингом (без доступа к настройкам сервера) вы можете посмотреть в сторону перехода на более дорогие тарифы, если на них лучше технические характеристики сервера.
Шаг 12. Оптимизация скриптов и баз данных
Один из этапов загрузки сайта – это генерация сервером итогового HTML-кода, который он отдаст браузеру. Этот код генерируется движком сайта (CMS). Если движок написан неграмотно, то он может «собирать» страницу весьма долго, делая лишние запросы к файлам и базам данных, используя «медленные» алгоритмы программирования и т.д.
Поэтому при выборе CMS для сайта рекомендуется смотреть в сторону популярных движков (Битрикс, Open Cart, WordPress, MODx и т.д.), которые зарекомендовали свое быстродействие и надежность. А так как эти системы постоянно дорабатываются (в том числе, и в плане скорости работы), то следует регулярно обновлять CMS на своем сайте.
Нет слоупокам
Позаботьтесь о быстрой загрузке своего сайта. Помните, что в результатах поиска много конкурентов, и чем быстрее загрузится ваш сайт, тем меньше других сайтов человек успеет открыть в соседних вкладках.
Если нужна помощь в оптимизации скорости загрузки сайта – пишите, посмотрим ваш сайт и подскажем, можно ли его ускорить.
0
0
0
0
0
Спасибо за реакцию, она бесценна! Обязательно подпишитесь на наш Telegram-канал, публикуем много интересных и актуальных материалов. Не пользуетесь Telegram, тогда познакомьтесь с Катей и подпишитесь на нашу рассылку. ×
Источник: 1ps.ru