Firebug для Firefox! Как пользоваться расширением Firebug? Firebug для Firefox – установка и использование

19.05.2019

Исправление ошибок - необходимое условие любой работы, будь то написание статьи в газету или создание веб-сайта. В компьютерную эпоху работа над ошибками давно автоматизирована. Например, для исправления грамматических ошибок есть спеллчекр в офисном редакторе теста, что помогает пишущей братии писать романы, повести, статьи, даже, можно сказать, не зная всего алфавита. Есть подобные средства и для писателей гипертекста - веб-разработчиков. Примером самого популярного такого средства сейчас является расширение Firebug для Firefox.

Первым делом Firebug

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

Firebug создан программистом Джо Хевиттом и, как мы уже говорили, предназначен для инспекции ошибок веб-страниц - разметки HTML, стилей CSS, сценариев JavaScript. Также при помощи этого расширения можно оценить проблемные места при загрузке страницы в браузер.

Firebug (getfirebug.com) устанавливается как расширение для Firefox. После установки в правом нижнем углу браузера появится иконка жука, кликнув на который, внизу обозревателя откроется специальное окно. В зависимости от режима работы, с правой стороны может появляться второе дополнительное окно. Firebug может запускаться и как самостоятельное приложение, что удобно для обладателей двух мониторов.

Основных режимов отладки шесть - это HTML, CSS, JavaScript, консоль, DOM и сеть. Для каждого из режимов предусмотрена в главном меню веб-отладчика своя собственная вкладка. Кстати, Firebug русифицирован.

Рассмотрим работу в каждом из режимов подробнее.

Отладка HTML. Инспектировать HTML-страницу при помощи Fireburg - одно удовольствие. Нажимаем в главном меню иконку со стрелочкой, наводим курсор на элемент веб-страницы, и тут же в окне HTML появится подсвеченный код этого элемента. И уже не нужно мучительно долго искать глубоко скрытый в коде проблемный элемент. Также в правом вспомогательном окошке появятся дополнительные сведения о стиле, расположении элемента и его свойствах DOM.

Содержимое подсвеченного элемента лёгким движением руки можно тут же отредактировать и сразу же увидеть произведённые изменения.

Поддерживается сворачивание ("фолдинг") кода. Также "Огнежук" позволяет активно использовать кнопки Tab и "вверх-вниз". Tab используется для перемещения по атрибутам элемента при редактировании. А при помощи клавиш "вверх", "вниз" можно переключать значение атрибутов. То есть Firebug увеличит или уменьшит значение числового атрибута на 1, если нажать, соответственно, "вверх", "вниз".

Важным является специальная вкладка в дополнительном вторичном окне под названием "Макет". Каждый элемент веб-страницы содержится в последовательно вложенных контейнерах margin, border, padding. Вкладка "Макет" отражает в виде символических разноцветных прямоугольников сами эти контейнеры. Изменять их значения можно точно так же, как и значения других элементов html, и тут же видеть, как меняется при этом вид страницы.

Редактирование CSS. Ремонтировать стили CSS можно как во вторичном окне режима HTML, так и в отдельном собственном режиме. Редактирование CSS тоже очень удобное: здесь можно и нужно пользоваться клавишами "вверх- вниз". Это позволяет изменять не только значения селекторов CSS, но и сами селекторы, так как Firebug содержит полный словарь ключевых слов каскадных таблиц стилей.

Любое свойство CSS можно быстро отключить и обратно включить, нажимая появляющуюся слева при наведении курсора на CSS-свойство серенькую кнопку.

При наведении курсора на свойство цвета или изображения появляется маленькое окно просмотра этого цвета или картинки. Причём в случае изображения отображаются его размеры.

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

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

Для каждой загрузки можно посмотреть http-заголовок, кликнув на крестик рядом с каждым запросом.

Отладчик JavaScript. Firebug - это мощный отладчик для сценариев JavaScript. Для этой отладки существует специальный отдельный режим "Сценарии". Здесь имеется возможность устанавливать брейкпоинты одним кликом на номере строки кода. Причём брейкпоинты могут быть условные, то есть, например, срабатывать только при нажатии кнопки на странице.

При отладке во время точек останова в дополнительном окне будет демонстрироваться стек вызовов функций, что ждут возврата. А во вкладке "Наблюдения" дополнительного окна отобразятся значения объектов DOM.

Консоль. Очень классная вещь. Консоль Fireburg - это практически как bash в Linux. Представляет собой командную строку. Здесь можно набирать и выполнять команды JavaScript как по отдельности, так и целыми сценариями.

Причём консоль Firebug имеет собственные специальные команды. Например, имеется команда console.log, что похожа на printf в "си":

>>> console.log("Hello, world!") Hello, world!

В консоли есть очень важная функция - профилировщик. Этот инструмент помогает измерить производительность сценария. В режиме консоли нужно просто кликнуть на соответствующей кнопке, и, перезагрузив страницу, кликнуть на кнопке "Профилировать" ещё раз. В результате будет выведен детальный отчёт о времени работы каждой функции вашего js-сценария.

Режим DOM (Document Object Model). Объектная модель документа - это то, во что браузер внутри себя превращает загруженную веб-страницу. DOM - это программный интерфейс, позволяющий сценариям JavaScript производить изменения в видимом окне браузера. Окно этого режима Firebug содержит иерархию объектов веб-страницы и позволяет ими манипулировать в реальном времени на лету, не прибегая к услугам той же консоли.

И ещё одной главной фишкой Firebug являются расширения, которым стоит посвятить отдельную статью. Как и сам браузер Firefox, "Огненный жук" может увеличивать свои возможности за счёт дополнительных расширений, начиная с подсветки синтаксиса и заканчивая встроенным справочником HTML. Эта возможность расширений и делает на текущий момент Firebug беспрекословным лидером, по сравнению с другими браузерами.

Альтернатива

Конечно же, конкуренты Firefox тоже не сидят сложа руки, активно работают в этом направлении и предлагают в своих браузерах аналогичную Firebug функциональность. Эта функциональность постоянно совершенствуется, так что приведённые ниже описания, возможно, уже устареют даже на момент выхода этого номера газеты. Поэтому буду краток и обойдёмся без холиварных сравнений.

MS Internet Explorer 8. Аналог Firebug в IE 8 по своему функционалу повторяет большую часть режимов расширения Firefox . Имеется режим HTML с фолдингом и CSS, позволяющий одним кликом выбрать нужный для редактирования элемент на странице, а также наблюдать за изменениями в реальном времени. Имеется дополнительная раскладка - аналог вкладки "Макет". Однако "юниксовые" клавиши tab "вверх-вниз" не задействованы.

Для отладки JavaScript есть соответствующие режимы "Сценарий" и "Профиль". Консоль тоже присутствует скромненько в дополнительной вкладочке. Однако команды console.log не поддерживаются. Возможно, пока не поддерживаются. И весьма досадно, нет режима "Сеть", позволяющего оценить скорость загрузки веб-страницы. Также нет удобного инструмента для инспекции DOM.

Однако есть в средстве разработки IE 8 переключение режимов обозревателя между движком IE 7 и IE 8. Для многих веб-дизайнеров это важная функция.

Apple Safari. Браузер Safari также может похвастать средством, аналогичным Firebug, причём более стильным по дизайну, чем неказистый IE 8. Имеется просмотр HTML, CSS, "Макета элементов". Но навигация и поиск нужного элемента исключительно внутри html-кода. Редактирование атрибутов найденного элемента тоже весьма примитивное без клавиш tab "вверх-вниз". Но имеется при этом просмотр и изменения свойств DOM элемента.

Режим "Сеть" присутствует. Присутствует отладка и профилирование JavaScript. И имеет место быть продвинутая консоль с автодополнением, а также командой console.log.

Google Chrome. Средство разработки в "Хромом" практически аналогично по внешнему виду аналогу из Apple Safari. В третьей версии "гуглобраузера" данная функциональность сильно урезана. Есть только просмотр кода, режим "Сеть" и консоль. Но можно сказать, что средства отладки Google Chrome и Apple Safari будут полностью идентичны и внешне, и внутренне, так как используют один и тот же движок WebKit.

Opera Dragonfly. "Стрекозоид" браузера Opera практически повторяет интерфейс "Огненного жука" с главным и дополнительным окном. Просмотр html-кода и стилей осуществляется в единой закладке DOM. Присутствует "фолдинг" кода. При этом в дополнительном окне присутствует и функциональность, обеспечиваемая клавишами tab и "вверх-вниз", как и в Firebug. Вкладка "Контейнер" носит только информационный характер.

