Миграция и закон

Скорость загрузки сайта – один из ключевых факторов SEO продвижения в 2019 году

Понравится и работать с нами.

Скорость оценивают и учитывают при ранжировании поисковые системы, особенно сегодня, в эпоху мобильного интернета, а еще она крайне важна для реальных пользователей. Мало кто спокойно смотрит по 5-10 секунд на страницу загрузки – до 75% людей просто выбирают более быстрые ресурсы.

Поэтому советуем обязательно включить в стратегию SEO-продвижения работу со скоростью: без этого ваши потенциальные клиенты уходят, даже не увидев сайт. Посмотрим, от чего зависит скорость загрузки сайта, как ее измерить и какие проверенные способы ускориться существуют сегодня.

Что мы имеем в виду под скоростью сайта

«Скорость загрузки» кажется абстрактным понятием, пока мы не знаем, что именно замеряется. Рассказываем, из каких показателей складывается общая скорость сайта:

1. Время, за которое отвечает сервер – как только загрузился первый байт информации, ответ получен. В идеале это должно занимать доли секунды.
2. Время, за которое отрисовываются страницы. Когда информация с сервера начала загружаться, на экране пользователя появляются очертания страниц с выделенным местом под фото, интерактивные элементы и другие блоки.
3. Время, за которое загружается контент. Когда на устройстве пользователя отобразились все картинки, кнопки и текст с вашего сервера, можно считать страницу полностью загруженной.

Чем меньше времени занимают все 3 этапа, тем выше ваша скорость работы сайта по сравнению с конкурентами. Загрузка за 1-2 секунды – идеальный показатель, а вот если сайт грузится дольше 10 секунд даже на десктопах, вам срочно нужно ускоряться.

От чего зависит скорость сайта

Вот основные факторы, которые могут тормозить или ускорять загрузку вашего сайта:

• Количество и вес контента на странице (сколько вы используете картинок и встроенных элементов, в каком разрешении).
• Тип и возможности движка (системы управления сайтом, CMS).
• Техническая сложность сайта, HTML-верстка.
• Пользовательские факторы – вы не можете на них влиять, но они тоже определяют скорость загрузки сайта. Это вид и модель устройства, с которого просматривают страницу, а также тип соединения и скорость интернета. Понятно, что скоростной домашний или офисный Wi-Fi выигрывает по сравнению с 3G-сетями.
• Тип хостинга, который вы используете, технические возможности сервера, а также физическое расстояние от пользователя до дата-центра.

Как проверить скорость сайта

Для проверки можно использовать инструменты Яндекс.Вебмастера или Гугл, а также специальные SEO сервисы вроде Screaming Frog и других подобных ему.

Посмотрим, как проверять скорость загрузки сайта в Google Page Speed – бесплатном официальном сервисе. Тест занимает менее 1 минуты, причем вы видите не только общую скорость в секундах, но и полезную дополнительную информацию.

Чтобы запустить проверку скорости сайта Google, скопируйте в строку URL любой страницы.

Сервис покажет в секундах и миллисекундах время отрисовки страниц, ответа сервера и других процессов.

А еще система сразу предложит несколько решений, чтобы оптимизировать загрузку.

Помимо мгновенного теста, вы можете постоянно мониторить время загрузки отельных страниц – делать это позволяет, например, сервис вебаналитики Google Analytics.

Как ускорить загрузку сайта

Если онлайн-проверка скорости сайта показала, что ваши посетители ждут загрузку больше 4-5 секунд, советуем использовать приемы из списка ниже.

«Облегчаем» графику

Картинки, фото и элементы дизайна могут сильно тормозить загрузку сайта, если вы их не оптимизируете.

Чтобы сократить общий вес графики на странице в 1,5-2 раза, делаем следующее:

• Удаляем лишние элементы, но не увлекаемся: страница должна остаться привлекательной для пользователя визуально.
• Везде, где возможно, заменяем PNG-картинки изображениями в формате JPEG: его проще уменьшить без потери качества.
• Сжимаем слишком крупные JPEG-картинки. Уменьшаем разрешение всего на 25-50% и значительно выигрываем в скорости загрузки страниц сайта.

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

Применяем сжатие данных

Технологии сжатия zip или gzip на 50-75% уменьшают объем страниц. Это значит, что сайт будет загружаться быстрее, а вы сможете сэкономить на оплате хостинга. Подключить опцию сжатия помогут администраторы сервера, на котором расположен ваш сайт.

Кэшируем данные

