1. Преимущества быстрой загрузки
2. (2) Более высокие показатели конверсии
3. (3) лучшая способность к сканированию
4. Бесплатные инструменты для проверки PageSpeed
5. Google PageSpeed ​​Insights
6. WebPagetest.org
7. Тест скорости сайта Pingdom
8. GTMetrix
9. Инструмент анализа изображений
10. 10 гарантирует эффективные советы для невероятно быстрого времени загрузки
11. Определить количество HTTP-запросов
12. (2) Включить сжатие Gzip
13. Сжатие Gzip расширением файла .htaccess
14. Сжать сжатие, расширив файл .htaccess
15. (3) Настройте кеширование в браузере
16. Кэширование браузера через файл .htaccess
17. Кэширование браузера через плагины CMS
18. (4) уменьшить исходный код HTML
19. (5) Сжатие CSS и JavaScript
20. (6) Оптимизация изображений и графики
21. (7) Используйте CSS-спрайты
22. (8) Оптимизировать визуальный язык для Интернета
23. (9) Используйте полноразмерную информацию для фотографий
24. (10) Сначала загрузите важный контент
25. заключительные замечания

27 марта 2019 г.

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

Изменение в поведении мобильного серфинга требует все более интенсивных оптимизаций для PageSpeed или время зарядки заметно быстрее на сайтах. Быстрые сайты радуют пользователей и позволяют более эффективно сканировать роботов поисковых систем.

Преимущества быстрой загрузки

(1) Лучший UX и низкий показатель отказов

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

(2) Более высокие показатели конверсии

Для владельцев магазинов PageSpeed ​​является важным показателем увеличения продаж. Если страница статьи загружается быстро, это оказывает положительное влияние на пользовательский опыт и, следовательно, на продажи. Согласно подсчетам гиганта электронной коммерции Amazon , увеличение PageSpeed ​​на 100 мс приводит к снижению коэффициента конверсии примерно на 1 процент. ( Сделать данные полезными; Грег Линден; Standford Data Mining; 2006 )

(3) лучшая способность к сканированию

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

Бесплатные инструменты для проверки PageSpeed

Существует множество бесплатных инструментов PageSpeed ​​для анализа времени загрузки с разных точек зрения. Вот некоторые рекомендуемые бесплатные инструменты:

Google PageSpeed ​​Insights

Наверное, самый популярный инструмент Google PageSpeed ​​Insights , После ввода URL-адреса инструмент выполняет проверку в реальном времени и отображает рейтинг PageSpeed, основанный на максимальном балле 100 баллов, при этом для достижения этой цели необходимо точно настроить многие факторы. Хорошо разбираясь в PageSpeed ​​Insights, я нахожу различие между настольными системами и мобильными устройствами. Список критериев тестирования и существующий потенциал для оптимизации позволяет эффективно оптимизировать PageSpeed. Лично я нахожу инструмент очень острым, таким критическим, настроенным. Вот почему я часто использую другие инструменты для анализа.

Инструмент Google Pagespeed Insights

WebPagetest.org

WebPagetest мой любимый среди бесплатных инструментов PageSpeed. Доступны различные настройки. Возможны тесты нескольких URL. Несмотря на то, что тестирование веб-страницы бесплатное, это высококачественный инструмент анализа. Google также рекомендует WebPagetest.org - смотрите здесь ,

Webpagetest.org

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

Резюме // WebPagetest.org

Особенно информативна колонка «Первый байт». Это относится к «TTFB» (время до первого байта) - скорость отклика сервера. Это время, которое требуется серверу для возврата первого байта. TTFB не измеряет скорость загрузки ответа. Если TTFB больше 1,0 секунды, сервер, кажется, работал медленно во время теста. Он платит за мониторинг сервера, чтобы увидеть, если он вообще слабый и может быстро сломаться под нагрузкой.

Тест скорости сайта Pingdom

Моя третья рекомендация инструмента для анализа PageSpeed: Pingdom , Шведский провайдер службы мониторинга серверов также предлагает бесплатный тест PageSpeed. Настройки и результаты несколько ограничены по сравнению с WebPagetest. Тем не менее, вы получаете много полезных идей, и поэтому этот тест очень хорошо подходит для анализа OnDemand.

Тест скорости сайта // Pingdom

Pingdom масштабирует результаты для различных критериев теста до максимум 100 достижимых баллов. Время загрузки («Время загрузки») дается в секундах, к сожалению, без указания TTFB. Performance Insights суммирует самые большие рычаги оптимизации для оптимизации страницы PageSpeed. Быстро вы можете определить нежелательные узкие места и специально их устранить. Я особенно ценю Анализ водопада, который дает подробный обзор времени загрузки всех ресурсов (CSS / JavaScript / изображения). Графически Pingdom - это праздник для глаз.

Страница Speed ​​Performance Insights // Pingdom

GTMetrix

Моя следующая рекомендация GTMetrix , Инструмент позволяет проводить универсальные тесты. Если введен URL-адрес, можно дополнительно указать местоположение сервера, веб-браузер, соединение и другие индивидуальные настройки. Я считаю полезной аутентификацию HTTP, которую можно использовать, если URL требует аутентификации.

Панель инструментов отображает данные о производительности протестированного URL. Это включает в себя не только оценку PageSpeed ​​и YSlow, но и детали страницы, такие как время загрузки, размер файла и количество запросов для этого URL.

PageSpeed-Test Dashboard // GTMetrix

Среди этих данных многочисленные подробные отчеты, которые отображаются в виде меню с вкладками. В этих отчетах содержится подробное описание проведенного анализа: две вкладки «PageSpeed» и «YSlow» предлагают полезные рекомендации (аналогично Google PageSpeed ​​Insights). Посредством диаграммы водопада, временных и исторических данных идентифицированы многие «тормозные колодки».

Данные PageSpeed ​​// GTMetrix

Инструмент анализа изображений

Если изображения страницы должны быть проанализированы, то есть Инструмент анализа изображений рекомендуется. После указания URL-адреса программа анализирует степень оптимизации файлов изображений, связанных в исходном коде HTML страницы.

Инструмент анализа изображений

С этим я хотел бы оставить это с рекомендацией инструментов для измерения PageSpeed ​​и посвятить себя теперь основной теме сообщения в блоге.

10 гарантирует эффективные советы для невероятно быстрого времени загрузки

(1) уменьшить HTTP-запросы

HTTP - это сокращение от Hypertext Transfer Protocol. Он используется для передачи данных с сервера из Интернета на клиент (браузер). Протокол HTTP широко используется в качестве общего протокола передачи данных.

Чтобы полностью отобразить веб-страницу в браузере, всегда требуется различное количество HTTP-запросов между сервером и клиентом - в зависимости от степени и уровня оптимизации веб-страницы. Каждый требуемый файл (стили CSS, JavaScript, изображения и т. Д.) Запрашивается и передается индивидуально. Чем меньше требуется HTTP-запросов, тем быстрее загружается страница. Следовательно, вы должны минимизировать количество HTTP-запросов.

Определить количество HTTP-запросов

Легко определить, сколько HTTP-запросов требуется для полного представления ресурса. Я использую Браузер Chrome , При щелчке правой кнопкой мыши и выборе «Изучить» в меню открывается «Инспектор Chrome», с помощью которого определяются запросы HTTP.

Google Chrome Inspector

В меню вкладок выберите «Сеть» и введите нужный адрес в поисковую ячейку браузера, или вы можете снова загрузить страницу. После загрузки страницы количество HTTP-запросов будет отображаться в левом нижнем окне браузера. В моем примере для полной загрузки страницы требуется 24 HTTP-запроса (изображение: красная рамка). Чем меньше HTTP-запросов, тем лучше.

Пример: отображение HTTP-запросов в Chrome Inspector

Chrome Inspector также сообщит вам, какие файлы были загружены, какого они типа, какого размера файл, их задержка и т. Д. Я рекомендую проверить эти данные на вашем собственном веб-сайте. Например, следует избегать файлов с кодом состояния HTTP 3xx или 4xx.

(2) Включить сжатие Gzip

Gzip - это программа сжатия без запатентованных алгоритмов. С помощью Gzip данные сжимаются с сервера на клиент. Это экономит пропускную способность и увеличивает скорость страницы. Нередко может быть достигнута высокая степень сжатия более 70%.

Gzip-сжатие // checkgzipcompression.com

Сжатие Gzip расширением файла .htaccess

Следующим файл .htaccess Запись позволяет быстро активировать сжатие Gzip . Для этого требуется HTTP-сервер Apache с установленным модулем расширения "mod_gzip".

# Сжатие Gzip

<ifModule mod_gzip. с>

mod_gzip_on Да

mod_gzip_dechunk Да

Файл mod_gzip_item_include. (html? | txt | css | js | php | pl) $

обработчик mod_gzip_item_include ^ cgi - скрипт $

mod_gzip_item_include mime ^ text /. *

mod_gzip_item_include mime ^ application / x - JavaScript. *

mod_gzip_item_exclude mime ^ image /. *

mod_gzip_item_exclude rspheader ^ Содержание - Кодировка :. * gzip. *

</ ifModule>

Сжать сжатие, расширив файл .htaccess

Если конфигурация с Gzip не работает, вы также можете использовать Сжать сжатие Попробуйте ввести запись со следующим файлом .htaccess (просто удалите неиспользуемые типы файлов):

# Сжать сжатие по FileType

<IfModule mod_deflate. с>

AddOutputFilterByType DEFLATE text / plain

AddOutputFilterByType DEFLATE text / html

AddOutputFilterByType DEFLATE text / xml

AddOutputFilterByType DEFLATE text / css

AddOutputFilterByType DEFLATE text / javascript

AddOutputFilterByType DEFLATE application / xml

AddOutputFilterByType DEFLATE application / xhtml + xml

AddOutputFilterByType DEFLATE application / rss + xml

AddOutputFilterByType DEFLATE application / atom_xml

AddOutputFilterByType DEFLATE application / javascript

AddOutputFilterByType DEFLATE application / x - javascript

</ IfModule>

(3) Настройте кеширование в браузере

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

Кэширование браузера через файл .htaccess

Требование кеширования браузера через файл .htaccess - активация модуля сервера Apache ». mod_expires ». Следующая запись теперь добавлена ​​в файл .htaccess:

<IfModule mod_expires. с>

ExpiresActive On

ExpiresDefault "Доступ плюс 1 месяц 1 день"

ExpiresByType text / html "доступ плюс 1 месяц 1 день"

ExpiresByType image / gif "доступ плюс 1 месяц 1 день"

ExpiresByType image / jpeg "Доступ плюс 1 месяц 1 день"

ExpiresByType image / png "доступ плюс 1 месяц 1 день"

ExpiresByType text / css "доступ плюс 1 месяц 1 день"

ExpiresByType text / javascript "доступ плюс 1 месяц 1 неделя"

Приложение ExpiresByType / x - javascript "доступ плюс 1 месяц 1 день"

ExpiresByType text / xml "доступ плюс 1 секунда"

</ IfModule>

Информация между «access plus ...» определяет время жизни кеша, которое нужно настраивать индивидуально. В моем примере файлы действительны в течение месяца и дня до истечения срока их действия, и браузер должен перезагрузить их с сервера. Например, если пользователь извлекает страницу через 24 дня, загружаются данные, кэшированные браузером, что сокращает время загрузки и благоприятствует PageSpeed.

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

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

Кэширование браузера через плагины CMS

Те, у кого мало технических ноу-хау, могут также добиться эффективной оптимизации PageSpeed ​​с помощью плагина или расширения CMS. Для WordPress особенно популярны: W3 Total Cache и Cachify , После установки мощная оптимизация PageSpeed ​​становится относительно простой.

Также для мощного решения для электронной коммерции Magento существуют платные расширения для оптимизации времени загрузки. Вы должны решить для себя, хотите ли вы настроить себя в файле .htaccess или инвестировать деньги в готовое решение. Стоит упомянуть Кэш - Кэш полной страницы и Кэш полной страницы ,

(4) уменьшить исходный код HTML

Эффективной мерой оптимизации PageSpeed ​​является сокращение исходного кода путем выгрузки стилей CSS и JavaScript. В исходном коде следует избегать встроенных стилей и лучше их обобщать в файле CSS. Это положительно влияет на время зарядки. Важно ограничить себя до необходимого уровня. Поэтому имеет смысл передать все стили CSS в файл, поскольку это уменьшает количество HTTP-запросов. Чем меньше требуется HTTP-запросов, тем больше влияние на PageSpeed.

(5) Сжатие CSS и JavaScript

Эффект улучшения PageSpeed ​​становится еще сильнее, если стили и скрипты с постраничной печатью сжаты. Между тем, многие редакторы HTML доминируют при сжатии файлов, но в Интернете доступны различные бесплатные инструменты, такие как CSS http://csscompressor.com/ и для JavaScript http://javascript-compressor.com/ ,

(6) Оптимизация изображений и графики

Изображения и графика должны быть сжаты, чтобы уменьшить размер файла и, следовательно, время загрузки. Типы файлов JPG / JPEG и PNG универсально применимы. Для сжатия рекомендую бесплатный сервис TinyPNG или TinyJPG ,

Эффективное сжатие изображения // tinyPNG

(7) Используйте CSS-спрайты

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

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

(8) Оптимизировать визуальный язык для Интернета

Не все изображения и графика подходят для CSS-спрайтов. Изображения содержимого или изображения продукта часто предоставляются в высоком разрешении. Пользователи с мобильными устройствами не нуждаются в таких больших изображениях, потому что изображение уменьшено устройством в соответствии с дисплеем. Тем не менее, большая картинка загружается, и это отрицательно влияет на PageSpeed. Я рекомендую загружать изображения в области контента только в размере на сервере, так как они отображаются максимально (настольный ПК). Например, масштабирование изображения на главной странице до 400x400px сделает бесполезным его загрузку в увеличенный размер.

Дополнительные советы по SEO: XXL Практическое руководство по оптимизации изображений Google

(9) Используйте полноразмерную информацию для фотографий

Если каждый пиксель является информацией о размере ширина «И» высота Тексты, таблицы, списки и т. Д. Могут загружаться быстрее. Браузер резервирует пространство изображения и перезагружает изображение. Это улучшает воспринимаемый пользователем PageSpeed. Поэтому я рекомендую размер презентации в исходном коде для каждого изображения для размещения.

<img src = "/images/image.jpg" alt = "Описание изображения в нескольких словах" width = "400" height = "400" />

(10) Сначала загрузите важный контент

Чтобы повысить удовлетворенность пользователей при загрузке веб-сайта, я рекомендую сначала загрузить соответствующий контент. Все, что служит «преобразованием», должно быть интегрировано в исходный код намного ниже (над «</ body>»). Это позволяет пользователям использовать содержимое страницы при загрузке стилистических элементов и дополнительных функций.

заключительные замечания

PageSpeed ​​становится все более и более важным - не только в Поисковая оптимизация , Принятие и все более широкое использование Интернета в повседневной жизни в настоящее время повсеместно - на диване, во время приготовления пищи, во время занятий спортом, в автобусе или поезде и т. Д. Веб-сайт всегда должен быть удобен, и PageSpeed ​​играет решающую роль. Настало время проверить и оптимизировать свой сайт.

Оптимизация PageSpeed ​​для чрезвычайно быстрого времени загрузки

Похожие

Комментарии