К основному контенту

Сообщения

Page Speed Insights – это сервис компании Google который измеряет скорость загрузки веб-страниц. Сервис может работать в двух режимах – с помощью обычного и мобильного агента пользователя. Оптимизация скорости сайта является важным фактором внутренней оптимизации, т.к. Google учитывает скорость сайтов при ранжировании   ( 1 ) . Показателем скорости загрузки и рендеринга ресурса является оценка PageSpeed, которая может составлять от 0 до 100 баллов. Чем больше оценка, тем лучше. Если страница набрала более 85 баллов, значит она загружается достаточно быстро. Инструмент PageSpeed Insights определяет, как можно улучшить следующие показатели: время загрузки верхней части страницы: общее время с момента запроса страницы до момента отображения ее верхней части в браузере. время полной загрузки страницы: общее время с момента запроса страницы до ее полного отображения в браузере. Обратите внимание, что PageSpeed Insights постоянно развивается, поэтому по мере добавления новых прав
Недавние сообщения

PWA (Progressive web application) — сайт-приложение

Введение Progressive Web App (PWA) — это тип приложений, которые сочетают в себе web и mobile технологий. PWA выглядят и взаимодействуют с пользователем, как нативные приложения ( native app ).  Основные достоинства PWA-приложений : Увеличение трафика и, как следствие, конверсий Относительная простота создания Кроссплатформенность Устанавливается как полноценное приложение Более быстрая работа Есть возможность работы в offline без Интернет-соединения Есть возможность отображения push-уведомлений на мобильных устройствах и определять местоположение пользователя Установить такое приложение можно путем добавления ярлыка на рабочий стол в Android, через меню поделиться в iOS. Также, можно добавить его прямо в браузер Google Chrome через основное меню. Требования к сайту : Сайт обязательно должен работать по протоколу HTTPS и не содержать ошибок типа Mixed Content Для быстрого создания сайт уже должен иметь мобильный или адаптивный шаблон Необходим логоти

Chrome - инструменты разработчика

Для того чтобы получить объективную картину загрузки страницы нужо в первую очередь убедиться в отсутсвии ошибок в консоли JavaScript. Для того  чтобы отслеживать возникновение ошибок поле действие пользователя можно активировать сохранение логов - Preserve Log. Аналогичная функция есть на вкладке - Network Для того чтобы быстро открыть вкладку Network можно использовать сочетание клавиш - Control+Shift+I . Отключение кеширования производится путем включения функции Disable Cache После загрузки страницы мы можем анализировать диаграму загрузки ресурсов. Время загрузки каздого ресурса представено в столбце - Time и наглядно отображено в виде диаграмы в столбце - Waterfall. В нижней части экрана обображены параметры загрузки всей страницы: Полное время обработки страницы с рендерингом - Finish Время загрузки  дерева DOM - DOMContentLoaded Полное время загрузки всех ресурсов - Load Параметр DOMContentLoaded не должен превышать 4 секунды. Сссылки: https://habr.com/po

Разделение сайтов на хостинге

Выделение для сайтов отдельных хостинг-аккаунтов дает ряд положительных преимуществ перед схемой общего расположения сайтов на одном аккаунте: Уменьшается конкуренции за ограниченные ресурсы. Превышение разрешенной нагрузки может привести к полному отключению сайта Снижается риск возникновения ошибки создания новых файлов при достижении лимита их количества ( inode limit ) Исключается возможности кросс-сайтового заражение вредоносным ПО и уменьшается уязвимость перед хакерскими атаками и риск появления дорвеев , бэкдоров Сокращается риск блокировок по IP всех сайтов сразу если на том же хостинге расположены запрещенные в РФ ресурсы, а у сайтов нет выделенных IP Может уменьшиться время ответа сервера (TTFB - Time To First Byte ), что положительно влияет на время загрузки страниц в браузере пользователей При выполнении програмного кода, скрипты (парсеры, скрипты синхронизаций с 1С, генераторы отчетов и т.д.) физически не могут повлиять на файлы других сайтов Большинство сайтов и

Типовые работы по оптимизации скорости сайтов