Этот способ увеличивает скорость загрузки сайта для тех, кто уже был на вашем ресурсе. Во время первого посещения объемные элементы страниц сохранятся в браузере пользователя и в дальнейшем будут быстро отображаться из кэша.

Упрощаем JavaScript и CSS-файлы

Уменьшаем объем элементов JavaScript и CSS и экономим время загрузки – удаляем из кода ненужные комментарии, пробелы и т.д. Для этого используем сервисы: например, CSS Drive или CSS Compressor.

Еще один лайфхак с JavaScript-файлами: их лучше размещать в конце страницы, чтобы браузер не тратил время на скрипты, а загружал в первую очередь основные элементы.

Применяем CDN

Если сайт медленно загружается из-за удаленности сервера в пространстве, решаем проблему с помощью CDN-сети доставки контента. Это работает так: ваш сайт хранится одновременно на нескольких серверах (до 10-20) и загружается именно из того хранилища, которое географически ближе к конкретному пользователю. Примеры таких сетей – Amazon CloudFront или Akamai.

Подключаем Турбо и AMP-страницы

Альтернативный способ – не только оптимизировать основной сайт, но и создать ускоренные версии страниц для мобильной выдачи.

Сайт с Яндекс Турбо буквально взлетает: ускоренные страницы подгружаются плюс-минус за 1 секунду. Страницы Яндекс-Турбо и AMP Google имеют упрощенный стандартный дизайн, весят примерно в 10 раз меньше обычных и хранятся на серверах поисковиков.

Всегда ли нужно ускорять сайт

Бывает, что сервис проверки показывает плохой результат, а на практике причин паниковать нет. Чтобы избежать бессмысленной работы, не рассматривайте цифры отдельно от посещаемости сайта, портрета вашей аудитории и других факторов.

В каких случаях ускорять страницы не нужно, даже если сервис проверки советует это сделать:

1. Когда речь идет о непопулярных и неосновных страницах сайта, на которые практически не переходят из поиска. Они могут загружаться медленно, и в этом нет ничего страшного.
2. Когда на статистику влияет ваш целевой трафик. Бывает, что с сайтом всё в порядке – просто у большинства пользователей медленный интернет или недостаточно мощные смартфоны.
3. Когда причина медленной загрузки – ненадежный хостинг или тарифные ограничения сервера. В этом случае бесполезно оптимизировать сайт: нужно либо переезжать на другой сервер, либо попробовать тариф с большим пакетом опций.
4. Когда все важнейшие показатели растут – конверсия и продажи в норме, сайт по-прежнему в ТОПе выдачи. Если реальных ухудшений нет, скорость допустимо оставить в пределах «хорошо, но можно лучше».

Как поддерживать стабильную работу сайта

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

Как ускорить загрузку сайта?

Время чтения: 9 минут Нет времени читать? Нет времени?

Быстрая скорость загрузки сайта чрезвычайно важна. Она улучшает пользовательский опыт, увеличивает коэффициент конверсии, вовлеченность пользователей и даже поднимает сайт в результатах выдачи. Особенно большое значение она приобретает, если речь идет о мобильном трафике. Ведь никто не хочет заходить со смартфона на страницу, которая весит 4 Мб, и ждать, пока она загрузится целую вечность.

Насколько быстрой должна быть скорость загрузки сайта?

• 1 секунда – великолепно.
• 2-3 секунды – очень хорошо.
• 4-7 секунд – нормально, но есть куда расти.
• 8-10 секунд – плохо.
• 11 секунд и более – ужасно, начинайте бить тревогу, т.к. огромные деньги утекают прямо из-под вашего носа.

Согласно исследованию Strangeloop, в ходе которого была протестирована скорость загрузки 2000 топовых интернет-магазинов, в среднем скорость загрузки коммерческих сайтов составляет 10 секунд. Возможно, вы спросите: «С какой стати мы должны улучшать скорость загрузки своего сайта, если даже топовые интернет-магазины грузятся так долго?» А вот и ответ:

• 57% посетителей покидают страницу, которая грузится более 3-х секунд.
• В те моменты, когда сайт тормозит из-за большого количества трафика, более 75% онлайн-покупателей предпочитают уйти на сайт конкурента.
• 2 секунды – столько примерно будет ждать терпеливый пользователь до тех пор, пока на экране появится информация. Добавление такого элемента, как «прогресс-бар» может продлить время его ожидания до 38 секунд.
• Сайт, который грузится 3 секунды, имеет на 22% меньше просмотров, на 50% больше отказов и на 22% меньше конверсии, чем сайт, который грузится 1 секунду. Сайт, который грузится 5 секунд, имеет еще более плохие показатели – на 35% меньше просмотров, на 105% больше отказов и на 38% меньше конверсии.
• 8% людей считают, что главной причиной их ухода с сайта является медленная загрузка страниц.

