X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Оптимизация CSS: Ускоряем загрузку сайта
Gerga_rs
Gerga_rs
Topic Starter сообщение 12.6.2013, 0:21; Ответить: Gerga_rs
Сообщение #1


Чистку и оптимизацию кода css всегда нужно проводить. И на это есть свои причины:
[list]
[*:27ft7xqo] Экономит трафик[/*:m:27ft7xqo]
[*:27ft7xqo] Ускоряет загрузку сайта - а это способствует улучшению позиции сайта в поисковых выдачах[/*:m:27ft7xqo][/list:u:27ft7xqo]
Ускоряется загрузка сайта за счет легкости каскадных стилей.

Как оптимизировать CSS и тем самым ускорить загрузку сайта
Оптимизировать CSS можно различными способами, как вручную, так и с использованием онлайн сервисов.
Ручная оптимизация:
[list]
[*:27ft7xqo] Удалить закомментированные строки[/*:m:27ft7xqo]
[*:27ft7xqo] По меньше использовать комментарии файле со стилями[/*:m:27ft7xqo]
[*:27ft7xqo] Сократить количество букв в комментраиях. Например, вместо
[spoiler=""]
/*Начало стилей блока header (шапки сайта)*/
-----
/*Конец стилей блока header (шапки сайта)*/
[/spoiler]
Использовать следующие комментарии:
[spoiler=""]
/* Header*/
-----
/* /Header*/
[/spoiler][/*:m:27ft7xqo]
[*:27ft7xqo] Уменьшить количество пустых строк.[/*:m:27ft7xqo]
[*:27ft7xqo] Объединить селектры с одинаковыми стилями[/*:m:27ft7xqo]
[*:27ft7xqo] Использовать короткие записи цветов, если это возможно. Например, вместо #CCCCC нужно использовать #CCC, или допустим, вместо #112233 использовать #123, - это одинаковые цвета, но код более легче.[/*:m:27ft7xqo]
[*:27ft7xqo] Не давать большие имена селектрам id и class[/*:m:27ft7xqo]
[*:27ft7xqo] Оптимизировать padding и margin. Вот эту запись
margin: 10px 20px 10px 20px;
padding: 40px 20px 40px 20px;

Нужно изменить на более легкую:
margin: 10px 20px;
padding: 40px 20px;
[/*:m:27ft7xqo][/list:u:27ft7xqo]
Онлайн сервисы для оптимизации CSS
Конечно ручная оптимизация наиболее надежная, но не каждый вебмастер знает что делать в каскадных стилях и, соответственно, так может наоптимизоровать, что не только браузер но и чёрт поломает ногу. В таких случаях лучше использовать онлайн сервисы для оптимизации css.
На сью пору работают достаточно много инструментов, например:
[list]
[*:27ft7xqo] CleanCSS[/*:m:27ft7xqo]
[*:27ft7xqo] Online CSS Optimizer[/*:m:27ft7xqo]
[*:27ft7xqo] CY-PR.com[/*:m:27ft7xqo][/list:u:27ft7xqo]
Везде все предельно просто и особо заморачиваться, с описанием, ненужно. Допустим выбрали CY-PR.com, в текстовом поле вставляем стили, с правой стороны можно настроить оптимизатор, но лучше оставить стандартные настройки, и нажимаем "Оптимизировать CSS". Результат оптимизации выводится внизу текстовый формы. Также сервис указывает коэффициент сжатия и количество сэкономленных байт.
Исходный код: 9.175 Кб, Оптимизированный код: 6.252 Кб, Коэффициент: 31.9% (-2923 байт)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Siege_mw
Siege_mw
сообщение 12.6.2013, 1:08; Ответить: Siege_mw
Сообщение #2


не думаю что столь важна оптимизация цсс
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga_rs
Gerga_rs
Topic Starter сообщение 12.6.2013, 12:09; Ответить: Gerga_rs
Сообщение #3


Siege, внутренняя оптимизация не заканчивается на одном составлении семантического ядра и качественной перелиновки.Оптимизация html, css, кода языка программирования, правильная настройка .htaccess и установка Last-Modified - это все группа мероприятий в которых нуждается каждый сайт претендующий на что-то серьёзное. Одна оптимизация СSS - это капля в океане, а вот вся группа - уже существенное улучшение. ПС обращают внимание на код и скорость загрузки сайта.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
сообщение 13.6.2013, 11:13; Ответить: airman
Сообщение #4


к сайту нужно подходит комплексно, тогда будет толк.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 3.5.2014, 20:38; Ответить: k0ttee
Сообщение #5


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

Я сразу CSS шлепаю без пробелов и комментариев. В конце класса не ставлю точку с запятой. Класс в одну строку, ибо \n это лишний символ. А еще, пишу без кавычек когда ставлю фоновую картинку. Выглядит примерно так:
.class{margin:10px;padding:40px;background:url(img.png)}

Дизайню тэг <html>. А что? Экономлю фоновый div! И тэг <body> хорошо чувствует себя в роли <wrapper>, это второй div экономится.

Когда готово, собираю все CSS и HTML в одну строку. И вес становится минимально возможным. В небольших дизайнах даже сокращаю имена классов до одной буковки (это уже конкретная ловушка самому себе).

Но ничего, в браузере всегда можно нажать Ctrl+Shift+I, тыкнуть на интересующий элемент, да посмотреть на его код и стили с комфортом. А в *.css и *.html файлах можно использовать Ctrl+F для поиска.

Краеугольный камень написания кода имеет 3 стороны:
1.) машина, которая код выполнит
2.) разработчик, которому этот код потом читать и изменять
3.) пользователь, которому пофиг, лишь бы работало быстро и корректно


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
reds
reds
сообщение 3.10.2015, 23:13; Ответить: reds
Сообщение #6


Мне даже удобнее читать код в одну строку. Я когда редактирую код в шаблонах wp превращаю в однострочный то, что трогал, и удобно свои изменения искать потом.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 4.10.2015, 0:20; Ответить: prolisk
Сообщение #7


reds, я наоборот разбиваю. Или пустые ентеры по пару штук, или группирую по блокам.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
reds
reds
сообщение 4.10.2015, 1:20; Ответить: reds
Сообщение #8


Ну блоки это да, если каша как в бутстрапе, то очень сложно там что-то найти, просто одно указание в одну строку, а не весь код в одну.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
11 Aloof 2794 16.4.2024, 12:48
автор: diviner99
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
37 2Index 6586 15.4.2024, 16:17
автор: 2Index
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыSiteAnalyzer - бесплатная программа для аудита и анализа сайта
77 Chaser 74203 9.4.2024, 11:36
автор: Chaser
Открытая тема (нет новых ответов) Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта
0 Alex-777 812 7.4.2024, 18:05
автор: Alex-777
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6570 26.3.2024, 21:49
автор: c4p1t4l15t


 



RSS Текстовая версия Сейчас: 18.4.2024, 8:27
Дизайн