sunnybear 20 авг 2007 в 21:43

Практический CSS/JS: уменьшаем время загрузки страницы

1 мин

Клиентская оптимизация *

Перевод

+21

Комментарии 49

foxweb 20 авг 2007 в 22:22

Решение второе рулит, только ради чего тогда была вся остальная заметка? :) В некоторых своих проектах применял по три стиля для каждого типа медиа. И как то даже в мыслях не было оптимизировать, и без того небольшие были. КОгда файлов больше 3-5 это да.

Ну - кому как.

akral 21 авг 2007 в 06:31

А тем, у кого JS выключен - куковать? :)

@at-rule... rules. ;)

Iskin 21 авг 2007 в 06:38

ИМХО, вообще это проблема браузеров :) Пусть они её сами решают, а решение на стороне сайта — это лишние костыли, которые только принесут новые проблемы.

NetRat 21 авг 2007 в 08:33

Не согласен! Все проблемы — это проблемы разработчиков сайта. Пользователю (клиенту) интернет-системы важно, что бы все работало при любых условиях. Первый метод — это полный бред. Внимательно читайте спецификации W3C!!! Как надо делать? — Обратите внимание на новую верстку яндекса!

akral 21 авг 2007 в 11:16

Да ну?
Пойду-ка напишу свой ~~дебильный брау~~ Internet Explorer, который будет рандомно выбирать положение блоков на странице, зайду на ваш сайт и скажу — у вас проблемы!

Iskin 21 авг 2007 в 16:16

Я понимаю, что разработчик не должен сваливать все проблемы на клиента — клиенту нужна только услуга — ему всё равно на то, что браузеры не поддерживают стандарты.
Но решение на стороне сайта не будет эффективным в любом случае (либо всё равно загрузка будет тормозить или стили не грузиться без JS), так что единственное эффективное решение — это решение на уровне браузеров. Кроме того, проблема не настолько острая, чтобы срочно вводить «костыли» на уровне сайтов — 1—3 секунды загрузки вполне могут подождать пока разработчики браузеров учтут этот ньюанс (хотя бы сделать загрузку параллельной — ИМХО, для Mozilla текущая ситуация позор :) ).

Partizan 21 авг 2007 в 17:55

> Обратите внимание на новую верстку яндекса!
Обратил, не лучший пример для подражания. Они принципиально не пользуются тегами <html>?
Может быть быстро сформулируете правильное решение?

NetRat 21 авг 2007 в 18:49

У вас все корректно отображается? Лично у меня — да. А что еще надо? Главное, что бы клиент был доволен.

Partizan 21 авг 2007 в 20:00

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

NetRat 21 авг 2007 в 20:12

В принципе, я с вами согласен, но не следут забывать, ради каких целей производиться тот или иной продукт. Конечная цель того же яндекса — заработать денег, а не показать какие они крутые разработчики. Если пипл хавает, зачем тратить больше времени и денег на производство. Вы пробовали чай в Финляндии? Там он вкуснее чем у нас. Связано это с потребностями рынка. Так же и с IT. Будет надо — переделают.

DjOnline 25 сен 2008 в 06:23

NetRat, хоть это и офтоп, но расскажи пожайлуста о Финляндском чае, как называется, и где его можно купить в Москве. Можно в личку.

nofrom 21 авг 2007 в 10:58

а у кого куки выключены и куковать несмогут

Iskin 21 авг 2007 в 06:37

Решение второе, мне кажется не очень удачным, так как:

Трудно контролировать стили, когда они все в одном файле.

Конечно не будет тратиться время на запрос print.css, но всё равно придётся ждать, пока его содержимое передаться по Сети.

Partizan 21 авг 2007 в 07:08

> Трудно контролировать стили, когда они все в одном файле
Если оно того стоит (большая нагрузка, много файлов) можно написать служебный скрипт для сборки всех файлов в один и запускать перед/в процессе выкатки.
+ gzip/deflate и кеширование на стороне браузера

Iskin 21 авг 2007 в 08:02

Но второй минус это всё равно не исправляет ;). Всё равно придётся ждать пока не загрузятся стили для печати. А самое обидно, что при JS сжатии (если я правильно понял), когда у пользователя отключён JavaScript, то он даже дизайн для монитора не увидит :).

akral 21 авг 2007 в 08:14

Сжатие CSS.
Пример с моего сайта. Он собирает все файлы (а их около 6), складывает, сжимает и кэшует.

Правда вот, gzip никак не прикручю. Руки не доходят. :)

Partizan 21 авг 2007 в 18:11

Собственный сервер?
Можно nginx поставить, настроить на отдачу статики. Хорошо разгружает apache, легко настраивается автосжатие. Если статика не часто меняется, можно настроить на отдачу соответствующих заголовков для кеширования браузером.

Partizan 21 авг 2007 в 18:26

> А самое обидно, что при JS сжатии (если я правильно понял)
Неправильно. Сжатие на стороне сервера, только для тех браузеров, которые понимают, автоматически и без извращений.

sphere 21 авг 2007 в 07:19

Юзайте @import url('css/web.css'); для отложенной загрузки стилей (если заказчик позволит так издеваться над дизайном) и php для выбора файла стилей к определенному контексту.

Razbezhkin 21 авг 2007 в 07:26

а в ASP.NET нужно думать над оптимизацией всего генерируемого html, оптимизация css - капля в море мусора самого html кода :(

chx 21 авг 2007 в 11:09

то есть? А почему не вынести весь html в отдельный шаблон и не сверстать нормально?

Razbezhkin 21 авг 2007 в 11:42

потому что asp.net генерирует избыточный html код. особенно, если использовать стандартные компоненты, темы (Themes) и кожы(Skins).
помотрите ради интереса html сайта www.ufamama.ru

chx 21 авг 2007 в 11:52

мда.. это действительно кошмар. Но неужели нельзя html писать самостоятельно, не полагаясь на стандартные компоненты?

Razbezhkin 21 авг 2007 в 12:09

Можно, но тогда пропадает все удобство от стандартных компонентов.

chx 21 авг 2007 в 12:14

удобство сомнительное, а вот неудобство очевидное.

Razbezhkin 22 авг 2007 в 02:27

Не соглашусь. после 4 лет работы с php перешел на asp.net, работаю с ним уже 4 года и мне нравится.

chx 22 авг 2007 в 07:29

я сейчас не сравниваю php и asp.net, а говорю про стандартные компоненты, генерящие кривой код.

Razbezhkin 22 авг 2007 в 07:45

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

Wellick 30 авг 2007 в 17:12

Есть несколько движков под .NET, которые работают по аналогии с RoR и т.п. (более-менее чистый MVC).
Но они, увы, не поддерживаются никем, кроме создателей :)
Ходят слухи, что MS скоро сам выпустит такой фреймворк.

Setti 21 авг 2007 в 07:46

В наше-то время тотальных расширений домашних интернет-каналов мы все еще копаемся в проблемах диалапного прошлого? Конечно, оптимизацию, минимализм никто не отменял, но проблема, имхо, того не стоит.
По поводу кроссброузерности - библиотеки рулят.

sunnybear 21 авг 2007 в 08:01

Знаете, я с вами не соглашусь. Сейчас время на установление соединения с сервером сравнимо с временем загрузки отдельного маленького файла. Если файлов 2-3, и они достаточно большие, то об этом можно забыть. Но когда файлов много, они все маленькие, да еще и таблиц стилей десяток напихан, это, знаете, для пользователя, зашедшего на сайт впервые, очень сильно скажется.

В частности, это стоит принимать во внимание при проектирование корпоративных сайтов: когда процент возвращающихся пользователей минимален.

Iskin 21 авг 2007 в 08:05

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

sunnybear 21 авг 2007 в 08:11

это вы отделу продаж объясните, что так сайт лучше грузится :)

отказ от PRных Flash-презентаций

Iskin 21 авг 2007 в 16:18

:) Ну работа разработчика — это лесть и обман :) Конечно согласен, что часто ситуация ужасна, но тем не менее надо стараться :) и бутылочка вина отделу маркетинга будет лучшим техническим решением скорости загрузки :)

Setti 21 авг 2007 в 08:18

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

chx 21 авг 2007 в 11:13

предлагаю зайти на среднестатистический американский интернет-магазин и потосковать некоторое время, гдядя на статусную строку браузера с сообщением "загружено изображений: 245 из 340". Это, конечно, крайность, но попустительство к таким крайностям и ведёт.

Setti 21 авг 2007 в 12:56

Я к тому, что обсуждение похоже на аналог типа что лучше "echo" или "print"

chx 21 авг 2007 в 13:08

да я понимаю. Но нет мелочей. Нет, и всё тут. Допустив одну мелочь, позволишь себе допустить ещё одну. А там, глядишь, докатится и до маразма с весом страницы в несколько мегабайт. А что, каналы-то нынче толстые!

AirWorker 21 авг 2007 в 08:13

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

В общем думаю не стоит так заморачиваться. Тем более делать работу производителей браузеров.

akral 21 авг 2007 в 08:16

Правильно. Но вот, отдавая клиенту, я бы их собирал, сжимал и отдавал в один поток.

AirWorker 21 авг 2007 в 10:00

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

akral 21 авг 2007 в 10:25

В таком случае надо эти специальные стили хранить отдельно и подгружать отдельно.

Уменьшения запросов на сервер с хотя бы пяти до одного — большой плюс.

maratikus 21 авг 2007 в 09:01

Уменьшаем загрузку страницы? Звучит так, как будто с нее мешки с песком сбрасывают. Уменьшаем время загрузки страницы.

sunnybear 21 авг 2007 в 09:36

спасибо :)

gen 21 авг 2007 в 12:05

Есть замечательнейшая либа, сливающая и заодно сжимающая группу css или js файлов в один.
http://code.google.com/p/minify/

caIIIa 22 авг 2007 в 08:10

О чём заметка?
Такой огород нагородили :)

sunnybear 22 авг 2007 в 08:23

да, собственно, просто заявлена спорная тема. Сейчас комментарии гораздо интереснее самой статьи, хотя так и предполагалось :)

caIIIa 22 авг 2007 в 08:29

Надо развить тему, запихать этот скрипт в swf-ку 1x1 пиксель, воткнуть её по правильному через [object...] и пусть кто ни будь тогда скажет что у меня JS-a на странице дофига :D

KTIF 11 фев 2008 в 22:10

Полезная статья.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий