Название Хабрахабр
Адрес (URL) habrahabr.ru
Фактический адрес habrahabr.ru
Дата проверки 2 Февраля 2008
Оценка 42 / 100
Интегральная оценка 33 / 100
Общая статистика
Число файлов 135
Суммарный размер файлов 377729
Время загрузки (модем, 33,6kbps) 152.37 с
Время загрузки (скоростной канал, 100 KB/s) 27.58 с
Возможное ускорение 621% (967%)
Число файлов 5
Суммарный размер файлов 4711
Время загрузки (модем, 33,6kbps) 1.62 с
Время загрузки (скоростной канал, 100 KB/s) 0.07 с
Возможное ускорение 75% (123%)
Тот сайт, который Лебедев оптимизировал МАКСИМАЛЬНО, оказывается тоже может быть улучшен - 36%
Название
Яндекс
Адрес (URL)
www.yandex.ru
Фактический адрес
yandex.ru
Дата проверки
2 Февраля 2008
Оценка
77 / 100
Интегральная оценка
59 / 100
Общая статистика
Число файлов
24
Суммарный размер файлов
51503
Время загрузки (модем, 33,6kbps)
18.62 с
Время загрузки (скоростной канал, 100 KB/s)
1.61 с
Возможное ускорение
243% (736%)
по порядку: оценивается не качество сайта, а его оптимизация. То же "качество", например, на cys.ru как-то считают.
По поводу Last-Modified и ETag по истечению кеша при наличии последнего есть возможность не отдавать ресурс, а выдать 304 с новым кеширующим заголовком, т.е. общее кеширование повышается. Однако, у yahoo нет однозначного отношения к ETag, его советуют ставить скорее для небольших проектов.
По поводу Content-Encoding gzip он читается, только не анализируется. Анализируется общее сжатие CSS/JS файлов (в том числе, с помощью gzip). Насчет идеи отдельно обсчитывать gzip/deflate заголовки спасибо, подумаю.
НЛО прилетело и опубликовало эту надпись здесьНЛО прилетело и опубликовало эту надпись здесь
чем же она полезная эта штука?
лучше уж настроить mod_expires чем «серваки патчить или вырабатывать Etag в приложении».
Etag всё равно заставит браузер сделать запрос на сервер, а грамотный кеш — нет.
простите, я не вижу смысла в дополнительном запросе к серверу, чтобы узнать версию файла. это создаёт нам «узкое место» в загрузке страницы.
всё, что нужно браузеру — взять файл с сервера (новый) или загрузить из кеша.
Вопрос поставлен не совсем корректно. Удаление всех пробелов и переводов строк сократило файл примерно на 10%, но сам HTML отдается gzip'ованным (что уже уменьшает его на 80%, итого остается эффективным лишь 2% ускорение от первоначального, несжатого и неархивированного, размера файла).
Весь HTML при этом только 10% от общего размера загружаемых файлов. Итого получаем, что убрав лишние символы из HTML мы получили ускорение в 0,2% для загрузки сайта (при этом 8% ускорения мы получили, просто включив выдачу HTML в виде gzip).
Спасибо, очень хороший проект, в закладки однозначно!
Пара замечаний:
1. "Загружается более 1 CSS-файла. Рекомендуется объединить все файлы в один внешний..." - у меня сделано 2 css для media="Screen" и media="handheld", т.е. если объединять их в один, получится не оптимизация вовсе, а наоборот ;)
2. Я, конечно, понимаю, что сам себе злобный Буратино, но программа не умеет различать комментарии в css файлах. Из-за этого закомментированный и забытый мною в css background-url выдал 404 ошибку.
А так, еще раз спасибо, удачи в дальнейшем развитии проекта!
1. Сайт не отобразится в большинстве браузеров, пока не загрузятся все CSS, поэтому их и рекомендуется объединить (через ту же @media{}, например). Даже ссылка на статью приведена http://webo.sunnybear.ru/articles/habrah…
2. Спасибо. Там много чего не учитывается, на самом деле :) Отмечу в ToDo
Сайт понравился, вчера целый вечер читал очень нужную информацию.
Вот только на темном фоне невозможно читать, пришлось firebug-ом менять ваш фон на светлый, а шрифты на черные :о)
а чем конкретно именно анализатор от yslow плагина отличается? Я не нашел различий, кроме языка. Но сам ресурс интересный. Зная по себе - эта вся оптимизация уже делается на готом сайте. Надо бы что-то такое, что бы давала советы в процессе разработки...
конкретно от yslow, фактически, ничем, кроме русификации и подробности советов. Акцент не на новизне делается, а на информационном освещении ряда проблем. К тому же для yslow обязательно firefox/firebug ставить.
понятно. Просто я думал, может чего пропустил. Просто если мне надо будет по бырому по смотреть, я скорее всего yslow воспользуюсь, а если совета грамотного получить - к вам пойду. Присоединяюсь к выше сказанному - правильное дело.
Название
Блог Сильвера.
Адрес (URL)
silverblog.ru
Фактический адрес
silverblog.ru
Дата проверки
4 Февраля 2008
Оценка
83 / 100
Интегральная оценка
71 / 100
Общая статистика
Число файлов
6
Суммарный размер файлов
32492
Время загрузки (модем, 33,6kbps)
12.25 с
Время загрузки (скоростной канал, 100 KB/s)
1.52 с
Возможное ускорение
171% (171%)
Относительно пункта: "Размер фоновых картинок очень большой. Возможно, его можно уменьшить, если подключать только необходимые на данной странице файлы или использовать другой формат для изображений."
Не согласен.
Мы грузим одну большую картинку и показываем её части в разных местах страницы (с помощью css). Тоесть нам надо вместо например 6 маленьких картинок загрузить одну, это уменьшает количество соединений браузера с сервером. Как и другие файлы (js, css) картинки следует тоже объединять, если они всё равно все будут сразу использованы.
во-первых, это только рекомендация, а не категоричный совет. Во-вторых, иногда CSS-спрайты можно уменьшить в размере (перегруппировав картинки или применив другой формат для изображения).
За указание названия этой техники, спасибо. Не знал, что это "CSS Sprite" называется. Набрёл на интересный сервисе по этому поводу CSS Sprite Generator: http://website-performance.org/ . Там можно это дело оптимизировать.
очень плохо, что результате кешируются, как следствие - нельзя сразу поправить и оттестировать сайт. хоть бы отдельную кнопочку "проверить заново" сделать :)
проще имхо положить на счет разработчиков вебманями 20 смс сразу и пользоваться скажем пару дней сколько угодно.
просто смс за одну проверку - это в данном случае мне лично неинтересно, да и я предпочитаю все деньги отдавать разработчикам, нежели довольно большую часть - посредникам :)
немного критики по существу:
- не уверен, что проверяется css в страницах (и не уверен, что это всегда плохо, но про это стоит написать)
- далее, мои js & css файлы сминимизированы (не сжаты gzip-ом), но на сайте говорится, что это можно сделать еще раз :)
пожеланий:
- анализировать сколько стилей из css применяется на конкретной странице
- разделить сообщения на warning & must review или на ваш выбор :) больше 2х думаю, не нужно, просто какие-то места действительно спорные
- ну и да, рекламный js-код отделять, и возможно говорить "2js, но один рекламный, так что варнинг" :)
а вообще спасибо, занесу в закладки, только "проверку заново" сделайте обязательно :)))
спасибо. Лист toDo пополнился. Вообще, практически, все рекомендации характера warning.
CSS в страницах только между <style> просматривается. Думаю сделать анализ веса атрибутов style= относительно веса HTML, при определенных соотношениях выдавать warning
применение стилей на конкретной странице это тяжело отследить, ибо DOM-дерево нужно разбирать, которое еще и невалидное может быть... Если есть более детальные соображения поделитесь, плиз
Что такое "рекламный JS"? Google AdSense/Яндекс.Директ/Бегун ?
про разбор DOM - я бы подумал в сторону простого (или регуляркой) поиска типа id="что-то", class="что-то" и потестить на паре сайтов. возможно, что это поможет хотя бы примерно построить соотношение. но уверенности в результате этого метода конечно нет :(
ммм, боюсь, что мучиться придется долго, а толку будет мало, ибо ведь нужно отслеживать конструкции типа .class1 element.class2 без дерева нереально. И это еще просто случай...
брать просто вхождения в текст без разбора порядка? :)
да я вобщем понимаю, что толку от этого не будет сильно много, поэтому спорить нам с вами тут банально не о чем :) нет так нет :) и так неплохо получается!
ну и может на будущее - тестирование в плане каналов. те пробовать качать не только с одного сервера а с нескольких. у меня есть пример хостинга, который из россии не очень хорошо виден, поэтому данные о скорости скачки не то, что неверные, но... YSlow кстати пишет про CDN, но как при этом получаются абсолютные цифры - черт его знает :)
или для начала писать где-нибудь - где стоит сервер :) я имею ввиду не хостера конечно, а именно канал
Список Top20 как-то неадекватно выглядит с сайтами с одной картинкой (вроде, выше говорили). И еще в этом списке лучше не ссылки на сайты давать, а на их анализ, чтобы можно было посмотреть чем же они отличились.
Присоединяюсь.
Призыв забить на html, body... очень портит впечатление, даром что ниже довольно много дельных, хотя и тривиальных советов.
А уж отказ от кавычек в атрибутах и, тем более, от пробелов между ними - это уже полный детский сад. Верстать надо грамотно, а не пробелы считать.
Ну вот, например, google, с вами не согласен )
html и body они оставили а вот кавычки и пробелы только там, где это необходимо. Просто польза такого подхода чувствуется только на ОЧЕНЬ посещаемых сайтах.
Во-первых, Гугль - авторитет, но далеко не в верстке. Во-вторых, с пробелами у них все в порядке, иначе на код смотреть вообще не возможно было бы. А кавычки, по-моему, они случайным образом то ставят то не ставят.
Гораздо нагляднее имена их классов и т.п. А уж совершенно не необходимое "border=0 cellpadding=0 cellspacing=0", которое они, тем не менее, не опускают, покрывает любые сэкономленные на странице пробелы.
И потом. Дело не в Гугле. Просто код без кавычек и пробелов - нечеловеческий. А если человеку с ним работать не придется, тогда уж лучше загнать его в оду строку. Символы конца строки тоже весят огого.
Во-первых, на кавычках экономит не только google, а еще и ya.ru, например.
Во-вторых, давайтие разделять исходники и конечный продукт. Ведь против gzip и минимизированных js вы не возражаете? Так почему бы не минимизировать и html перед выходом в продакшн? Естественно, это имеет смысл только, если у вас очень маленький размер страницы. Вот гугл и яндекс на этом имеют неплохую экономию в процентах.
Результаты проверки
Тематические медиа
Название
Тематические медиа
Адрес (URL)
thematic-media.ru
Фактический адрес
thematic-media.ru
Дата проверки
5 Февраля 2008
Оценка
90 / 100
Интегральная оценка
71 / 100
Общая статистика
Число файлов
2
Суммарный размер файлов
5177
Время загрузки (модем, 33,6kbps)
2 с
Время загрузки (скоростной канал, 100 KB/s)
0.29 с
Возможное ускорение
6% (74%)
Результаты проверки
KAjournal.com
Название
KAjournal.com
Адрес (URL)
kajournal.com
Фактический адрес
kajournal.com
Дата проверки
5 Февраля 2008
Оценка
52 / 100
Интегральная оценка
52 / 100
Общая статистика
Число файлов
50
Суммарный размер файлов
1025918
Время загрузки (модем, 33,6kbps)
358.95 с
Время загрузки (скоростной канал, 100 KB/s)
20.02 с
Возможное ускорение
29% (29%)
ну дела...что-то много у меня по времени. в жизни быстрее. будем думать :-)
Эх, хотел было разослать ссылку нашим верстальщикам, но
....
Эта страница сейчас недоступна. Возможно, это вызвано техническими проблемами на веб-узле, или требуется изменение параметров обозревателя.
....
Сунул сайт у которого css\js через http://kashey.habrahabr.ru/blog/35058.ht… прогнаны.
Сайт честно пообешал что сожмет все еще в пару раз :)
Хотя пару моих проколов он мне показал
А так.. дизайн сайта - лично мне очень нравиться, про остальное промолчу
А что относительно конфиденциальности информации? Если я, например, захочу протестировать проект, но не светить его нигде до офф релиза. Или он вообще пока лежит на тестовом хостинге. Я думаю галочка "Не сохранять информацию на сайте WebOptimizator" будет довольно полезна.
При сегодняшних скоростях доступа в интернет, все странички грузятся быстро. Это бессмысленная статья. Автор потерял свое время. Надо думать сегодняшним днем
А теперь поднимаемся вверх и читаем самое начало ;)
... О пользователе никто при этом не думает, в лучшем случае, прикрываясь такими выражениями, как: «у меня отсюда и так все быстро грузится» или «каналы сейчас не те, что 10 лет назад».
И если уж думать сегодняшним днем, как ты предлагаешь, то стоит подумать о пользователях мобильных устройств с совсем уж не гигабитными каналами.
Ну извините если сайт жутко перегружен контентом, это ошибка менеджера проекта, если код перегружен – верстальщик виноват. Вариант для мобильных устройств - делать специальный CSS и желательно делать ссылку на него в начале … странице, а не как на Янедксе в конце сайта (один из немногих недосмотров яндекса
не всеми браузерами. Не обладаю полной статистикой по проблеме, но она встречается (браузер может пытаться загрузить все картинки, не отслеживая их повторение).
Спасибо за замечание. Буду думать над подборкой аналитических материалов на тему.
В любом случае, это минус оптимизации: когда мы запрашиваем один и тот же ресурс несколько раз.
Это какие же интересно браузеры? Ни IE, ни FF ни опера этого явно не делают. А между тем у вас в отчете дублирующиеся картики считаются по много раз - в результате суммарный объем закачанных картинок по отчету может в разы отличатся от реально закаченного объема.
Классный и оч нужный сайт.
Графики технично и оч красиво смотрится, - пожалуй один плюс от темного фона.
Есть замечание, или просто пунктик.
Я протестил свой сайт. Ясн дел офигал, как и все, но эт лан.
У меня на компе новый готовый сайт, скор куплюс хост и закачаю, а пока решил сделать директорию его на сайте который проверил ранее.
Энтер. И что же? Нифига. Анализирует снова сам сайт, сам index.
Нельзя ли анализатора преучать анализировать если так ya.ru/ то так ya.ru/index.htm а если так ya.ru/o_o/ то не так снова ya.ru/index.htm , а так ya.ru/o_o/index.htm
да, этот вопрос уже поднимался. Пока стоит ограничение на 1 URL с одного хоста. Может быть, в будущем появится возможность проверять несколько страниц с одного сайта. Пока не хочется лишний раз проверять анализатор "на прочность" :)
И ещё!
Я возможно понял почему у меня не получалось сделать задуманное.. Три дня в кэше! Если бы был бы час, я бы тож не понял, но целых три дня! В чем же здесь интерактивность.., онлайн? Проверил и что? Вот я оптимизировал css и теперь хочу проверить улучшил ли я свои результаты. Но не могу этого сделать! Это как? Явная недоработка, на мой взгляд.
Кстати... Почему не грузится webo.sunnybear.ru и sunnybear.ru?
Почему вы рекомендуете использовать дивы, а на sunnybear.ru все сверстано таблицами?
А так симпатично, спасибо.
Обратите внимание на вот этот линк. Сюда можно попасть с главной, сайт первый в топ20. При переходе выдает ошибку "[an error occurred while processing this directive]".
2) meyerweb.com
Оценка 70 / 100
Интегральная оценка 47 / 100
Возможное ускорение 66% (81%)
3) Ребята держитесь !!!!
Название World Wide Web Consortium
Адрес (URL) w3c.org
Возможное ускорение 1045% (1927%)
(тут я чуть со стула не упал от смеху!!!)
И последний тут уже бред полный….
Название NBA.com: Official Home Page of National Basketball Association
Адрес (URL www.nba.com
Сайт очень тяжелый …
Время загрузки (модем, 33,6kbps) 295.69 с
Время загрузки (скоростной канал, 100 KB/s) 40.35 с !!!!
Возможное ускорение 341% (362%)
У меня реально грузится за 3-5 сек максимум!!! скорость у меня 2мегабита
Жду коментарииев…
1) «Загружается более 1 CSS-файла. Рекомендуется объединить все файлы в один внешний или даже включить его в итоговый HTML. Это позволит сократить количество запросов к серверу.»
Включить его в итоговый HTML???!!! Почему этого не надо делать написано здесь http://developer.mozilla.org/en/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents
2)Загружается более 1 фоновой картинки. Возможно, их можно объединить, используя технику CSS sprites (и следующий инструмент). Это позволит сократить количество запросов к серверу.
При использование CSS sprites, когда увеличиваете размера шрифта верстка просто распадается.
Афтор темы, у меня не критика у меня вопрос! ))
С удовольствием читаю статьи.
Одного не нашел, хотя не сомневаюсь где-то на сайте есть.
Проги, а точнее сайты, которые оптимизируют JS нашел, CSS - нашел. Не нашел обыкновенный HTML.
Ну хотя бы как у Вас же все странички, мне бы поудолять пробелы и в одну строчку все получить.. не самому же делать.
Не подскажете такой сайт или прогу ну или сцылку на Вашем сайте?
хороший вопрос. Боюсь, что не подскажу, сходу ничего не нашлось, а над грамотным решением надо думать: ведь не все пробелы и переводы строк можно безболезненно удалить. Для русского текста хорошо бы еще символы из html entities в их представление переводить... В общем, если кто подскажет решение, сам буду благодарен.
да, конечно первые програмки-оптимизаторы что-то жуткое и невообразимое делали с русскими буквами, да и пробелы как-то недоконца удаляли. Я немного покапался и впринципе нашел для меня лично подходящее, оно здесь, первое по списку. бесплатное, ничтожное по размеру и хоть какой-то функционал. А так вприципе далее там дофигища оптимизаторов.
И ещё наткнулся на плагин оптимизатора для фронт пэйдж от самого майкрософта вот здесь.
все пробелы и переводы строк можно безболезненно удалить.это делается на стороне сервера и клиенту посылается код без пробелов и переводов. html entities вобще нет смысла использовать(кроме двух < ; & ;), для этого есть UTF-8 и таблица символов
я понимаю, конечно, что можно использовать кеш и все такое. Но я принципиально против задействования серверных ресурсов, когда этого можно избежать :) Лучше уж пусть все это статикой лежит
вы никак не прокоментировали результаты которые выдает http://webo.in/ , на проверку w3c ....
Название World Wide Web Consortium Адрес (URL) w3c.org Фактический адрес w3c.org/Home.html Дата проверки 5 Февраля 2008 Оценка 77 / 100 Интегральная оценка 49 / 100
Возможное ускорение 297% (457%). Извините , не смешно ли ?
мне не смешно. Если Вы не считаете нужным изучить материалы по теме и понять, откуда эти цифры берутся, то дальнейшую дискуссию считаю неуместной.
http://webo.in/check/?url=w3c.org
сейчас ряд неточностей исправлен, и цифра более адекватная. Подозреваю, что цифра испытает еще несколько небольших колебаний, прежде чем дойдет до совсем реальной.
Разгони свой сайт: gamma-версия