Какая web страница загрузится быстрее в браузер
По сути, любой сайт – это совокупность файлов разных форматов, связанных между собой системой гиперссылок. А каждый файл на сайте обладает своим размером (в килобайтах, мегабайтах и т.д.).
p, blockquote 1,0,0,0,0 -->
Файл может быть «легким» (иметь маленький размер, например, 40 Килобайт). Но также файл может быть «тяжелым», большого размера, например, 800 Килобайт.
p, blockquote 2,0,0,0,0 -->
Как правило, сайт размещен в интернете на удаленном хостинге. Другими словами, все файлы этого сайта расположены на удаленном хостинге. Если файл на сайте легкий, то он быстро грузится с хостинга и быстро появляется в браузере у пользователя. Тяжелый файл будет загружаться дольше. Очевидно, что загрузка веб-страницы объемом в 40 Килобайт пройдет быстрее, чем загрузка страницы «весом» 800 Килобайт.
p, blockquote 3,0,0,0,0 -->
Под веб-страницей будем понимать страницу, размещенную в интернете. На ней может находиться текст, фото, картинки, схемы, видео и т.п. Веб страница имеет адрес, который появляется в адресной строке браузера после загрузки страницы.
p, blockquote 5,0,0,0,0 -->
Что такое скорость загрузки веб-страницы?
В момент, когда человек заходит на сайт с целью его просмотра, происходит скачивание (загрузка) веб страницы этого сайта с удаленного хостинга и ее отображение в браузере пользователя.
p, blockquote 6,0,0,0,0 -->
Скорость скачивания страницы – это скорость ее загрузки, точнее, это время, которое проходит с момента, когда пользователь вызвал страницу сайта и когда он ее увидел в своем браузере. Понятно, что чем больше, чем выше скорость загрузки, тем комфортнее просматривать сайт.
p, blockquote 7,0,0,0,0 -->
Что влияет на скорость загрузки сайта? Ниже перечислим факторы, влияющие на нее.
p, blockquote 8,0,0,0,0 -->
1 Размер веб-страницы
Тут все понятно – чем больше весит страница (в килобайтах), тем дольше она скачивается в браузер пользователя. Если вебмастер хочет увеличить скорость загрузки страниц своего сайта, то ему целесообразно уменьшать именно размер страниц (в килобайтах).
p, blockquote 9,0,0,0,0 -->
Какие же элементы страниц обладают наибольшим размером? Как правило, это графика. Качественные фотографии высокого разрешения весят очень много. Соответственно, грузятся они долго.
p, blockquote 10,0,1,0,0 -->
Время загрузки страницы оценивается по самому долго грузящемуся элементу. И пока все эти элементы, включая фото, не загрузятся до конца, сама страница также не загрузится до конца. Именно поэтому графику (картинки, фото) необходимо оптимизировать всем вебмастерам, у которых есть свой сайт. Точнее, вебмастерам следует уменьшать разрешение, размер, а иногда менять формат картинки или фото.
p, blockquote 11,0,0,0,0 -->
Кроме того, время загрузки страницы увеличивают различного рода медиаплееры (аудио и видео), даже если сами файлы расположены на сторонних хостингах, а не на родном хостинге сайта. Также на время загрузки влияет наличие flash-анимации, а также различных скриптов.
p, blockquote 12,0,0,0,0 -->
Какая web-страница будет грузиться быстрее всего? Конечно, та страница на сайте, которая наполнена одним лишь текстом и ничего «лишнего» в виде таких «тормозов» как фото, картинки, скриншоты, видео и т.п.
p, blockquote 13,0,0,0,0 -->
2 Скорость подключения пользователя к интернету
Тут все просто – чем уже (чем медленнее) канал подключения у пользователя Интернета, тем дольше будут загружаться страницы в браузере у этого пользователя.
p, blockquote 14,0,0,0,0 -->
Здесь от вебмастера мало что зависит. Подстраиваться под пользователей, обладающих медленным интернетом, тоже не всегда хорошо, ведь ради них придется сильно урезать страницы, сделать их максимально простыми, лучше всего состоящими из одного текста.
p, blockquote 15,0,0,0,0 -->
Кроме того, с каждым годом скорость интернета растет. Людей, у которых обычная страница сайта загружается по 20-30 секунд, остается все меньше и меньше.
p, blockquote 16,0,0,0,0 -->
О том, как проверить скорость своего интернета, подробнее тут.
p, blockquote 17,0,0,0,0 -->
3 Характеристики хостинга, на котором размещен сайт
Довольно часто загруженность хостинга, где находится сайт, и оборудование, используемое там, может влиять на скорость загрузки страниц сайта. К примеру, если используемое оборудование на хостинге сайта не совсем подходит для размещения на нем определенного количества сайтов, то нагрузка на оборудование хостинга, особенно при большой посещаемости этих сайтов, возрастает. В результате время загрузки веб-страниц может существенно увеличиться.
p, blockquote 18,0,0,0,0 -->
Кроме того, интернет-канал у самого хостинга может быть недостаточно широким, скоростным. Конечный результат будет аналогичным – низкая скорость загрузки сайтов, расположенных на этом хостинге.
p, blockquote 19,0,0,0,0 -->
На характеристики хостинга того или иного сайта обычный пользователь Интернета не может никак повлиять. Выбор хостинга и его характеристик полностью относится к зоне ответственности владельца сайта. Пользователь в таких случаях просто закрывает сайт, который долго грузится, возвращается в поисковик Гугл или Яндекс и находит по своему запросу другой сайт, который быстрее загружается.
p, blockquote 20,1,0,0,0 -->
На что влияет скорость загрузки сайта
Мы выяснили, от чего зависит скорость загрузки страниц сайта. Теперь нужно понять, на что эта скорость влияет.
p, blockquote 21,0,0,0,0 -->
Если рассматривать сайт с точки зрения поисковиков (Google, Yandex и др.), то некоторые из них при ранжировании сайтов берут в расчет показатель скорости загрузки. Ведь быстро грузящийся сайт – это сайт, удобный и оптимизированный для просмотра пользователями, у которых может быть различной скорость Интернета. Согласитесь, что критерий вполне объективный, когда тот или иной поисковик ставит «шустрые» сайты на более высокие позиции в ответ на запрос пользователя по тому или иному вопросу. Владельцы сайтов знают, что быстро загружающиеся сайты привлекают больше пользователей на свои страницы.
p, blockquote 22,0,0,0,0 -->
Если говорить о простых пользователях, то тут все еще проще. Никто не любит ждать окончания медленной загрузки сайта, все любят скорость и быстродействие. Чем быстрее страницы грузятся, тем комфортнее чувствует себя пользователь на сайте, тем больше страниц он просмотрит за одно и то же время.
p, blockquote 23,0,0,0,0 -->
А при длительной загрузке веб-страницы большинство пользователей ее закрывают, не дождавшись загрузки и появления страницы в своем браузере, и возвращаются в поисковик для того, чтобы в ответ на свой запрос открыть более «шустрый» сайт.
p, blockquote 24,0,0,0,0 -->
Проверка скорости загрузки сайта
Есть много разных сервисов для того, чтобы проверить скорость загрузки того или иного сайта, а также отдельных страниц этого сайта.
p, blockquote 25,0,0,0,0 --> Рис. 1 Сервис Google для проверки скорости загрузки веб-страниц
Вот инструмент Google для проверки скорости загрузки страниц сайта
p, blockquote 26,0,0,0,0 -->
Статистика не устаёт повторять нам про устойчивую корреляцию между падением скорости загрузки страниц сайта и ростом частоты отказов со снижением конверсии. Я не открою Америку, если скажу, что работу сайта замедляет «раздутая» полезная нагрузка (с плохо оптимизированными изображениями и избыточным HTML-кодом). Это заставляет сервер выполнять лишнюю работу. Огромный пласт такой работы связан с проблемами оптимизации изображений.
Правильно подобранные изображения, сами по себе, хорошо привлекают внимание и способствуют повышению конверсии, распространению информации в социальных сетях и прочему взаимодействию посетителей. Поэтому их продолжают активно размещать на веб-страницах. Но как это сказывается на скорости загрузки этих страниц — вопрос интересный. Всё зависит от стратегии оптимизации.
Не очень эффективными я считаю стратегии, которые опираются на тезис о том, что изображения — это статический контент (в течение статьи я ещё разовью эту мысль и приведу аргументы). Сейчас на мобильные устройства приходится большая доля интернет-трафика, но есть проблема: эти устройства имеют различные размеры, разрешения экрана, операционные системы и прикладное ПО (например, браузеры). Каким образом сделать так, чтобы веб-страница быстро (!)и корректно загружалась на любой платформе и выглядела при этом одинаково?
В этой статье мы сведём решение к оптимизации изображений на этапе разработки, сборки проекта и/или на этапе обслуживания готового сайта.
Правда, некоторые стратегии оптимизации могут существенно затруднить процесс проектирования и разработки, а также добавить головной боли при обслуживании. О растущей трате ресурсов и времени во время сборки я вообще молчу. Существует много методов и инструментов оптимизации изображений. Но некоторые их них нелегко использовать, не прибегая к автоматизации сложных и повторяющихся процессов. Мы рассмотрим четыре стратегии и выясним, какая из них позволяет лучше автоматизировать и сделать гибкую (динамическую) оптимизацию изображений для различных устройств.
Мы протестируем четыре стратегии. Сначала мы без оптимизации изображений просто скормим простой адаптивный код серверу со всеми брейкпоинтами и вариантами картинок для них. Затем мы рассмотрим оптимизацию на этапе сборки, когда специальные инструменты и сервисы помогают подготовить необходимые варианты изображений. Третья стратегия — это run-time оптимизация: перед отправкой страницы автоматизированный инструмент или онлайн-сервис применяет оптимизацию к изображению по заданному шаблону или на основе информации из браузера. Последняя стратегия — для формирования и доставки оптимизированных изображений использовать информацию об устройстве и браузере, полученную через другие специализированные сервисы (о них обязательно расскажу в конце статьи).
Внимание! Спойлер!
Стратегия оптимизации изображений с учётом особенностей устройства даст наилучшие результаты. В этой статье мы рассмотрим плюсы и минусы реализации каждой стратегии и их влияние на процесс разработки веб-приложения.
Конечная цель оптимизации изображений — повысить скорость загрузки веб-страниц. Для аудита страниц я использую Google PageSpeed Insight. Он позволяет легко проанализировать эффективность отдельных стратегий. Как я писал выше, мы будем проводить аудит мобильных страниц.
Стратегия №1: адаптивный код без оптимизации
Я взял стандартный адаптивный код без использования какой-либо оптимизации изображений: браузер, отталкиваясь от размера экрана, просто выбирает из набора одинаковых изображений разных размеров более-менее подходящий вариант. В коде есть несколько брейкопоинтов для изображений разных размеров. Они определяются размерами дисплеев мобильных телефонов, планшетов и настольных компьютеров.
Но и тут опять проблема: существуют тысячи таких конфигураций, и с каждым днём их становится больше. Приходится добавлять всё больше брейкпоинтов. Однако это требует больше времени на разработку, приводит к разрастанию кодовой базы и в дальнейшем — к путанице и ошибкам.
Вот пример с четырьмя брейкпоинтами, прописанными в атрибуте srcset:
<img srcset=«image-1920.jpg 1920w,
image-1280.jpg 1280w, image-640.jpg 640w, image-480.jpg 480w» sizes=»(min-width: 36em) 50vw,100vw» src=«image-320.jpg» alt=«Responsive image syntax» />
Теперь подумайте, сколько такого кода может быть у вас в проекте.
Более того, изображения для каждого из перечисленных размеров нужно создавать отдельно. На это требуется время, а также дополнительное место для хранения.
Можно реализовать адаптивность и с помощью медиа-запросов CSS. А можно использовать новые элементы и <source> , где <picture> служит контейнером для одного или более элементов <source> и одного элемента <img>. Однако все эти подходы не позволяют создать масштабируемые решения.
И последнее: эти подходы не учитывают особенности устройства. Каждый раз, когда вы пишете подобный код, вы просто пытаетесь угадать, какие брейкпоинты использовать и какие размеры изображений вам понадобятся. Кроме того, нет никакой гарантии, что варианты, которые вы удачно подобрали сегодня, будут работать завтра.
Преимущества:
- не нужно покупать ПО или платить за подписку на дополнительный софт или сервисы;
- относительно просто писать адаптивный код на основе хорошо документированного стандарта.
Недостатки:
- требуется дополнительное пространство для хранения изображений разных размеров;
- требуются дополнительные время и усилия на реализацию такой «адаптивной многовариантности»;
- разрастание кода и сложности с его сопровождением;
- не во всех браузерах этот код работает одинаково;
- нет опоры на контекст устройства;
- для масштабирования нужна отдельная CDN (Content Delivery Network — Сеть доставки контента);
- требуется много времени на доработку под новые устройства, форматы изображений и так далее.
Результаты тестов
Тесты показывают, что я выбрал не самые лучшие форматы, да ещё и без сжатия. И размеры моих изображений слишком велики.
Стратегия №2: Build-time оптимизация
Один из способов облегчить работу по созданию вариантов изображений — использовать специализированные сервисы для редактирования или сжатия изображений, например, Kraken, Compressor.io, mozjpeg и squoosh.
Вы загружаете свои изображения и сервис обрабатывает и оптимизирует изображения на своём сервере. Затем вы можете использовать оптимизированные изображения в своём проекте. Можно установить стандартные или пользовательские настройки оптимизации: сжатие с потерями или без потерь, изменение размеров, даунскейлинг и так далее. Некоторые сервисы могут выдать сразу несколько вариантов одного и того же изображения в соответствии с необходимыми размерами.
А что, если пойти ва-банк и использовать сборщик Grunt или Gulp для оптимизации изображений? Для этого достаточно назначить соответствующие задачи, которые будут выполнены во время сборки. Саму обработку изображений может взять на себя js-пакет imagemin.
Его можно установить через npm или использовать через интерфейс командной строки. Это модульное решение с плагинами для сжатия различных форматов изображений: например, imagemin использует mozjpeg для JPEG и pngquant для сжатия PNG. Настройка параметров оптимизации изображений аналогична многим SaaS-инструментам.
При реализации этой стратегии самая большая нагрузка ложится на разработчиков. Они должны сначала автоматизировать пакетную обработку изображений с тонкой настройкой сторонних инструментов, а потом периодически обновлять свой код для поддержки новых форматов изображений.
Преимущества:
- оптимизация изображений выполняется на чужом сервере;
- сервисы достаточно быстро обрабатывают изображения;
- управление оптимизацией можно встроить в ваш воркфлоу разработки и развёртывания;
- сервисы имеют удобный интерфейс для настройки параметров оптимизации;
- множество бесплатных инструментов (или бесплатных тарифов) с достаточно богатой функциональностью.
Недостатки:
- вновь требуется много времени на реализацию адаптивной многовариантности;
- по-прежнему нет опоры на контекст устройств (не учитываются размер, разрешение экрана и так далее);
- по-прежнему нужно место, чтоб хранить много изображений;
- всё ещё нужен CDN;
- нужно ещё больше человеко-часов, чтобы дополнительно реализовать интеграцию со сторонними продуктами через API;
- каждый раз, когда появляются новые варианты изображений, нужно также запускать весь процесс оптимизации и для уже существующих вариантов;
Результаты тестов
По баллам незначительно лучше, чем у первой стратегии. Претензии по поводу сжатия поутихли, но по поводу форматов и слишком больших размеров — остались.
Важно отметить, что суммарный объём полезной нагрузки снизился до 1,4 Мб. Это на 80% меньше, чем нам даёт решение без стратегии, и на 50% меньше, чем даёт стратегия с адаптивным кодом.
Стратегия №3: Run-time оптимизация
Run-time оптимизация запускается на сервере, как раз перед отправкой браузеру ответа (контента). Задача такой оптимизации — уменьшить передаваемый объём данных, чтобы ускорить загрузку веб-страницы.
Например, заголовок из браузера Chrome выглядит так:
С появлением Client Hints в дополнительных полях можно передать больше информации, например, DPR (device pixel ratio, «плотность пикселей», величина аналогичная разрешению) и Viewport-Width (ширина экрана).
Используя эти данные, run-time оптимизаторы определяют, как сжимать изображения и в каком формате их выдавать. Однако вам для гибкого изменения размера всё равно потребуется руками реализовать адаптивную логику, основанную на брейкпоинтах.
Эти задачи выполняют такие SaaS-оптимизаторы, как Cloudinary и imgix. На этих платформах обычно есть опция автоматической оптимизации, когда сервер изображений или прокси решает, как лучше всего оптимизировать контент. Но вы также можете самостоятельно настраивать параметры оптимизации с помощью API (обычно с использованием простых параметров URL).
ImgIx — это надстройка над CDN (Amazon CloudFront), которая позволяет выполнять обработку изображений в реальном времени перед добавлением в кэш. ImgIx предоставляет весь необходимый функционал для обработки изображений, а также ряд дополнительных функций, например, Monochrome, Blur, Halftone.
Часто такие сервисы могут служить и в качестве CDN. А у Cloudinary есть своя система DAM (Digital Asset Management — система управления медиа активами).
Изображения также хранятся на серверах платформы, а не на ваших собственных ресурсах. Однако обычно у вас есть фиксированная квота дискового пространства с неким запасом на случай новых изображений.
Преимущества:
- требуется очень мало усилий для оптимизации изображений;
- часто run-time оптимизатор включает CDN для ускорения доставки;
- оптимизатор может обладать другими возможностями, например, DAM или расширенный инструментарий обработки изображений;
- автоматическая или ручная оптимизация изображений с помощью директив на основе URL;
- имеет собственное хранилище изображений, освобождает ваше локальное / облачное хранилище
- в этом смысле, сайту практически не требуется обслуживание или перенастройка;
Недостатки:
Результаты тестов
Претензии по поводу сжатия и форматов почти сошли на нет, но всё ещё можно
придраться к размерам.
По сравнению с двумя предыдущими стратегиями полезная нагрузка снизилась на 88%. Теперь она составляет всего 897 Кб.
Стратегия №4: оптимизация с учётом контекста устройства
Для примера рассмотрим сервис ImageEngine. Он способен получить полноценную информацию об устройстве из контекста доступа с помощью js-библиотеки WURFL. Помимо браузера и ОС, он может определить точную марку и модель устройства, а также характеристики экрана (разрешение, PPI и многие другие). Он также поддерживает Client Hints, включая заголовок save-data, с которым работают далеко не все сервисы.
Это позволяет такому оптимизатору предлагать более релевантные варианты изображений на все случаи жизни, обеспечивая при этом оптимальное соотношение полезной нагрузки и качества картинок.
Подобные сервисы тоже используют CDN для ускорения доставки изображений и повышения коэффициента попадания в кэш. Такой подход имеет огромное преимущество в мобильном сегменте интернета, так как существует очень много устройств с разными параметрами экрана.
Эта стратегия практически не требует допиливания кода. Достаточно просто обновить значения атрибутов src тега img, связав их с сервисом оптимизации. И всё.
Преимущества:
- требует минимальных усилий при разработке и сопровождении;
- можно эффективно настроить и забыть (при использовании настроек автоматической оптимизации);
- автоматическая и ручная оптимизация изображений с помощью директив в URL;
- максимально возможная экономия полезной нагрузки изображения при сохранении максимального качества;
- внедрить и начать использовать эту стратегию можно за считанные минуты;
- сервис оптимизации обычно предлагает лучшее соотношение цены и пропускной способности;
- нет избыточного разрастания кодовой базы: нет адаптивного кода и брейкпоинтов.
Недостатки:
Результаты тестов
Теперь Google PageSpeed Insights доволен.
Значительно улучшилось большинство показателей. Сервис автоматически начал использовать новые форматы изображений (например, AVIF с оптимальным сжатием в соответствии с контекстом доступа). Кроме того, для различных размеров экрана изображения автоматически меняют длину и ширину, а также масштабируются.
Наша суммарная полезная нагрузка уменьшилась примерно на 95%:
И будет вам счастье
Как видите, у всех стратегий есть свои плюсы и минусы. Нет никаких сомнений в том, что сервисы оптимизации изображений, особенно с опорой на контекст устройства, имеют преимущество.
Третья и четвёртая стратегии позволят рационально выстроить процесс разработки с минимальными проблемами на этапе создания, поддержки и хранения изображений. Более того, не нужно будет писать запутанный и немасштабируемый адаптивный код. Оптимизация изображений будет работать надёжно и гибко подстраиваться под новые требования и нужды бизнеса.
Не стоит беспокоиться о возможной потере контроля над настройками оптимизации изображений, потому что вы можете вносить свои коррективы с помощью API или простых параметров URL.
Безусловно, за такое удовольствие придётся платить. Но представители сервисов уверяют, что для физических лиц, а также для малого и среднего бизнеса предусмотрены недорогие тарифные планы.
Облачные VDS от Маклауд отлично подходят для хостинга сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Вам знакомо ощущение спокойной работы в интернете, неспешное листание страниц любимого сайта и чтение научных статей, пока браузер не соизволит прогрузить вкладку, открытую три часа назад? Если да, вы не одни! Многие пользователи сталкиваются со снижением скорости работы браузера . Это может сильно осложнить рабочий процесс фрилансеров, руководителей предприятий, отслеживающих деятельность своей компании, и испортить вечерний досуг обычного пользователя. В данной статье мы разберем как можно восстановить и даже повысить производительность браузеров Firefox, Google Chrome и других веб-обозревателей.
Содержание статьи:
Как ускорить Mozilla Firefox
Firefox был создан как альтернатива для пользователей, которые не хотели пользоваться Internet Explorer, еще задолго до выхода Google Chrome. Тем не менее, обозреватель не стоит на месте и продолжает активное развитие.
Как и любое другое приложение, со временем он замедляется и ему может потребоваться некоторая помощь. Ниже мы рассмотрим 3 быстрых способа повернуть время вспять и восстановить работоспособность Firefox.
Способ №1. Управление кэшем
Откройте меню Настройки в правом верхнем углу программы и перейдите во вкладку Приватность и защита, как это было показано на изображении выше. Нажав по клавише Удалить данные, приложение предложит полную очистку кэша, в то время как клавиша Управление данными позволит произвести очистку выборочно. Выберите подходящий вам вариант. Рекомендуем произвести полную очистку.
Способ №2. Обновите Firefox
Введите в адресной строке about:support и в открывшемся окне нажмите Очистить Firefox. При желании, вы можете обновить браузер, воспользовавшись официальным сайтом разработчика. Однако не забывайте, что в такой случае большинство конфигураций потеряют присвоенные им настройки.
Способ №3. Отключите дополнения
Большое количество, зачастую, ненужных дополнений способны замедлить работу вашего браузера в несколько раз. Отключение нескольких расширений позволит не только ускорить Firefox, но и повысит его безопасность, что очень ценно в цифровом мире. Причиной тому является уменьшение количества отправляемых бит кода, из-за чего хакерам становится труднее найти вас.
Перейдите во вкладку Дополнения через меню, расположенное в правом верхнем углу, или воспользуйтесь комбинацией Ctrl + Shift + A. Возможно вы захотите изучить подробнее расширения, которые нужно отключить, особенно если речь идет о плагинах.
Если вы переживаете и не хотите полностью стирать дополнение, просто отключите его. Это позволит ускорит работу браузера и сохранит ваше спокойствие. Позже, при желании, вы в любой момент снова сможете подключить деактивированное расширение.
Как ускорить Google Chrome
Способ №1. Удалите ненужные дополнения
Удалите или отключите дополнения, которыми вы не пользуетесь изо дня в день.
Способ №2. Установите полезные дополнения
Это звучит несколько противоречиво, относительно предыдущего пункта, однако не все расширения замедляют браузер. Рекомендуем попробовать дополнение Экономия трафика для Google Chrome. Оно совершенно бесплатно и, путем перенаправления посещаемых вами страниц через серверы Google, сжимает получаемые данные и тем самым увеличивает скорость работы.
Однако это не единственное расширение, способное помочь в повышении производительности браузера. Вы можете воспользоваться сторонними дополнениями OneTab, The Great Suspender и другими. Возможно, есть смысл поэкспериментировать в процессе выбора, чтобы подобрать наиболее подходящий плагин.
Способ №3. Очистите кэш
Чтобы очистить кэш, перейдите в меню Настройки, пролистайте в самый низ страницы и нажмите по клавише Дополнительные. Здесь, в первом блоке параметров. вы найдете пункт Очистить историю. Кликните по нему и проведите очистку кэша, cookie и истории браузера.
Как ускорить браузер Opera
Браузер Opera уверенно занимает свою позицию среди популярных браузеров благодаря удобству использования, VPN-функциям и стильному дизайну программы. Как и любой другой обозреватель, со временем скорость она теряет в скорости работы и нуждается в определенной помощи со стороны пользователя. Что можно сделать для того, чтобы повысить производительность Opera? Ниже мы рассмотрим несколько полезных советов, которые помогут вернуть рассвет вашего браузера.
Способ №1. Приостановите загрузку Java-скриптов
Каждому пользователю знакома ситуация, когда при посещении страницы трекера, или любого другого ресурса, вы сталкиваетесь со стеной рекламы, которая своей загрузкой существенно снижает скорость работы. Разработчики Opera проявили хорошую дальновидность и создали для своих юзеров встроенный блокировщик рекламы. Это говорит о том, что у вас теперь нет нужды устанавливать стороннее ПО.
Просто перейдите в Настройки Opera и поставьте галочку на Блокировать рекламу и работать в интернете в три раза быстрее.
Если у вас есть определенная доля сомнения в эффективности встроенного расширения, установите популярное дополнение AdBlock, которое не менее успешно позволяет избегать назойливую рекламу.
Способ №2. Отключите Java-скрипты
Для того, чтобы понять взаимосвязь Opera и скриптов разных сайтов, нужно понять принцип работы браузера. Перед тем как открыть для вас страницу, обозреватель подгружает Java-скрипты, что может привести к определенным задержкам в работе.
Чтобы отключить их, перейдите в Настройки > вкладка Сайты в левом меню > раздел JavaScript. Установите галочку на Запретить выполнение JavaScript.
Способ №3. Отключите загрузку интернет-страниц при запуске
Данный пункт применим преимущественно к слабым ПК.
Как вы понимаете, загрузка страницы с момента запуска браузера, требует от компьютера дополнительных ресурсов. Ведь массивный сайт открыть куда сложнее, чем запустить стартовую страницу с блоками закладок.
Рекомендуем переключить параметр Продолжить с того же места в значение Открыть начальную страницу. Для этого перейдите в меню Настройки > Браузер (в списке слева) > Меню функций При запуске.
Как ускорить Яндекс Браузер
Яндекс Браузер является одним из самых популярных браузеров, поскольку занимает вторую позицию в рейтинге обозревателей рунета. Отличительная его особенность в том, что разработчики предвидели, что как и любой другой браузер, их приложение так же может начать терять в производительности с течением времени. Поэтому они добавили множество интересных функций, которые мы разберем в руководстве ниже.
Способ №1. Отключите ненужные дополнения
Как и в случае с Google Chrome, Firefox, отключите ненужные расширения, что позволит существенно ускорить работу обозревателя.
Способ №2. Очистите кэш
Откройте меню Настройки Яндекс Браузера > Дополнительно > Очистить историю. Если хотите сэкономить время, воспользуйтесь комбинацией Ctrl + Shift + Del, что позволит мгновенно перейти к меню очистки.
Способ №3. Отключите режим электросбережения
Данный пункт должен быть особенно хорошо знаком владельцам ноутбуков. Часто параметр энергосбережения используется для работы от батареи, что, в свою очередь, сказывается на производительности браузера. Если ваше устройство работает от сети, есть смысл отключить эту функцию.
Перейдите в меню Настройки > в верхнем меню вкладка Настройки > пролистайте в самый низ страницы и найдите параметр Энергосбережение. Отключите его при необходимости.
По завершению работы с настройками браузеров, ваш обозреватель снова должен начать работать как новый. Если же возникли некоторые трудности и приведенные выше способы не исправили ситуацию, произведите полную переустановку обозревателей.
В случае необходимости восстановить, сохранить стертую историю или произвести анализ веб-браузера, вам поможет инструмент Starus Web Detective. Cкачать и опробовать программу можно совершенно бесплатно!
Похожие статьи про восстановление данных:
Здорово знать и уметь выполнить любую задачу с помощью мыши. Однако, как вы понимаете, это далеко не.
Как ускорить Windows используя ReadyBoost и USB-флешку
20 способов ускорить Windows 10
Не так давно получила свой старт операционная система Windows 10. Главным ее отличием от предыдущих .
- о хронологии изменения политики ранжирования сайтов Google
- об объективных оценках субъективного восприятия времени загрузки сайта
- насколько интернет остается медленным в 2020
- как время загрузки влияет на посещаемость сайта, а сам процесс на конверсию
- смешная картинка в конце
(не) Google'ом единым
Медленно, но верно своей железной рукой Google устанавливает новые стандарты для веб-страниц. Мотивация проста – Google выгодно показывать в выдаче быстрые, удобные, безопасные и содержательные сайты. Если пользователь быстро нашел, что ему нужно – поисковик справился со своей задачей. Получается, как ни посмотри, user в выигрыше? – да. А вот воплощать в жизнь стандарты, задаваемые Google, конечно же, приходится разработчикам и создателям контента.
Скорость
История со скоростью загрузки страниц началась еще в далеком 2009 году, когда Google выступила с инициативой “Let’s make the web faster”. В ее основе лежало видение сооснователя компании Ларри Пейджа: "Переход от одной веб-страницы к другой должен быть таким же быстрым, как перелистывание глянцевого журнала". За этим последовал выпуск набора инструментов для оптимизации сайта PageSpeed tools и функции предварительной загрузки первых результатов поиска в Chrome. В 2010 Google объявила, что при ранжировании будет учитывать скорость загрузки страниц в десктоп версии. Но на релизе это повлияло только на 1% от всех страниц. Google открыто заявила, что скорость — не ключевой фактор, и специалисты по SEO продолжили спокойно сочинять тексты и добавлять ссылки. И на этом все на следующие 7 лет.
“Browsing the web should be as fast as turning the pages of a magazine”
Larry Page
Мобильные версии сайтов
Сейчас в фокусе мобильные версии сайтов, их контент и скорость работы. И это не удивительно: в 2017 доля контента, потребляемого с мобильных устройств, превысила 50%.
В 2017 году Google выпустила свой хрестоматийный отчет "Mobile page speed new industry benchmarks". В 2018 году вышла его обновленная версия. Мы поговорим подробнее о них чуть позже. Летом 2018 вышел "Speed update", который внес изменения в алгоритм индексирования страниц. C июля 2018 года Google учитывает скорость работы мобильных версий страниц при ранжировании и наказывает медленные.
Ровно через год — 1 июля 2019 года — Google начала индексировать все новые страницы с приоритетом мобильного контента. Такое индексирование означает, что рейтинг страниц зависит главным образом от их мобильной версии. Буквально на днях Google анонсировала, что с 1 сентября 2020 года все страницы будут индексироваться таким образом. Пока же Google переводит на мобильное индексирование страницы, которые считает готовыми к этому. Таких веб-страниц порядка 70%. Получается, с осени этого года, помимо прямой зависимости ранжирования от скорости работы мобильных страниц вашего сайта, добавляется косвенная. Чем быстрее работает сайт — тем больше страниц Googlebot для смартфонов успеет проиндексировать (на каждом ресурсе бот проводит ограниченное время).
Безопасность
В 2014 Google начала поощрять сайты, использующие SSL, поднимая их в выдаче.
С января 2017 Chrome сообщает, что веб-страница “Not secure”, если она содержит поля для ввода паролей и не использует SSL.
С июля 2018 года небезопасными считаются любые страницы, не использующие SSL.
В 2019 Яндекс тоже начал "штрафовать" сайты без SSL шифрования.
Google часто применяет такой метод кнута и пряника. Хотя, вернее будет сказать, пряника и кнута. Сначала поощряет тех, кто следует рекомендациям, а через время начинает наказывать тех, кто их не выполняет.
Если с использованием TLS все более-менее понятно (есть — хорошо, нет — плохо), то со скоростью загрузки страниц все не так очевидно. Что такое быстро? На что влияет скорость? Какие показатели в среднем по сети?
Измеряем время до.
Итак, берем страницу, измеряем время с отправки HTTP-запроса браузером клиента до момента, когда последний байт страницы загружен — готово! Not so fast… Time to Fully Loaded (TTFL), именно его мы только что померили, не очень-то отражает реальное положение дел. TTFL не достаточно, чтобы понять насколько сайт быстрый. Еще одна популярная характеристика оценки скорость работы сайта — Time to First Byte (TTFB). Это время между отправкой HTTP-запроса пользователя и получением первого байта информации запрашиваемой страницы. Она отражает "отзывчивость" сервера, на котором находится сайт. Чтобы проверить TTFB, можно использовать отладчик браузера или консоль. В Chrome и Firefox нажмите комбинацию "Ctrl+Shift+I". Выберите вкладку "Сеть". После этого перезагрузите страницу, отфильтруйте ресурсы по типу HTML и найдите document файл. Поле "Ождиание" и есть TTFB.
Time to First Contentful Paint (TTFCP), если коротко, — время до отображения первого элемента на экране устройства пользователя. Цветной фон, картинки, svg файлы, текст — все, за исключением встраиваемых элементов.
Time to Visually Complete (TTVC) — это время в секундах, которое требуется, чтобы в окне браузера посетителя страница выглядела полностью загруженной. Это значит, что если пользователь никак не будет взаимодействовать со страницей, в том числе скроллить ее, то вид страницы уже никак не изменится.
Ну, теперь то все? — нет. Люди не заходят на страницу с секундомером в руках, чтобы засечь, когда на экране их телефона появилось хоть что-то. Главное для пользователя — восприятие времени загрузки или perceived loading duration. То, сколько он скучал, прежде чем начать пользоваться страницей.
Объективная оценка субъективного восприятия
Чувство восприятия времени user'а можно "обмануть", скрасив мучительные секунды ожидания. Вот любопытное исследование на эту тему — "Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations". Исследователи из Питтсбурга выяснили, что пульсирующая полоса progress bar'а кажется на 11% быстрее, чем обычная монохромная. Может, это одна из причин сложившегося предубеждения: "мак работает быстрее"?
Вот еще интересный пример манипуляции, но уже с переносом зоны ответственности. Разработчики приложения Facebook для iOS провели A/B тестирование и сравнили реакцию пользователей на кастомный индикатор загрузки и стандартный. Выяснилось, если показывать стандартный спиннер, большинство пользователей будут считать медленным не приложение, а свой телефон. Вот так можно повысить лояльность пользователей, просто заменив анимацию.
Теперь пример уже не из мира IT. Большинство не самых современных лифтов двигаются довольно медленно. Ускорение, с которым может двигаться лифт, ограничено не только характеристиками установленного оборудования, но и из соображений безопасности и комфорта. Людей нельзя подвергать сильным перегрузкам. Одна из функций зеркал в лифте — занять пассажиров на время поездки. По этой же причине в некоторых лифтах включают музыку и делают кабинки прозрачными. Конечно, зеркала выполняют и более прикладную функцию — людям на инвалидной коляске проще и безопаснее выезжать из такого лифта.
Построим график степени визуальной готовности страницы в процентах от времени загрузки. Для этого, например, можно делать скриншоты и попиксельно их сравнивать.
Speed Index будет определятся площадью над этим графиком (учитывая, что мы ограничим его сверху ста процентами). Для самых любопытных оставил формулу для расчета.
Чем Speed Index ниже — тем лучше. Получается, это совсем никакая не скорость, а скорее время, ну а по большому счету и не время вовсе. Вот такая семантическая путаница. Итак, если Time to Visually Complete отражает время до результата — полной отрисовки контента страницы в браузере — то Speed Index учитывает еще и путь, по которому мы добираемся до этого результата.
First Meaningful Paint (FMP) показывает, когда на мониторе или экране телефона пользователя уже можно что-то почитать или посмотреть — начать потреблять контент. Если кратко, ее определяют как время за которое с отображаемой страницей происходят наибольшие перемены. Подробнее можно прочитать тут. FMP для страниц "А" и "B" будут выглядеть вот так:
Наконец, давайте разместим все рассмотренные метрики (события) на временной шкале.
Как время загрузки влияет на поведение посетителей?
Какие количественные данные использовать, если мы хотим оценить реакцию посетителей на скорость загрузки страниц? Для этого хорошо подходят величины, традиционно используемые в SEO для оценки UX:
- показатель отказов (bounce rate) — отношение числа посетителей покинувших сайт со страницы входа к их общему числу.
- время на сайте (time per visit) — время, которое посетитель провел на сайте, прежде чем уйти
- число страниц за посещение (pageview per visit) — сколько страниц посетитель просмотрел, прежде чем уйти
Эти метрики зависят от многих факторов, но скорость работы веб-страницы — один из важнейших. Давайте смотреть, что нам сообщают исследования.
Что говорят сами пользователи
Половину участников опроса, проведенного Google, больше всего раздражает медленная скорость работы сайта.
52% пользователей готовы отказаться от анимации и видео на сайте, если это сделает его быстрее.
Уже после трех секунд ожидания половина посетителей покинут страницу, и это не удивительно. У большинства веб-страниц нет progress bar'а. User не знает, сколько ему еще осталось ждать — секунду, две или десять. Он перейдет на другую вкладку, нажмет "back to previous page" или вообще закроет браузер и откроет Instagram. Учитывая, что attention span зумеров сильно сократился из-за Instagram, TikTok и прочих Twitter'ов, страницы должны загружаться молниеносно.
79% пользователей повторно не вернутся за покупкой на медленно работающий сайт.
66% пользователей считают скорость работы сайта важной частью имиджа компании.
Более того, по разным оценкам от 12% до 44% пользователей поделятся своим негативным опытом и предостерегут знакомых от использования медленного ресурса. Как заметил Дуглас Адамс в 5 части своего культового цикла "Автостопом по галактике": "Ничто не движется со скоростью большей, чем скорость света, за исключением, может быть, плохих новостей, которые подчиняются своим, особенным законам"
"Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws"
Mostly Harmless, Douglas Adams
Что показывает статистика
На картинке ниже — как изменяется показатель отказов страниц с увеличением времени загрузки. Результаты получены Google при помощи нейросети, моделирующей поведение посетителей. Справа график для очень хорошего сайта с низким показателем отказов.
Akamai опубликовала результаты с еще более резкими зависимостями. Каждые 100 миллисекунд ожидания снижают конверсию на 7%. Каждые 2 секунды ожидания увеличивают вероятность отказа на 103%.
The Daily Telegraph совместно с Optimizely провели свое исследование в 2016 году. Они внесли дополнительную искусственная задержку при загрузке страниц, результаты — на картинке ниже. The Daily Telegraph — одна из самых популярных газет Великобритании с ежемесячной посещаемостью в 70 млн., достаточно возрастной (читай терпеливой) и лояльной аудиторией. Учитывайте это, когда будете смотреть на график.
Ну и вдогонку еще несколько оценок от гигантов e-commerce. Walmart и Amazon сообщают, что каждые сэкономленные 100 миллисекунд времени загрузки их сайта увеличивают прибыль на 1%. На Edge of Future Commercials 2016 AliExpress [заявили], что после того, как они снизили время загрузки своего сайта на 36%, число заказов возросло на 10.5%. Среди новых покупателей конверсия выросла на 27%.
Сколько секунд — хорошо?
Веб-мастера Google могли дать фору многим политикам, отвечая на вопросы про скорость загрузки в рубрике Ask Google Webmasters. Они так и не дали четкого временного интервала допустимой скорости загрузки. Нам посоветовали делать сайт настолько быстрым, насколько возможно, не впадая в крайности при погоне за PSI score, и как обычно рекомендовали сосредоточится на контенте.Прочитать про PSI score и измерить его для любого сайта вы можете здесь, а вот пост на Хабре, где его померили за вас.
Большинство ресурсов, на которые я здесь ссылаюсь, сходятся на том, что хорошее время загрузки — не более трех секунд. Разные источники понимают под этим временем разные вещи, как минимум это Visually Complete, как максимум — полная загрузка. Как показывают исследования, среднее время загрузки мобильных и десктоп страниц сильно больше этого показателя.
В первой версии отчета "Mobile page speed new industry benchmarks" среднее время загрузки лендинговых страниц составило 22 секунды.
В обновленной версии 2018 года, этот показатель улучшился до 15.3 секунд.
В 2019 году Backlinko проанализировали 5 миллионов страниц и установили, что среднее время полной загрузки мобильной страницы — 27 секунд! А среднее время полной загрузки десктоп версии — 10 секунд.
Цифры отличаются потому, что Google анализировал только лендинговые страницы, а Backlinko — все подряд. Теперь немного статистики по Speed Index. На картинке ниже — сравнение средних показателей времени загрузки веб-страниц в 2019 году. Еще раз убеждаемся, насколько Speed Index и Visually Complete — разные вещи.
В 2010 году Мэйли Охей (Maile Ohye), на тот момент Developer Programs Tech Lead в Google, сказала, что они нацелены на показатель в пол секунды. Спустя десять лет ее заявление выглядит примерно, как 2015 год в Back to the Future II.
". studies by Akamai who found that two seconds is actually the threshold for e-commerce site acceptability. Meaning that that’s what users like to shop with. At Google, we aim for under a half second. "
Maile Ohye
Самое главное
- В 2020 большая часть интернета все еще очень медленная, а хорошее подключение к сети позволяет в этом убедиться.
- Скорость загрузки существенно влияет на доход, будь это продажи или реклама.
- Люди заходят в интернет с мобильных устройств чаще, чем с десктопа.
- Удобство и скорость мобильной версии сайта не менее важны, чем его настольной версии.
- Удобным, быстрым и безопасным сайт нужно делать, прежде всего, для реальных пользователей, а уже потом — чтобы Google по голове погладил.
- При индексировании сайтов в приоритете у Google мобильные версии.
- Время полной загрузки страницы не всегда отражает реальный опыт пользователей. Нет магического числа, которое бы однозначно показывало скорость работы сайта, но есть набор общепринятых метрик.
- Скорость работы для пользователя важнее красивой анимации, видео (если это не стриминговый сервис) и других декоративных элементов.
- Если ваш сайт выглядит готовым к работе через 3 секунды после перехода — это хорошо.
Во второй части этого поста мы рассмотрим самые простые и эффективные способы ускорить загрузку сайта. Разберемся, как в этом могут помочь сервисы по защите и доставке контента. Обсудим, почему комплексные решения, предоставляющие защиту + ускорение как сервис, лучше подходят для большинства проектов. Заходите к нам в блог еще, будет интересно.
Читайте также: