Light-electric.com

IT Журнал
5 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как ускорить скорость скачивания в браузере

Как повысить скорость работы браузера Google Chrome

Когда-то Chrome был очень легок и быстр, благодаря чему быстро завоевал рынок. Не было никаких лишних сущностей, кроме тех механизмов, которые отвечали за загрузку страниц и защиту пользователя от различных угроз. Большинство обзоров браузера подчеркивали, что это «очень быстрый» браузер и отлично поддерживает веб-приложения, имея минималистичный интерфейс. Его даже окрестили «первым настоящим браузером Web 2.0».

С момента дебюта прошло уже 11 лет. За этот период – ввиду отсутствия серьёзной конкуренции и пересмотра отношения к конфиденциальности – всё изменилось. Несмотря на это, Google Chrome по-прежнему является самым популярным в мире, имея 67% рынка браузеров, и, конечно, большое значение имеет интеграция с экосистемой Google, то есть с Gmail, Диском и другими службами.

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

Очистите приложения и расширения

Chrome – это самостоятельная платформа, а приложения и расширения – это возможности для персонализации. Но каждая из этих добавок требует определенных ресурсов для работы, чем их больше – тем медленнее браузер. Поэтому стоит время от времени проверять, какие вам больше не нужны и удалить их, освобождая ресурсы для использования браузером.

Как это сделать? Введите в адресной строке браузера

Из списка плагинов, дополнений, приложений и расширений вы можете отключить или удалить любые. Это самый быстрый способ вернуть «физическую форму» Chrome. Кроме того, повысится уровень безопасности – часто оказывается, что плагины и дополнения имеют уязвимости или вовсе используются создателями в недобросовестных целях.

Проверьте используемые расширения

Расширения и дополнения, которые вы оставляете, также требуют проверки, особенно под углом сбора данных. Посмотрите, не нарушают ли они вашей конфиденциальности путём сбора личной информации. Каким образом это проверить? Повторно введите chrome://extensions/, а затем для каждого расширения, нажмите на Подробнее. Отобразится подробная информация о расширении – обратите внимание Доступ к сайтам. Если нет такого раздела, это означает, что данный плагин/расширение не собирает информацию. Однако, если есть такой выбор, как на скриншоте ниже, то:

  • На всех сайтах – приложение может в любое время и без ограничений, изменить то, что отображается в браузере; если вам не нужна его действия везде, переведите его на другой вариант
  • На выбранных сайтах – при выборе этой опции можно добавить (по одному) сайты, на которых должен работать данный пакет
  • При нажатии – приложение будет запускаться только после нажатия пользователем на его иконку

Интеллектуальное управление вкладками

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

Мы можем рекомендовать для этой цели три:

  • The Great Suspender – работает в фоновом режиме и закрывает вкладки, которые не используются в течение заданного времени.
  • Toby for Chrome – переносит вкладку в конфигурируемую коллекцию закладок.
  • Tab Snooze – позволяет сохранять все закладки и возобновлять их через определенное время. Поэтому не нужно держать все открытыми, а вместо этого, сохраните их и восстановите, когда выбранные вкладки потребуются.

Используйте плагины блокирующие скрипты

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

Хорошим примером такого инструмента является uBlock Origin – останавливает выполнение всех сценариев, что позволяет значительно ускорить загрузку страниц, а также позволяет создать список исключений для отдельных веб-сайтов.

Помните, что использование блокировки скриптов может привести к потери доступа к функциональности сайта.

Уменьшите поток данных в мобильной версии

Пользователи браузера Chrome на Android могут воспользоваться скрытой опцией, которая позволяет загружать меньше данных при загрузке страницы – это, так называемая, версия «Lite». Каким образом её активировать? Откройте Chrome, зайдите в настройки, а затем активируйте Упрощенный режим.

Позвольте Chrome предсказывать страницы

Другая интересная функция для пользователей мобильных устройств – это прогнозирование страниц. Здесь также используются дополнительные механизмы браузера, которые предсказывают, какие сайты откроет пользователь, и запрашивает их содержание ещё до реального перехода. Звучит интересно? Зайдите в настройки, потом в дополнительные настройки, где вы найдете раздел «Конфиденциальность» – выберите там параметры Использовать прогнозирование страниц. Это позволит быстрее загружать страницы сайтов, а также повысит их доступность в автономном режиме.

Вы также можете попробовать использовать эту функцию на рабочем столе. Введите в адресную строку chrome://settings, а затем перейдите к разделу «Дополнительно» и разверните его. В разделе Конфиденциальность и безопасность вы найдете функцию Разрешить предзагрузку страниц для повышения скорости работы браузера и поиска – включите её и готово.

Переключитесь на другой DNS

Каждый раз, когда вы набираете в адресной строке, Chrome ищет на сервере Domain Name System URL, ведущий к указанной странице, а также IP-адрес. За скорость этой операции отвечает интернет-провайдер – который не всегда имеет лучшие механизмы. Однако, можно переключиться на другого провайдера DNS, что позволит заметно ускорить время между вводом адреса и загрузкой сайта, и сделает так, что поставщик не будет собирать данные о страницах, которые вы посещаете.

Яндекс и Google предлагают услуги DNS – бесплатно. Это не единственные поставщики, но все тесты показывают, что именно они делают это быстрее. Кроме того, оба обещают отсутствие сбора данных о пользователях – том, чему можно верить или не верить. Смену провайдера DNS можно провести либо на маршрутизаторе, либо на конкретном устройстве.