Консоль присутствует и содержит командную строку, что позволяет выполнять сценарии JavaScript в интерактивном режиме. Имеется отладчик и логирование выполнения сценария. Однако отсутствует фича console.log.

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

Таким образом, альтернативы уступают в функциональности и удобстве Firefbug, но, как говорится в таких случаях, вполне сойдут для сельской местности. Первое же знакомство со встроенными в браузеры средствами отладки стоит однозначно на данный момент начинать с Firebug для Firefox.

Михаил АСТАПЧИК

В этой статье вы узнаете все об использовании Firebug в Firefox. Файрбаг это плагин, который будет полезен всем блоггерам, оптимизаторам, верстальщикам и вебмастерам. Он расширяет возможности браузера Mozilla для тех людей, кто работает над сайтами.

Что умеет Firebug

Плагин Firebug имеет следующие возможности:

инспектирование и редактирование HTML, JavaScript кода, DOM
отладка и логирование JavaScript кода
выполнение JS напрямую через командную строку
автоматический поиск ошибок в JavaScript, XML, CSS
инспектирование и редактирование CSS-стилей
отображение CSS-метрик
отображение сетевых запросов при загрузке сайта

Пользователи Google Chrome могут обратить внимание, что это стандартные функции встроенные в Хром (доступные по нажатию F12), но выбор браузера - щепетильное и личное дело, поэтому кому-то удобнее пользоваться Firefox с плагином Firebug.

Успешная установка ознаменуется появившимся значком в виде жука.

Использование Firebug в верстке

Для того чтобы быстро посмотреть участок кода сайта (свойства CSS-стилей и пр.), нажмите правой кнопкой по элементу, затем нажмите «Анализировать элемент» («Inspect», F12, Ctrl+F12 - для открытия в новом окне). Плагин покажет вам и участок кода, и какие css-стили формируют его внешний вид, при этом сам html-код будет подсвечиваться синим.

После этого, мы можем отредактировать HTML «на лету». Для чего это нужно? Чтобы быстро посмотреть, как будет смотреться измененный код на сайте - для того чтобы не пересохранять по 10 раз исходные файлы на сервере, а сделать это лишь добившись необходимого результата при помощи плагина. И потом уже вносить изменения.

Также неоспоримым плюсом подобного «редактирования в браузере» является тот факт, что изменения происходят локально - их видите только вы. Особенно актуально это для высокопосещаемых вебсайтов, где мы не можем позволить себе внедрять HTMS+CSS код не проверив его на ошибки (искажение сайта).

Есть два варианта использования Firebug для поиска нужного куска кода. Первый - водить мышкой по сайту и тогда в окне плагина будет подсвечиваться соответствующий HTML код. Второй - водить мышкой по HTML коду в окне плагина и тогда будут подсвечиваться элементы на сайте, соответствующие коду, на который указывает мышь. Все это работает мгновенно и динамически, что позволяет быстро разобраться, сориентироваться в коде своего или чужого сайта.

Только не забудьте нажать кнопку для включения этой функции:

Затем, найдя нужный элемент, щелкните по нему левой кнопкой и перейдите к окну Firebug чтобы работать над кодом.

При этом элементы можно сворачивать и разворачивать - для компактного вида они сворачиваются по тегам: div, p, link и пр.

Как пользоваться Firebug для редактирования CSS

Очень просто. Если в левом окне у нас HTML код, то в правом - CSS-стили, которые можно на лету редактировать и наблюдать за изменениями в оформлении сайта.

Использование плагина firebug для работы с CSS предусматривает следующие сценарии:

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

Как использовать плагин Firebug чтобы измерить скорость загрузки вашего сайта

Скорость загрузки сайта (наличие ошибок при загрузке) - важный показатель не только при оптимизации сайта для поисковых систем, но и для удобства пользователей. Никто не хочет ждать пока медленный сайт загрузится, а о пользователях нужно заботиться.

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

Вот и все, теперь вы знаете как использовать и работать с плагином файрбаг, используя его как визуальный редактор сайта. Зачем? Задачи разные: поправить форму поиска или подписки, поиграться со шрифтами и размерами текста и заголовков, найти HTML-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.

Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция web-разработки». Не верьте этому! Firebug -это настоящая революция web-разработки. После знакомства с Firebug вы будете недоумевать, как обходились без него раньше.

До того, как я связался с web технологиями, моим любимым браузером была Opera. Быстрая, легкая, удобная. И все-то меня в ней устраивало, но чем дальше я погружался в изучение html и css, тем чаще встречал упоминания о бесплатном дополнении Firebug для FireFox. «Подумаешь, какое-то дополнение! Неужели ради него стоит менять браузер?!» — думал я тогда. Практика показала, что стоит. Попробовав один раз в действии Firebug, я уже не мог работать без него. Это действительно очень важный инструмент веб-мастера. Без него, как без рук. Скоро Вы в этом сами убедитесь.

Аналоги FireBug есть и в других браузерах, но они не идут ни в какое сравнение с оригиналом. Быть может я просто очень привык к оригинальному FireBug и все иное мне кажется чуждым и неудобным.

Как установить FireBug в FireFox

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

Устанавливается FireBug очень просто и быстро. Откройте браузер FireFox и зайдите на страницу, посвященную данному дополнению.

На момент написания этих строк дополнением FireBug уже пользуются более 3 миллионов человек. Давайте присоединимся к ним. Нажимаем на кнопку «Добавить в FireFox».

Появится окошко с предупреждением, в котором вам предложат установить FireBug в FirFox. Воспользуемся этим предложением. Возможно вам понадобится после этого перезапустить браузер, чтобы дополнение установилось и включилось.

Как пользоваться FireBug

Включить панель FireBug можно нажатием кнопки F12. По умолчанию она появляется в нижней части экрана. Положение панели можно изменить. Для этого зайдите в опции (иконка жука в левом углу панели) и выберете пункт Положение окна.

Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:

Слева представлен исходный код страницы;
Справа — стили css.

Если навести курсор мышки на какой-нибудь html тэг в левом поле, то он будет выделен цветом на странице. При этом:

голубой цвет показывает ширину элемента;
темно синий — поля (padding);
светло желтый — отступы (margin).

Картинка ниже кликабельна.

При выборе тэга, нажатием левой клавиши мыши, в правом окне отобразятся его css стили. В самом верху будут указаны стили именно этого html тега, ниже пойдут унаследованные стили. Если какой-то атрибут зачеркнут, значит он не работает (переопределен). Кроме этого, указывается файл css и номер строки в нем, где тот или иной стиль определен.

Для удобства поиска предусмотрена опция анализа структуры страницы курсором мыши. Включается она кнопкой в левом верхнем углу, рядом с иконкой жука, выглядит как прямоугольник и курсор мыши. Фактически, мы идем от противного — если раньше выбирали html тег и видели его на странице, то теперь выбираем его курсором мыши прямо на странице и видим его характеристики в окне FireBug. Пользоваться этой опцией придется постоянно, ибо она значительно упрощает и ускоряет поиск того или иного элемента.

А теперь самая главная фишка FireBug, за которую его так любят: вы можете менять структуру страницу и ее стили на лету! Практически никаких ограничений — можете взять тэг и переименовать его, изменить содержание заголовка или абзаца, отредактировать, отключить или добавить атрибут стиля, а можете просто удалить пол страницы. Результат будет тут же отображаться на экране! Только помните: все изменения происходят в самом FireBug , так что после перезагрузки страницы, она вернется к первоначальному состоянию. Таким образом навредить никак нельзя.

FireBug — это большая песочница для экспериментов. Когда вы нашли правильный вариант, просто перенесите его в ручную в файлы html и css.

Что еще есть интересного:

На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

Пример практического использования FireBug

Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину . В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.

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

Ко мне время от времени обращаются люди за помощью. Благодаря FireBug найти злосчастный элемент и его стили несложно.

Последний раз я интегрировал форум в тему Sento . Рассмотрим порядок действий.

1. По инструкции, описанной в той статье, создаем отдельный шаблон pageforum.php, в котором удаляем строчку кода, отвечающую за вывод сайдбара справа. Создав страницу с форумом, получаем следующий результат.

Как видите, сайдбар исчез, но осталось пустое место. Его то и следует убрать.

2. Включаем наш инструмент нажатием кнопки F12.

3. Первое, что следует сделать — узнать ширину вашего шаблона, конечно, если он не резиновый. Включаем функцию анализа страницы и мышкой ищем элементы, для которых задан параметр width (ширина) в правом столбце, отвечающем за стили css. Найти будет несложно, скорее всего ширина задана для шапки сайта, так что с нее и следует начать поиск.

