В данном разделе представлены наиболее популярные бесплатные инструменты для анализа и оптимизации клиентской производительности веб-сайтов. Здесь не рассмотриваются стандартные средства браузеров, а также инструменты для удалённой отладки мобильных браузеров.

Аудит

Page Speed

Page Speed является бесплатным расширением для популярных браузеров Google Chrome, Opera и Firefox. Посредством определенного набора тестов, основанного на практических рекомендациях по оптимизации времени загрузки страниц, Page Speed анализирует код страниц и настройки веб-сервера. В итоге разработчик получает оценку по 100-балльной шкале для каждой анализируемой страницы сайта, а также соответствующие рекомендации от специалистов Google.

YSlow

YSlow проводит анализ страниц и предлагает различные способы улучшения их производительности в соответствии с набором правил по оптимизации времени загрузки. Кроме рекомендаций данный инструмент предоставляют статистику по ресурсам страницы, а также упрощает использование различных средств по оптимизации страниц (например, Smush.it или JSLint).

На сегодняшний день YSlow доступен в качестве расширения для браузеров Firefox, Chrome, Opera, Safari. Также существует реалазция в виде букмарклета и утилиты, работающей в командной строке (с использованием node.js).

Диагностика UI

dynaTrace Ajax Edition

dynaTrace Ajax Edition превращает разработку сверхбыстрых Web 2.0 приложений в приятный и непринужденный процесс. Данное решение позволяет не только уменьшить общее время загрузки сайта, но также оптимизировать рендеринг страниц и выполнение кода JavaScript, при этом поддерживаются все основные версии браузеров IE и Firefox. Более того, он прекрасно интегрируется с различным веб-фреймворками для автоматизированного тестирования производительности. И все это бесплатно и предельно доступно!

Speed Tracer

Speed Tracer позволяет идентифицировать и исправить проблемы производительности сайтов и веб-приложений. Он визуализирует низкоуровневые метрики, полученные внутри браузера, по мере того, как работает ваш сайт. Данные метрики главным образом связаны с выполнением и парсингом кода JavaSctipt, обработкой событий DOM и различных таймеров, также процессом рендеринга страниц. Speed Tracer доступен в виде расширения для браузера Chrome и работает на основных поддерживаемых платформах (Windows и Linux).

Диагностика HTTP

HttpWatch

HttpWatch представляет собой интегрированный HTTP сниффер для браузеров IE и Firefox. HttpWatch анализирует весь поток HTTP трафика и тем самым позволяет по-настоящему понять процесс загрузки страниц. Данный инструмент отличается не только точностью фиксации сетевых событий, но и детальным уровнем анализа всех временных показателей, а кроме того позволяет работать даже с защищенными HTTPS соединениями.

Firebug (Net Panel)

Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком и инспектором JavaScript, HTML, CSS и XMLHttpRequest. Отдельно стоит отметить набор встроенных решений для исследования сетевых запросов.

Fiddler

Fiddler – это прокси для отладки веб-приложений. Перехватывая HTTP(S) трафик между локальной машиной и сетью, он позовяет проводить детальный анализ всех входящих и исходищих запросов. Кроме того, он включает в себя мощную подсистему для скриптования с использованием любого .NET языка программирования.

BrowserMob Proxy

BrowserMob Proxy — это прокси-сервер, который был специально разработан для автоматизированного анализа скорости сайтов. Само по себе данное решение позволяет лишь собирать данные о производительности. Но в связке с такими инструментами как Selenium и HAR Storage оно превращается в полноценный фреймворк для тестирования клиентской производительности.

Подробнее →

Диагностика мобильных сайтов

Mobile Perf

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

Подробнее →

Оптимизация изображений

SpriteMe

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

Подробнее →

PngOptimizer

PngOptimizer представляет собой Windows утилиту для оптимизации BMP, GIF, TGA и PNG изображений без потери качества. Отличительная черта приложения – это наличие графического интерфейса.

OptiPNG

OptiPNG предназначен для решения тех же задач, что и PngOptimizer. Отличие заключается в кросс-платформенности, а также в наличии только интерфейса командной строки.

ImgMin

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

Подробнее →

jpegtran

jpegtran — это полезная кросс-платформенная утилита для удаления метаданных из JPEG изображений.

Оптимизация JavaScript/CSS

Closure Compiler

Closure Compiler – это средство для ускорения загрукзи и выполнения кода JavaScript. В некотором смысле, это действительно компилятор JavaScript. Но вместо компиляции в машинный код, он компилирует код JavaScript в улучшенный JavaScript код. Closure Compiler проводит анализ кода, исключает избыточный код, а всё что остается минимизирует. Кроме того, он предупреждает разработчиков в случае наличия синтаксических ошибок, ошибках в связях или типах. Доступен в виде Java приложения, веб-приложения и RESTful API.

YUI Compressor

YUI Compressor – это решение с открытым исходным кодом, которое позволяет не только осуществлять сжатие JavaScript файлов, но и файлов CSS. В случае JavaScript удаляются комментарии и непечатные символы, а также обфусцируются локальные переменные. В случае CSS сжатие основано на использовании специальных регулярных выражений.

LabJS

LABjs – это универсальный динамический загрузчик JavaScript. С его помощью можно существенно повысить производительность страниц за счёт асинхронной, но контролируемой загрузки файлов JavaScript.

Подробнее →

HeadJS

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

Ускорители сайтов

mod_pagespeed

mod_pagespeed — это модуль с открытым исходных кодом. Основная его функция заключается в автоматической оптимизации страниц и их ресурсов с целью уменьшения времени загрузки сайтов. Таким образом многочисленные рекомендации по ускорению сайтов были реализованы в виде фильтров для самого популярного в мире веб-сервера Apache.

Подробнее →

RequestReduce

Подобно mod_pagespeed RequestReduce позволяет оптимизировать на лету сайты, которые используют веб-сервер IIS. Среди основных возможностей автоматическое создание спрайтов, а также объединение и минимизация файлов CSS и JavaScript.

 

Comments are closed.