Сервисы, с помощью которых можно протестировать скорость загрузки сайта:

Обращаем ваше внимание, данные сервисы не смогут решить ваши проблемы. Их главная функция – проанализировать скорость загрузки сайта. Все дальнейшие действия должны исходить именно от вас.

Чем быстрей загружается сайт, тем лучше конверсия

Чтобы убедиться в этом, изучите следующие результаты исследований:

• Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
• Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
• Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
• 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

Если вам интересно, сколько ваша компания могла бы заработать, если бы скорость загрузки вашего сайта была бы больше, воспользуйтесь калькулятором компании Sharpe Digital (на английском). Возможно, конкретные цифры станут для вас лучшим стимулом к действию.

5 способов увеличить скорость загрузки сайта

Итак, что же можно сделать, чтобы ускорить загрузку сайта:

1. Уменьшите размер страниц сайта

Слишком «тяжелый» контент долго загружается. Уменьшая размер страниц сайта, вы автоматически увеличиваете скорость его загрузки. Кроме этого, вы экономите средства, если хостинг-провайдер берет с вас плату за трафик.

Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

Чтобы уменьшить размер страниц, попросите хостинг-провайдера или администратора сервера включить опцию сжатия данных протокола HTTP. Чтобы оценить полученный эффект, воспользуйтесь одним из сервисов проверки сжатия, например, вот этим. Если администратор сервера все сделал правильно, вы увидите примерно следующую картину:

2. Снизьте «вес» графики

Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

• Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
• Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
• Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
• Очищайте графические файлы от цифрового мусора. Различные редакторы фото, которыми наверняка пользуется ваш дизайнер, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры и т.п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисами Pngcrush, или Smush.it.

Уменьшая «вес» фотографий, постарайтесь сохранить эстетическую привлекательность сайта. Пользователи и поисковые системы больше ценят визуально привлекательные ресурсы.

3. Упростите код JavaScript и CSS

Использование специальных средств упрощения кода JavaScript и CSS уменьшает «вес» соответствующих элементов сильнее, чем стандартные технологии сжатия, например, gzip. Сервисы упрощения удаляют из кода лишние элементы, а также сокращают названия функций.

Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

4. Уменьшите число запросов браузера

Чем больше запросов посылает браузер читателя при загрузке страницы, тем медленнее она загружается. Чтобы уменьшить время загрузки, вам необходимо создать условия, при которых браузер посетителя посылает как можно меньше запросов. Этого можно добиться, уменьшив количество фотографий, файлов JavaScript, кодов сторонних ресурсов и сервисов и т.п.

Вы никогда не задумывались, почему главная страница Google выглядит так аскетично? Вероятно, одной из причин является желание разработчиков увеличить скорость ее загрузки.

Но если вы не достигли популярности Google, пустая страница сайта может расстроить ваших пользователей. Если рекомендация удалять все лишнее вам не вполне подходит, воспользуйтесь следующими советами, позволяющими уменьшить количество запросов браузера:

• Разрешите браузерам кэшировать данные. Если страницы вашего сайта являются статическими, нет нужды «заставлять» посетителей всякий раз загружать их содержимое заново. Попросите администратора сервера или хостинг-провайдера включить опцию кэширования фотографий, элементов CSS и JavaScript. Чтобы проверить результат этого действия, воспользуйтесь, например, сервисом Redbot.

• Комбинируйте и сжимайте файлы CSS и JavaScript. Объединяя эти элементы, вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Чтобы объединить файлы CSS и JavaScript, воспользуйтесь специальными сервисами и ПО, например, CakePHP.
• Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe, чтобы проверить эффективность данной рекомендации на практике.

Обратите внимание, включив опцию кэширования, вы не влияете на скорость загрузки сайта при первом посещении. Однако при повторном посещении скорость загрузки сайта приятно удивит ваших клиентов. Конечно, если они не пользуются утилитами очистки типа CCleaner.

5. Сократите расстояние между сайтом и пользователями

Если сервер вашего хостинг-провайдера находится во Владивостоке, посетителям из Санкт-Петербурга придется набраться терпения, ожидая загрузки страницы. Эта проблема особенно актуальна для сайтов с «тяжелым» контентом, которые посещают пользователи, физически удаленные от сервера на большие расстояния. Чтобы решить эту проблему, воспользуйтесь сетями доставки контента (CDN), например, Amazon CloudFront или Akamai.

