Автор: Махди Резви Переводчик: Front-end Xiaozhi Источник: блог.bitsrc
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Мы можем написать красивый, привлекательный веб-сайт, но если веб-сайт не загружается быстро в браузере, люди, как правило, пропускают его. Хотя существует множество правил производительности, в конце концов все сводится к времени загрузки.
согласно сJakob NielsonВот несколько вещей, которые следует учитывать при создании веб-сайта:
-
Скорость загрузки менее 100 мс — это круто
-
100 мс до 300 мс чувствовать себя хорошо
-
Одна секунда, вероятно, является пределом, при котором мысли пользователя не прерываются. Пользователи почувствуют задержку, но это приемлемо
-
47%пользователей ожидают, что страницы загрузятся за две секунды или меньше -
40%пользователей, если страница загружается более3секунды, чтобы покинуть сайт -
10 секунд или около того — это предел внимания пользователя. Большинство пользователей будут
10покиньте свой сайт за секунды
Как уже упоминалось выше, даже в худшей пропускной способности сети вам необходимо убедиться, что страница нагрузки нагрузки как можно быстрее. Но это легче сказать, чем сделано.
Чтобы помочь лучше добиться этой цели, здесь рекомендуется несколько инструментов анализа производительности.
1. PageSpeed Insights
Это бесплатный сервис, который анализирует содержимое веб-страницы, а затем дает рекомендации по ее ускорению. Он дает вам ключевые показатели, такие как первое отрисовка контента, общее время блокировки и многое другое. Метрики классифицируются какField Data,Origin Summary,Lab Data,Opportunities,Diagnosticsа такжеPassed Audits. Это также дает нам предложения для дальнейших улучшений.
2. Lighthouse
Lighthouseэто инструмент автоматизации с открытым исходным кодом для улучшения качества веб-приложений. Вы можете запустить его как расширение Chrome или из командной строки. Вы даете Lighthouse URL-адрес, который хотите проверить, и он запускает серию тестов для страницы, а затем создает отчет о производительности страницы.
Отсюда вы можете использовать неудачные тесты в качестве индикаторов, чтобы увидеть, что вы можете сделать, чтобы улучшить свое приложение.
Уведомление: Lighthouse в настоящее время уделяет большое внимание функциям Progressive Web App (PWA), таким как «Добавить на главный экран» и поддержке в автономном режиме. Тем не менее, основная цель этого проекта — обеспечить сквозной обзор всех аспектов качества веб-приложений.
Есть два способа запустить Lighthouse: как расширение Chrome или как инструмент командной строки. Расширение Chrome предоставляет более удобный интерфейс для удобного чтения отчетов. Инструмент командной строки позволяет интегрировать Lighthouse в систему непрерывной интеграции.
3. WebPageTest
WebPageTestэто бесплатный онлайн-сайт для тестирования производительности, который поддерживает IE, Chrome, проводит бесплатные тесты скорости веб-сайтов из разных мест по всему миру с использованием реальных браузеров (IE и Chrome) и реальных скоростей подключения потребителей. Вы можете запускать простые тесты или выполнять расширенные тесты, включая многоэтапные транзакции, захват видео, блокировку контента и многое другое. Он также предоставит обширную диагностическую информацию, основанную на результатах тестирования, включая каскадные диаграммы загрузки ресурсов, проверки оптимизации скорости страницы и предложения по улучшению, а также даст каждому контенту окончательную оценку.
WebpageTestВ основном он предоставляет четыре функции: расширенное тестирование, простое тестирование, визуальное сравнение и трассировка.Мы в основном сосредоточены на расширенном тестировании.
Как использовать WebPageTest
- Введите URL для проверки
- Заполните тестовое местоположение, выпадающий список для выбора, дополнительное мобильное устройство (включая Android, IOS), дополнительный ПК (в зависимости от региона, в каждом регионе могут поддерживаться разные браузеры)
- Дополнительные поддерживаемые браузеры
- Нажмите НАЧАТЬ ТЕСТ справа
4. Pingdom
Pingdom: онлайн-инструмент определения скорости веб-сайта — это инструмент определения скорости веб-страницы, запущенный компанией, занимающейся мониторингом веб-сайтов, чтобы помочь пользователям выяснить причины, влияющие на скорость веб-сайта, и предложить возможные решения для повышения производительности веб-страниц. пользователей с веб-сайтами. .
Моя любимая функция — аналитическая сводка, которая дает нам сводку контента и запросов сайта. Я обнаружил, что это очень помогает понять, что предлагается на веб-странице.
5. Sitespeed.io
Sitespeed.ioЭто инструмент для тестирования веб-производительности с открытым исходным кодом, используемый для измерения комплексной производительности веб-сайтов и помогающий разработчикам и тестировщикам анализировать скорость загрузки и производительность рендеринга веб-страниц.
Sitespeed.ioПротестируйте с помощью браузеров (например, Chrome, Firefox), затем соберите данные с нескольких страниц сайта разработчика, проанализируйте эти страницы в соответствии с правилами, такими как рекомендации, и выведите результаты в виде отчетов в формате HTML.
Sitespeed.io выполняет 3 ключевые функции, необходимые для полноценного инструмента тестирования веб-производительности:
- Используйте настоящие браузеры для тестирования веб-сайтов, имитируйте реальных пользователей для запроса подключений и собирайте важные ориентированные на пользователя показатели, такие как: показатели скорости отклика, первая визуальная презентация
- Он может анализировать состав страницы и давать соответствующие отзывы о производительности, чтобы повысить удобство работы конечного пользователя.
- Облегчает отслеживание и позиционирование за счет сбора и сохранения данных о композиции страницы.
6. Calibre
Caliber— это комплексный пакет мониторинга производительности, который помогает вам контролировать и проверять производительность вашего веб-сайта. Он также позволяет имитировать реальные условия, указывая расположение тестовых серверов, управляя смоделированными рекламными предпочтениями и даже имитируя мобильные устройства. Это также позволяет вам установить бюджет и помогает вам оставаться в рамках этого бюджета, снижая производительность.
7. SpeedCurve
SpeedCurveЭто позволяет вам отслеживать эффективность ваших конкурентов, а также свои собственные.
использоватьSpeedCurve, вы можете просмотреть скорость работы определенного фактора на разных сайтах. Для мобильных пользователей они хотят, чтобы веб-сайты загружались быстрее на мобильных телефонах, чем на компьютерах, и они склонны быстро закрывать страницы, если чувствуют себя вялыми, поэтому для них важна скорость отклика веб-сайта.
SpeedCurveТакже предусмотрен синтетический мониторинг. Синтетический мониторинг — это имитация вашего сайта в контролируемой среде. Вы можете настроить такие параметры, как скорость сети, устройство, операционная система и многое другое.
8. SpeedTracker
SpeedTrackerработаетWebPageTestВышеуказанные инструменты запускают регулярные тесты производительности на вашем веб-сайте и визуализируют, как различные показатели производительности меняются с течением времени. Это позволяет вам постоянно оценивать свой сайт и видеть, как новые функции влияют на производительность вашего сайта. Вы также можете определять бюджеты и получать оповещения по электронной почте и в Slack.
таланты【Три подряд】Это самая большая мотивация для Сяочжи продолжать делиться. Если в этом блоге есть какие-либо ошибки и предложения, вы можете оставить сообщение. Наконец, спасибо за просмотр.
Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.
оригинал:blog.bit SRC.IO/производительность…
Статьи постоянно обновляются каждую неделю, и их можно искать в WeChat.【Переезд в мир】Сначала прочитай, ответь【Благосостояние】Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.