Я заметил, что я никогда не публиковал что-то о производительности. Это одна из замечательных тем для программиста.
Очевидно, почему производительность имеет большое значение, поэтому я пропущу эту часть, чтобы сразу перейти к тому, как создать производительный веб-сайт.
Итак, для начала у всех нас есть веб-сайт, над которым мы работаем. В этой статье я объясню несколько методов, которые мы используем для измерения эффективности.
__ GTMetrix
Вы можете просто ввести свой URL-адрес в GTMetrix, чтобы получить результат, я сделал это для seek.com.au, и оказалось, что они получили оценку B, что действительно хорошо. Время загрузки составляет 6,8 с, а размер страницы также составляет 1,17 МБ и 53 запроса.
Если вы перейдете на Inspect Element, на их сайте есть файл main.js размером 862 КБ.
Согласно среднему времени загрузки в этой статье:
Время загрузки ниже среднего (9 мс), размер их страницы также ниже среднего (1,5 МБ), а количество запросов также меньше среднего (70). Запросы.
Но 862 КБ JavaScript — это довольно много, я считаю, что это может быть слишком много. допустимый размер — менее 500 КБ для действительно большого приложения.
Вы также можете увидеть, какие есть предложения по улучшению:
У них хорошая минимизация файлов JavaScript и HTML, а также сжатие GZIP.
Показано, что им нужно больше работать над минимизацией своих редиректов, поэтому для них это отличное начало.
или даже для рекомендаций YSlow:
YSlow анализирует веб-страницы и объясняет, почему они работают медленно, основываясь на правилах Yahoo! для высокопроизводительных веб-сайтов.
Согласно этим правилам, их DNS-поиск работает довольно плохо, и несколько заголовков с истекшим сроком действия могут сделать веб-сайт еще лучше.
или их водопад:
Анализ водопада очень полезен, вы загружаете сначала самое необходимое?
Как вы видите, они загружают style.css и main.js довольно рано, чтобы они могли показать весь сайт.
Изображения и остальные запросы JS и аналитика идут позже.
Теперь GTMetrix сделал то, что еще может помочь нам получить общее представление о нашей производительности.
__ testmysite.thinkwithgoogle.com
Что я также попробовал для seek.com.au и дал мне такой результат:
Это приемлемо, но Google по-прежнему считает, что можно сэкономить 3 секунды, а вероятность потери посетителей в 26 % — это много.
После теста для мобильных устройств пришло время проверить использование памяти, как ваш сайт работает в браузере клиента:
__Вкладка "Производительность"
В разделе «Проверить элемент» браузера Chrome есть вкладка, например, «Производительность». Щелкнув по ней и обновив веб-сайт, вы можете получить такие сведения:
Вы должны быть более сосредоточены на каждом разделе, например:
Seek.com.au хорошо работает даже менее чем за 1 секунду, и в браузере что-то отображается. Посетитель ожидает увидеть что-то менее 100 мс.
(об этом я писал здесь)
Кроме того, вы можете проверить использование графического процессора, использование памяти, что очень помогает понять, есть ли утечка памяти или дополнительный процесс на веб-сайте или нет. Поэтому вы можете оптимизировать его или, по крайней мере, знать, как начать работать над решением этой проблемы.
__Вкладка "Память"
Вы можете использовать вкладку «Память», чтобы увидеть, как используется память вашего веб-сайта, как вы видите для seek.com.au, 40 МБ ОЗУ довольно хорошо, однако 70 МБ используется для Google Analytics Tracker, это также неизбежно, потому что мы хочу нормально все отслеживать.
__Вкладка "Аудит"
Вы можете запустить его как для ПК, так и для мобильных устройств.
Аудит дает вам действительно подробный отчет о вашем сайте. Вы можете использовать это, чтобы узнать, как работает ваш веб-сайт, однако, возможно, вы не сможете исправить их все, но здорово знать, каковы слабые места.
__Приложения для мониторинга
Вы также можете использовать такой инструмент, как Monitis, чтобы постоянно проверять свой сайт.
Или используйте новую реликвию:
Конечно, они являются более доступными инструментами для постоянного мониторинга производительности.
В следующих статьях я напишу о советах и методах повышения производительности.
Понравилась статья? Следуйте за мной!
Есть мнение или комментарий? Введите его!