Как проверить и увеличить скорость загрузки сайта

Скорость загрузки сайта – один из ключевых факторов SEO продвижения в 2019 году

Понравится и работать с нами.

Скорость оценивают и учитывают при ранжировании поисковые системы, особенно сегодня, в эпоху мобильного интернета, а еще она крайне важна для реальных пользователей. Мало кто спокойно смотрит по 5-10 секунд на страницу загрузки – до 75% людей просто выбирают более быстрые ресурсы.

Поэтому советуем обязательно включить в стратегию SEO-продвижения работу со скоростью: без этого ваши потенциальные клиенты уходят, даже не увидев сайт. Посмотрим, от чего зависит скорость загрузки сайта, как ее измерить и какие проверенные способы ускориться существуют сегодня.

Что мы имеем в виду под скоростью сайта

«Скорость загрузки» кажется абстрактным понятием, пока мы не знаем, что именно замеряется. Рассказываем, из каких показателей складывается общая скорость сайта:

1. Время, за которое отвечает сервер – как только загрузился первый байт информации, ответ получен. В идеале это должно занимать доли секунды.
2. Время, за которое отрисовываются страницы. Когда информация с сервера начала загружаться, на экране пользователя появляются очертания страниц с выделенным местом под фото, интерактивные элементы и другие блоки.
3. Время, за которое загружается контент. Когда на устройстве пользователя отобразились все картинки, кнопки и текст с вашего сервера, можно считать страницу полностью загруженной.

Чем меньше времени занимают все 3 этапа, тем выше ваша скорость работы сайта по сравнению с конкурентами. Загрузка за 1-2 секунды – идеальный показатель, а вот если сайт грузится дольше 10 секунд даже на десктопах, вам срочно нужно ускоряться.

От чего зависит скорость сайта

Вот основные факторы, которые могут тормозить или ускорять загрузку вашего сайта:

• Количество и вес контента на странице (сколько вы используете картинок и встроенных элементов, в каком разрешении).
• Тип и возможности движка (системы управления сайтом, CMS).
• Техническая сложность сайта, HTML-верстка.
• Пользовательские факторы – вы не можете на них влиять, но они тоже определяют скорость загрузки сайта. Это вид и модель устройства, с которого просматривают страницу, а также тип соединения и скорость интернета. Понятно, что скоростной домашний или офисный Wi-Fi выигрывает по сравнению с 3G-сетями.
• Тип хостинга, который вы используете, технические возможности сервера, а также физическое расстояние от пользователя до дата-центра.

Как проверить скорость сайта

Для проверки можно использовать инструменты Яндекс.Вебмастера или Гугл, а также специальные SEO сервисы вроде Screaming Frog и других подобных ему.

Посмотрим, как проверять скорость загрузки сайта в Google Page Speed – бесплатном официальном сервисе. Тест занимает менее 1 минуты, причем вы видите не только общую скорость в секундах, но и полезную дополнительную информацию.

Чтобы запустить проверку скорости сайта Google, скопируйте в строку URL любой страницы.

Сервис покажет в секундах и миллисекундах время отрисовки страниц, ответа сервера и других процессов.

А еще система сразу предложит несколько решений, чтобы оптимизировать загрузку.

Помимо мгновенного теста, вы можете постоянно мониторить время загрузки отельных страниц – делать это позволяет, например, сервис вебаналитики Google Analytics.

Как ускорить загрузку сайта

Если онлайн-проверка скорости сайта показала, что ваши посетители ждут загрузку больше 4-5 секунд, советуем использовать приемы из списка ниже.

«Облегчаем» графику

Картинки, фото и элементы дизайна могут сильно тормозить загрузку сайта, если вы их не оптимизируете.

Чтобы сократить общий вес графики на странице в 1,5-2 раза, делаем следующее:

• Удаляем лишние элементы, но не увлекаемся: страница должна остаться привлекательной для пользователя визуально.
• Везде, где возможно, заменяем PNG-картинки изображениями в формате JPEG: его проще уменьшить без потери качества.
• Сжимаем слишком крупные JPEG-картинки. Уменьшаем разрешение всего на 25-50% и значительно выигрываем в скорости загрузки страниц сайта.

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

Применяем сжатие данных

Технологии сжатия zip или gzip на 50-75% уменьшают объем страниц. Это значит, что сайт будет загружаться быстрее, а вы сможете сэкономить на оплате хостинга. Подключить опцию сжатия помогут администраторы сервера, на котором расположен ваш сайт.

Кэшируем данные

Этот способ увеличивает скорость загрузки сайта для тех, кто уже был на вашем ресурсе. Во время первого посещения объемные элементы страниц сохранятся в браузере пользователя и в дальнейшем будут быстро отображаться из кэша.

Упрощаем JavaScript и CSS-файлы

Уменьшаем объем элементов JavaScript и CSS и экономим время загрузки – удаляем из кода ненужные комментарии, пробелы и т.д. Для этого используем сервисы: например, CSS Drive или CSS Compressor.

Еще один лайфхак с JavaScript-файлами: их лучше размещать в конце страницы, чтобы браузер не тратил время на скрипты, а загружал в первую очередь основные элементы.

Применяем CDN

Если сайт медленно загружается из-за удаленности сервера в пространстве, решаем проблему с помощью CDN-сети доставки контента. Это работает так: ваш сайт хранится одновременно на нескольких серверах (до 10-20) и загружается именно из того хранилища, которое географически ближе к конкретному пользователю. Примеры таких сетей – Amazon CloudFront или Akamai.

Подключаем Турбо и AMP-страницы

Альтернативный способ – не только оптимизировать основной сайт, но и создать ускоренные версии страниц для мобильной выдачи.

Сайт с Яндекс Турбо буквально взлетает: ускоренные страницы подгружаются плюс-минус за 1 секунду. Страницы Яндекс-Турбо и AMP Google имеют упрощенный стандартный дизайн, весят примерно в 10 раз меньше обычных и хранятся на серверах поисковиков.

Всегда ли нужно ускорять сайт

Бывает, что сервис проверки показывает плохой результат, а на практике причин паниковать нет. Чтобы избежать бессмысленной работы, не рассматривайте цифры отдельно от посещаемости сайта, портрета вашей аудитории и других факторов.

В каких случаях ускорять страницы не нужно, даже если сервис проверки советует это сделать:

1. Когда речь идет о непопулярных и неосновных страницах сайта, на которые практически не переходят из поиска. Они могут загружаться медленно, и в этом нет ничего страшного.
2. Когда на статистику влияет ваш целевой трафик. Бывает, что с сайтом всё в порядке – просто у большинства пользователей медленный интернет или недостаточно мощные смартфоны.
3. Когда причина медленной загрузки – ненадежный хостинг или тарифные ограничения сервера. В этом случае бесполезно оптимизировать сайт: нужно либо переезжать на другой сервер, либо попробовать тариф с большим пакетом опций.
4. Когда все важнейшие показатели растут – конверсия и продажи в норме, сайт по-прежнему в ТОПе выдачи. Если реальных ухудшений нет, скорость допустимо оставить в пределах «хорошо, но можно лучше».

Как поддерживать стабильную работу сайта

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

Самый простой способ ускорить загрузку сайта

Скорость загрузки сайта влияет на позиции в поисковой выдаче.

Есть один крайне простой способ, используя который можно повысить скорость загрузки страниц.

Далее рассмотрим что делать и принцип действия.

Как ускорить загрузку сайта быстро и просто?

На большинстве сайтов используется код JavasScript. По умолчанию робот использует последовательную загрузку скриптов.

На практике наиболее распространенные сценарии применения скриптов следующие:

• Подключение систем аналитики, таких как Google Analytics и/или Yandex Метрика;
• Использование скриптов JavaScript при решении задач по или .

Поисковая система оценивает скорость загрузки сайта через имитацию браузера пользователя.

Браузер пользователя выполняет множество шагов, прежде чем ответ в виде кода HTML от сервера будет передан клиенту и преобразован в пиксели на экране.

Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.

Если нет желания разбираться в технических деталях (все-таки уже потеплело на улице), то для ускорения загрузки страниц сайта просто прочитайте и внедрите следующие правила:

• Код JavaScript должен быть вынесен во внешний файл;
• К тегу должен быть добавлен атрибут .

Далее рассмотрим технические детали, полезные для понимания того, за счет чего происходит улучшение производительности сайта.

До вывода страницы на экран проходит 6 этапов критического пути рендеринга:

1. Построение DOM-дерева;
2. Построение CSSOM-дерева;
3. Запуск JavaScript;
4. Создание Render-дерева;
5. Генерация расположения;
6. Визуализация.

Под термином DOM (Document Object Model) подразумевается объектная модель страницы.

Структура DOM выстраивается из узлов, так называемых нодов (от nodes).