Заполните дыры в безопасности сайтов

В настоящее время почти все веб-сайты используют протокол HTTPS – о чём свидетельствует значок замка в адресной строке. Это означает, что данный сайт является подлинным (поддельные сайты часто используются для фишинга), а также все данные между вашим устройством и веб-сайтом передаются в зашифрованном виде.

Однако, некоторые сайты по умолчанию используют HTTP. Что делать в такой ситуации? Тогда мы рекомендуем установить расширение HTTPS Everywhere – оно автоматически переключает сайт на HTTPS, благодаря чему никто не сможет использовать передаваемые данные . Это плагин создан совместно Electronic Frontier Foundation и Tor Project, и доступен совершенно бесплатно.

Очистите систему

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

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

Примечание: сканирование может занять длительное время, даже несколько десятков минут.

Дайте браузеру новый старт

Если всё терпит неудачу, вы можете восстановить настройки Chrome, которые были сразу после установки. Как вернуть браузер к заводским настройкам? Перейдите в Настройки, а затем в разделе «Восстановление компьютера и чистка данных» выберите Сброс всех настроек до значений по умолчанию.

Вы получите предупреждение: «Это обнулит вашу домашнюю страницу, страницу новой вкладки и закрепленных вкладок. Кроме того, браузер отключит все расширения и удалит временные данные, такие как файлы cookie. Ваши закладки, история и сохраненные пароли не будут удалены»

Если вы не имеете ничего против, нажмите Сброс настроек – и готово.

10 советов о том, как увеличить скорость загрузки страницы

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

Читать еще:  Где находится панель инструментов браузера яндекс

Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?

На самом деле есть несколько способ.

  • Использование CSS-спрайтов. CSS-спрайт — это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

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

Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера — разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

6. Используйте кэш браузера

Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.

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

Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него либо с наименьшим временем отклика. Кроме того браузер кэширует javascript-файлы, и если Вы посещали сайты на котором используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.

Одним из таких CDN — является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

8. Оптимизируйте ваши изображения

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

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

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

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

Читать еще:  Настройка времени в браузере

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3–4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.

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

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле .htaccess прописать следующие строки кода:

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До вывода страницы на экран проходит 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.

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

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

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

Статья основана на собственных практических наблюдениях.

Способ первый

Данный вариант наиболее эффективен, когда браузером и компьютером пользовались долго (от 3-6 месяцев), но не обслуживали их программную среду должным образом.

Опишу последовательность действий.

  • Полностью удаляем текущий браузер вместе со всей историей, сохраненными паролями, дополнениями и прочими пользовательскими данными.
  • Чистим все разделы жесткого диска от «мусора». О том, как это сделать, рассказывал здесь .
  • Устанавливаем браузер заново.

Можно пойти и другим путём, но так обычно быстрее и проще.

В ряде случаев после выполнения этих действий скорость загрузки интернет-ресурсов увеличивается «на глаз» раза в полтора. В других случаях эффект менее заметен.

Для справки. Удаляйте браузер через панель управления, раздел «программы и компоненты» (Windows 7 или 10) или «установка и удаление программ» (Windows XP). Саму панель управления обычно можно найти через меню «Пуск». Выбор нового браузера за вами. Лично мне нравится Яндекс браузер.

Способ второй

Они очень популярны и обычно используются для скачивания, раздачи различных файлов. Например, фильмов и музыки.

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

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

Работа этих программ может вызвать уменьшение скорости загрузки сети в десятки раз.

Соответственно их отключение приводит к значительному росту скорости.

К вам небольшая просьба.

Если нравится текущая статья, поставьте лайк (палец вверх).

Способ третий

Совместное использование турбо режима в браузере и блокировщиков рекламы позволяет ощутимо увеличить скорость загрузки информационного контента.

Данный функционал можно реализовать за счет установки и правильной настройки дополнительного софта на компьютере. Однако есть более простой вариант — этот режим и блокировщики не желательной рекламы уже присутствуют в стандартной «комплектации» современной версии браузера от Яндекс.

Насколько я знаю блокировка мешающей рекламы — это относительно новая возможность. Она позволяет убрать с поля зрения некоторые раздражающие рекламные форматы, от которых ранее было не всегда просто избавиться.

Лично мне для комфортной скорости работы в интернете хватает первых двух блокировщиков.

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

Нужна большая скорость загрузки интернет-ресурсов? Тогда стоит включить турбо режим. Активируется он просто. Покажу скриншот.

Как видите, все довольно просто.

Как в итоге поступать со своим компьютером и ускорять интернет — каждый решает сам. Я лишь поделился своим видением ситуации и практическими наблюдениями, выводами. 3 способа, описанные выше, мне часто помогают в работе. Бывают и частные случаи, где они особо не помогают, но это уже отдельные истории.

Оставайтесь на связи.

Приглашаю вас в сообщество в Вконтакте и Одноклассниках. Ссылки на них в описании текущего канала . Понравилась статья? Ставьте лайки (палец вверх). Подписывайтесь на канал, впереди будет еще много интересного. Делитесь публикацией с друзьями, кнопки «поделиться» в социальных сетях в вашем распоряжении.

Читать еще:  Репликация между контроллерами домена

ТОП-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) – в конце страницы, перед закрывающим тегом

Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector
×
×