---- Вид работ Эконом Стандарт Турбо Примерная трудоемкость 1 час 8-12 часов 8-12 часов Оптимизация скорости работы ресурсов сайта, вероятно, приведет к увеличению показателей в сервисе Google Page Speed, но невозможно гарантировать определенный уровень ускорения Аудит конфигурации сервера ✗ ✗ ✓ Проверка асинхронной загрузки скриптов и наличия др. сторонних ресурсов ✗ ✓ ✓ Проверка цепочек перенаправлений и надежности SSL сертификата ✓ ✓ ✓ Если требуется - включение и настройка сжатия ✗ ✓ ✓

Порядок действий

Перед началом работ по оптимизации необходимо определить типовые страницы сайта (категория, карточка товара, главная страница, страница и т.д.) и проверить существуют ли готовые решения для данной версии CMS. На данный момент большинство популярных хостинг-провайдеров представляют функцию ускорения сайтов в контрольной панели. Если есть учетные данные, то нужно проверить поддерживает ли конкретный хостинг функцию ускорения. Для осуществления оптимизации скорости загрузки страниц необходимо выполнить следующие действия: Запустить инструмент PageSpeed Insights для целевой страницы, зафиксировать индекс до оптимизации Выполнить рекомендации из отчета PageSpeed Insights и чеклиста (ниже) Открыть панель "Инструменты разработчика" браузера Google Chrome и на вкладках "Performance", "Network" и "Audits" определить оставшиеся проблемные ресурсы Оптимизировать ресурсы найденные на прошлом шаге Запустить инструмент PageSpeed Insights для целевой

Профайлеры

Для анализа скорости загрузки страниц сайта можно использовать различные инструменты. Кроме самого сервиса Page Speed Insights можно использовать встроенные в браузер инструменты профайлинга . В панели "Инструменты разработчика" браузера Google Chrome существуют две вкладки, "Performance" и " Network ", для анализа скорости загрузки ресурсов и их отображения. Кроме этого существует огромное количество сторонних профайлеров, у каждого из которых есть свои достоинства и недостатки. Наиболее популярные приведены ниже: Проверка оптимизации для мобильных устройств http://www.webpagetest.org Lighthouse , код . Аналог - вкладка "Audits" на панели "Инструменты разработчика" браузера Google Chrome Отслеживать изменение производительности можно с помощью SpeedCurve  и New Relic pingdom.com SpeedTracker Calibre Google Search Console - удобство просмотра на мобильных устройствах

Решения для CMS

Популярные CMS постоянно развиваются и добавляют самый востребованный функционал. Если даже в самой CMS еще нет определенных функций, их можно найти в виде дополнительно устанавливаемых модулей. Битрикс В настройках главного модуля есть опции сжатия и объединения CSS/JS. В последних версиях CMS есть дополнительная опция "подключать скрипты в footer". 95% скриптов после переноса останутся работоспособными, но бывают ситуации, когда нужно запретить перенос скрипта вниз страницы. Запрет на перенос задаем атрибутом data-skip-moving="true" See the Pen oeELZK by George Wise ( @ink-jet ) on CodePen . В настройках главного модуля также можно задать "Качество JPG при масштабировании изображений (в процентах)". Этот параметр нужно уменьшить до 70. Часто в robots.txt закрывают от индексации папку /bitrix/, вместе с ней файлы стилей, изображений и скриптов. При анализе бот Google видит страницы совсем без дизайна, что может негативно повлиять на р

Серверные решения

На данный момент большинство популярных хостинг-провайдеров представляют ( 1 , 2 ) функцию ускорения сайтов в контрольной панели. Как правило услуга платная, но стоимость сильно варьируется на разных хостингах. Для ускорения используются модули mod_pagespeed, ngx_pagespeed. Если сайт развернут на VPS/VDS, то модуль pagespeed можно установить не прибегая к услугам хостинг-провайдеров. На изображении ниже окно настройки услуги "ускоритель сайтов" хостинг-провайдера TimeWeb: mod_pagespeed, ngx_pagespeed О том как установить модуль ускорения на сервер Apache можно прочитать тут . Руководство по установке на сервер Nginx тут , чаще всего нужно просто выполнить команду (сделав бекап nginx): bash <(curl -f -L -sS https://ngxpagespeed.com/install) --nginx-version latest Включение и отключение фильтров модуля  pagespeed можно производить в конфигурационном файле /etc/apache2/mods-available/pagespeed.conf , в файле . htaccess если используется Apache или непосредств