HTML может быть исполнен по частям, но другие ресурсы, такие как CSS и JavaScript, зачастую блокируют отрисовку страницы.

Под термином CSSOM (CSS Object Model) подразумевается объектная модель стилей страницы сайта.

Не имеет значения то, как стили были заданы: объявлены явно или наследуются.

CSS является блокирующим обработку ресурсом, а значит Render-дерево не может быть построено без полного первоначального разбора CSS.

CSS не может быть выполнен по частям, так как стили могут переопределяться. Иными словами, стили будут применяться неверно, если начать использовать их до того как будет полностью обработана таблица стилей.

Render-дерево представляет собой объединение из DOM и CSSOM, и включает только видимые элементы. Например, исключаются элементы, которые были скрыты с использованием display none.

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

Поисковая оптимизация критического пути рендеринга

Модели DOM и CSSOM связаны с JavaScript.

JavaScript является блокирующим ресурсом для роботов, то есть JavaScript блокирует разбор HTML-документа.

Когда робот видит тег script, то происходит остановка процесса, робот начинает выполнять JavaScript. Если скрипт размещен на внешнем ресурсе, то робот еще идет забирать код с другого ресурса. Начинаются лаги и, как следствие, страница сайта открывается не очень быстро.

Но блокировки робота можно избежать!

JavaScript можно загружать асинхронно. В отдельных случаях, загрузку скрипта и вовсе можно отложить.

Есть 2 важных директивы:

• async;
• defer.

При не использовании директив код выглядит так:

ТОП-12 вариантов, как улучшить скорость загрузки сайта самому

Медленный сайт не нравится никому – ни пользователям, ни поисковикам. При нынешней скорости интернета люди уже не готовы долго ждать загрузки страницы. Это вам не подключение по диал-апу, где ожидание было неизбежно. А поисковые системы, борясь за качество результатов поиска, не хотят выдавать пользователям плохие (в данном случае, медленные) сайты. Поэтому при прочих равных медленный сайт будет в выдаче ниже, чем его более шустрые конкуренты.

Какую скорость загрузки считать нормой

Чем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы – это вполне нормально.

От чего зависит скорость загрузки

В загрузке сайта участвуют две стороны – браузер пользователя и сервер, где физически расположены файлы сайта. Между этими сторонами происходит обмен данными.

Тормозить загрузку сайта могут проблемы на каждой из сторон и в промежутке между ними.

• Медленный сервер: может банально не хватать оперативной памяти или ядер в процессоре, как у обычного компьютера.
• Медленный движок сайта (CMS): если код был написан неопытными программистами без учета его быстродействия.
• Сервер далеко от пользователя: например, сервер с файлами сайта физически находится в Москве, а на сайт заходит пользователь из Владивостока.
• Много файлов: для отображения страницы браузеру нужно загрузить много картинок, файлов, стилей, скриптов и шрифтов.
• Тяжелые файлы: плюс эти файлы много весят.

Все шаги по оптимизации скорости сайта направлены на устранение данных проблем.

Как проверить скорость сайта

Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed. Работать с ним просто – указываем адрес сайта и жмем кнопку «Анализировать».

В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):

• Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP – First Contentful Paint).
• Через какое время пользователь видит основной контент в браузере (DCL – DOM Content Loaded).
• Насколько сайт оптимизирован в плане скорости загрузки.
• Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

Желательно попасть в зеленую зону – и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

Еще один хороший сервис для проверки скорости загрузки, правда, на английском – Pingdom. Отличительная черта – вот такие красивые графики (называются waterfall – водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

А теперь к сути:

Как ускорить сайт

Шаг 1. Оптимизация картинок

Неоптимизированные картинки – самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.

Размер картинок (ширина и высота)

Если вы отсняли товар и получили фотографии шириной около 5000 пикселей, можете смело уменьшать ширину до 1600, в большинстве случаев этого будет достаточно. Исключением будут те сайты (в основном, интернет-магазины), где можно рассмотреть товар с «лупой», но и там увеличенная картинка загружается не сразу, а только если человек решил воспользоваться этим инструментом.

Вес картинок (килобайты)

Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla.

Превью к большим картинкам

Если у вас есть фотографии товаров (или выполненных работ) и есть страница с их списком, разумно будет сделать небольшие превью (уменьшенные картинки). Тогда список товаров, работ или фотографий будет загружаться быстрее.

Например, Спортмастер использует картинки товаров в трех вариантах:

Картинка для списка товаров (весит 7 Кб)

Картинка для карточки товара (весит 18 Кб)

Картинка для просмотра товара с «лупой» (весит 942 Кб)

Представьте, как долго загружался бы список товаров, если бы Спортмастер использовал только исходные картинки (те, что по 900 с лишним килобайт).

При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

Шаг 2. Gzip-сжатие

Gzip – это программа для сжатия файлов на сервере (аналог zip-архивов на компьютере). При включенном Gzip сервер, перед тем как отправлять браузеру код страницы (а также скрипты, стили и прочую текстовую информацию), сперва заархивирует эти файлы. Браузер получит архив и распакует его на компьютере пользователя. Сжатая информация будет передаваться быстрее между браузером и сервером.

Как включить Gzip-сжатие:

Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):

Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http и перезапускаем сервер:

Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