4. Следующей нашей целью будет элемент, который отвечает за вывод содержания страницы. Главным критерием поиска является заданная в стилях ширина (width). Именно она не позволяет форуму расползтись. Не забывайте про возможность анализировать структуру страницы с помощью мыши. Данная функция значительно упростит поиск. Картинка кликабельна.

В данном случае я нашел тэг div с классом span-16. Заметьте, что стили прописаны не в стандартном файле style.css, который находится в корневом каталоге темы, а в файле screen.css, расположенном в папке css. Так что будьте внимательнее, чтобы не пришлось искать стили там, где их нет.

5. Открыть файл screen.css, найти класс span-16 и поменять параметр width легко, но это будет ошибкой. Другие страницы WP тоже используют div с классом span-16, так что они после таких изменений просто расползутся. Следует открыть шаблон pageforum.php и переименовать класс span-16. Дайте ему новое, нигде не задействованное имя. Для этого нового класса пропишите параметр width в файле со стилями. Таким образом, изменения будут внесены только в страницу для форума.

Вот так быстро и просто FireBug позволяет находить нужные html тэги и их стили.

Напоследок хочу сказать, что FireBug становится абсолютно бесполезным в том случае, если вы не знаете хотя бы основ html и css. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.

На этом на сегодня все. Спасибо а внимание и до новых встреч.

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

Установка Firebug для Firefox

Установить его можно с сайта разработчика http://firebug.ru/ . Все делается просто. Справа мы видим кнопку «Установить Firebug».

Жмем ее и нас отправляют на страницу addons.mozilla.org.

Так же его можно увидеть, если перейти в меню «Инструменты – Дополнения – Расширения» в Firefox.

Firebug - не просто дополнение к браузеру расширяющее его возможности, а как вы прочитали на сайте разработчика Firebug – это эволюция web-разработки . И это действительно так.

Как использовать Firebug для Firefox

Что бы запустить плагин Firebug достаточно щелкнуть правой кнопкой мыши на интересующем нас фрагменте сайта и в выпадающем меню нажать на «инспектировать элемент с помощью Firebug»

После этого внизу страницы откроется окно плагина Firebug с кодом Html отвечающим именно за этот участок сайта. Сам же участок сайта подсвечивается синим как на фото внизу. Шикарно правда?. Но это еще не все его возможности.

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

Итак, вы определили, какой участок кода вам нужен и требуется его изменить не только визуально но и физически. Но как это сделать? Для начала, необходимо определить в каком файле PHP Joomla 2.5 его искать. Тут нам Firebug не помощник, но он нам подскажет за что можно зацепиться при поиске.

Рекомендую использовать ID или CSS класс в контейнерах. Контейнер это то, что заключено в теги DIV. Как производить поиск, рассказано в разделе Поиск по файлам в Тотал Командере . Не все сразу будет получаться. Однако «единой таблетки» тут нет. Как правило, вам придется править код в шаблоне Джумлы. У разных разработчиков шаблонов свои правила по наименованию CSS классов и ID.

Использование Firebug для правки CSS

Как уже обратили внимание в правом окне плагина описаны стили CSS отвечающие за оформление Html блока изучаемого блока. Как уже говорил выше с ними можно также экспериментировать без ущерба для сайта, так как все изменения исчезнут после того как вы закроете Firebug. При наведении курсора на правило CSS появится серый перечеркнутый кружок. Щелкнув мышкой вы отключаете это правило и при этом изменения будут сразу видны на сайте.

Можете вводить свои значения и отслеживать как это выглядит. Это очень важно при редактировании шаблона Joomla 2.5 так как уверен, что не все в этом шаблоне будет устраивать вас.

И так, подобрали нужное значение и визуально все устраивает, но где теперь искать нужный нам файл или файлы CSS.

Тут все намного проще. Тут указано название файла CSS и строка, где это правило находится.

Если вы не помните где находится в шаблоне этот файл или их может быть несколько, то путь к нему можно узнать щелкнув провой кнопкой мыши на названии файла и открыть его в новой вкладке браузера и там посмотреть путь к нему.

Измерение скорости загрузки сайта с помощью Firebug

Скорость загрузки сайта очень важный фактор. Можно проверить этот показатель и на сторонних сервисах в интернете но можно проверить и с помощью плагина Firebug для Firefox .