Шаг 3. Кэширование на стороне браузера

Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).

Чтобы использовать кэш браузера, нужно указать ему, какие типы файлов с вашего сайта сохранять в кэш. Как это сделать:

Через файл htaccess (кэшируем статические файлы на 10 дней):

Для Nginx добавляем в конфигурацию:

* .(jpg|jpeg|gif|png|ico|css|js|txt)$ <
root /var/www/user/data/www/site.ru;
expires 10d;
>
.
>

Если к настройкам сервера доступа нет, опять же пишем в техподдержку и просим настроить кэширование статических файлов.

Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

Обратите внимание, что настроить кэширование вы можете только для своих ресурсов. Изменить настройки кэша, например, для скриптов Яндекс.Метрики уже не получится.

Шаг 4. Минимизация css- и js-файлов

Минимизация – это сокращение объема файла за счет удаления пробелов, пустых строк, комментариев, использования более коротких имен переменных и т.п. Браузеру все равно, с каким файлом работать – обычным или минимизированным, а весит такой файл меньше.

Пример обычного кода:

Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей – подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант – 85 Кб. Чувствуете разницу?

Единственный минус минификации – теряется читабельность файла. Если понадобится внести изменения в сжатый файл – сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS – они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.

PageSpeed и здесь заботливо показывает нам список файлов, размер которых можно уменьшить за счет минимизации:

Шаг 5. Порядок загрузки css- и js-файлов

Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет прослыть «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился – тогда отрисовка остановится.

Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) – в конце страницы, перед закрывающим тегом

Как ускорить загрузку компьютера (Windows 7, 8, 10)

Доброго времени суток.

Каждый пользователь вкладывает в понятие «быстро» разный смысл. Для одного включение компьютера за минуту — это быстро, для другого — крайне долго. Довольно часто вопросы из подобной категории задают и мне…

В этой статье я хочу дать несколько советов и рекомендаций, которые помогают мне [обычно] ускорить загрузку компьютера. Думаю, что применив хотя бы часть из них, ваш ПК станет загружаться несколько быстрее ( те пользователи, кто ожидает ускорения в 100 раз — могут не рассчитывать на эту статью, и не писать потом гневные комментарии… Да и скажу по секрету — такое увеличение производительности нереально без замены комплектующих или перехода на другие ОС ).

Как ускорить загрузку компьютера под управлением Windows (7, 8, 10)

1. «Тонкая» настройка BIOS

Так как загрузка ПК начинается с BIOS (или UEFI) — то и оптимизацию загрузки логично начать с настроек BIOS (извиняюсь за тавтологию).

По умолчанию, в оптимальных настройках BIOS всегда включена проверка возможности загрузки с флешек, DVD дисков и т.д. Как правило, такая возможность нужна при установке Windows (редкий раз при лечении от вирусов) — в остальное время она лишь замедляет работу компьютера (тем более, если у вас CD-ROM’e, например, часто вставлен какой-нибудь диск).

1) Войти в настройки BIOS.

Для этого есть специальные клавиши, которые нужно нажимать после включения кнопки питания. Обычно это: F2, F10, Del и пр. У меня на блоге есть статья с кнопками для разных производителей:

2) Поменять очередь загрузки

Дать универсальную инструкцию по тому, что нажимать конкретно в BIOS невозможно в виду большого разнообразия версий. Но разделы и настройки всегда схожи по названиям.

Для редактирования очереди загрузки, необходимо найти раздел BOOT (в переводе «загрузка»). На рис. 1 показан раздел BOOT на ноутбуке фирмы Dell. Напротив пункта 1ST Boot Priority (первое устройство для загрузки) нужно поставить Hard Drive (жесткий диск).

Благодаря такой настройке BIOS сразу же будет пытаться загрузиться с жесткого диска (соответственно вы сэкономите время, которое ПК тратил на проверку USB, CD/DVD и т.д.).

Рис. 1. BIOS — Очередь загрузки (ноутбук Dell Inspiron)

3) Включить опцию Fast boot (в новых версиях BIOS).

Кстати, в новых версиях BIOS появилась такая возможность, как Fast boot (ускоренная загрузка). Рекомендуется ее включить для ускорения загрузки компьютера.

Многие пользователи жалуются, что после включения данной опции они не могут войти в BIOS (видимо загрузка настолько быстрая, что время, даваемое ПК на нажатие кнопки входа в BIOS просто недостаточно для того, чтобы пользователь успел ее нажать). Решение в этом случае простое: нажмите и удерживайте кнопку входа в BIOS (обычно это F2 или DEL), а затем включите компьютер.

СПРАВКА (Fast boot)

Особый режим загрузки ПК, при котором ОС получает управление еще до проверки и готовности оборудования (инициализация оного проводит сама ОС). Таким образом Fast boot исключает двойную проверку и инициализацию устройств, за счет чего уменьшается время загрузки компьютера.

В «обычном» же режиме, сначала BIOS проводит инициализацию устройств, затем передает управление ОС, которая повторно делает тоже самое. Если учитывать, что инициализация некоторых устройств может занимать относительно длительное время — то выигрыш в скорости загрузки виден не вооруженным глазом!

Дело в том, что Fast Boot передает управление ОС раньше, чем пройдет инициализация USB, а значит пользователь с USB клавиатурой не может прервать загрузку ОС (например, чтобы выбрать для загрузки другую ОС). Клавиатура не будет работать до тех пор, пока не будет загружена ОС.

2. Чистка Windows от мусора и не используемых программ

Медленная работа ОС Windows часто связана с большим количеством «мусорных» файлов. Поэтому, одна из первых рекомендаций при подобной проблеме — почистить ПК от ненужных и «мусорных» файлов.

На моем блоге достаточно много статей на эту тему, чтобы не повторяться, приведу здесь несколько ссылок:

3. Настройка автозагрузки в Windows

Очень много программ без ведома пользователя добавляют себя в автозагрузку. В результате чего Windows начинает загружать дольше (при большом количестве программ загрузка может стать существенно дольше).

Для настройки автозагрузки в Windows 7:

1) Откройте меню ПУСК и введите в поисковую строку команду « msconfig » (без кавычек), далее нажмите клавишу ENTER.

Рис. 2. Windows 7 — msconfig

2) Затем в открывшемся окне конфигурации системы выберите раздел « Автозагрузка «. Здесь нужно отключить все программы, которые вам не нужны (по крайней мере при каждом включении ПК).

Рис. 3. Windows 7 — автозагрузка

В Windows 8 настроить автозагрузку можно аналогично. Можно, кстати, сразу открыть « Диспетчер задач » (кнопки CTRL+SHIFT+ESC).

Рис. 4. Windows 8 — Диспетчер задач

4. Оптимизация ОС Windows

Существенно ускорить работу Windows (в том числе и ее загрузку) помогает настройка и оптимизация под конкретного пользователя. Тема эта довольно обширная, поэтому здесь приведу только ссылки на пару своих статей…

https://pcpro100.info/optimizatsiya-windows-8/ — оптимизация Windows 8 (большинство рекомендаций актуально и для Windows 7)

5. Установка SSD диска

Существенно ускорить работу компьютера поможет замена HDD на SSD диск (по крайней мере для системного диска с Windows). Компьютер будет включаться быстрее на порядок!

Рис. 5. Жесткий диск (SSD) — Kingston Technology SSDNow S200 120GB SS200S3/30G.

Основные преимущества перед обычным HDD диском:

1. Скорость работы — после замены HDD на SSD вы не узнаете свой компьютер! По крайней мере, такая реакция у большинства пользователей. Кстати, раньше, до появления SSD самым медленным устройством в ПК был HDD диск (в рамках загрузки Windows);
2. Отсутствует шум — в них нет механического вращения как в HDD дисках. К тому же при работе они не греются, а значит не нужен кулер, который будет их охлаждать (опять же снижение шума);
3. Большая ударо-прочность SSD диска;
4. Более низкое энергопотребление (для большинства не актуально);
5. Меньший вес.

Есть, конечно, у таких дисков и недостатки: высокая стоимость, ограниченное число циклов записи/перезаписи, невозможность* восстановления информации (в случае непредвиденных проблем…).

Источник: softaltair.ru