Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Тяжелые элементы сайта

Предыдущая тема Следующая тема Перейти вниз

Тяжелые элементы сайта

Сообщение автор UmaRee в Вт 14 Янв - 2:31

Хочу спросить, какие из элементов сайта являются самыми тяжелыми и сильно увеличивают время загрузки сайта?
Речь идет не о временных "украшалках" к праздникам, а о постоянных элементах дизайна.
Очень хотелось бы ускорить загрузку страниц, чтобы форум "летал", ну или почти летал. ))

Пока могу только предположить, что является самым "тяжелым" и сильно влияющим на время загрузки.

Предположения пока такие:
1. Изображения .png и .gif (самыми легкими, по-моему, являются .jpeg?)
2. iframe - коды/скрипты (без острой необходимости их лучше не ставить?)
3. Java - скрипты (без них совсем обойтись не получится, но "плодить" их на форуме лучше не надо, так?)
4. Сторонние скрипты для виджетов (от вконтакте, фейсбука, Инфы от iii.ру, календари, часы, аквариумы  и пр.) - бесполезная чепуха, увеличивающая время загрузки и возможность "подцепить" всякую гадость.
5. Другие элементы дизайна, такие как : выплывающие панели, всплывающие меню и т.п. (красиво, но сильно "отягощают" форум?)
6. Кнопки "поделиться" от Pluso и т.д.

Ни коим образом не настаиваю на правильности вышеозвученных пунктов. Всего лишь предполагаю (поэтому везде в скобках проставила знаки вопроса wink ).

А есть какие-то списки, в которых расписано, какую именно нагрузку создает каждый элемент? Буду очень признательна.

Заранее всем спасибо. Надеюсь на плодотворную дискуссию и помощь.  d_daisy


Последний раз редактировалось: UmaRee (Пн 20 Янв - 15:50), всего редактировалось 1 раз(а)

UmaRee
 

Женщина

Сообщения : 247
Возраст : 36
Регистрация : 2013-08-05
Благодарности : 14

Без предупреждений

http://www.domdiet.com/

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор Dana Domirani в Вт 14 Янв - 4:43

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

Открываете страницу форума.
В Браузере Хром выбираете Настройки > Инструменты > Инструменты разработчика (или просто жмете Ctrl + Shift + I)
В открывшейся панели переходите во вкладку Network.
Обновляете страницу и смотрите, с какой скоростью загружается каждый элемент страницы.
Слева — название элементов (картинок, скриптов и т.д.) | справа — время их загрузки (колонка Time и шкала Timeline)



Чем дольше время загрузки, тем больше он тормозит страницу. Соответственно, есть повод его оптимизировать (если это возможно) или удалить (если это оправдано).



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22101
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8883

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор UmaRee в Вт 14 Янв - 4:52

@Dana Domirani пишет:Чем дольше время загрузки, тем больше он тормозит страницу.

Дана, спасибо большое за совет. Обязательно займусь проверкой.

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

И не могли бы Вы, пожалуйста, подсказать по пунктам, которые я выше озвучила (с 1 по 6).

 smile 

UmaRee
 

Женщина

Сообщения : 247
Возраст : 36
Регистрация : 2013-08-05
Благодарности : 14

Без предупреждений

http://www.domdiet.com/

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор Домовой в Вт 14 Янв - 7:39

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

КЛАЦ

Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор UmaRee в Вт 14 Янв - 9:52

Домовой, спасибо большущее за такую классную ссыль.  26 
А то я - валенок, и не знала о подобном.  pardon 
Ух, как щас все оптимизирую.  biggrin 

А CSS тоже влияет? То есть чем больше в CSS понапичкано, тем медленне сайт?

UmaRee
 

Женщина

Сообщения : 247
Возраст : 36
Регистрация : 2013-08-05
Благодарности : 14

Без предупреждений

http://www.domdiet.com/

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор Домовой в Чт 16 Янв - 8:03

@UmaRee пишет:А CSS тоже влияет? То есть чем больше в CSS понапичкано, тем медленне сайт?
Ну в общем то да.
Но ровно на столько насколько необходимо.
Без CSS никуда не денешься.
Но коды тоже можно облегчить на сколько можно.
К примеру оптимизировать коды цветов, убрать лишние пробелы и прочее.
Оптимизировать CSS можно ЗДЕСЬ
На приме возьмём код из базовой таблицы стиля
Там выглядит он так:

Код:
#pun-intro {
   margin: 0;
   padding: 1.5em 1em 1em 1em;
   border-bottom: 1px solid #666666;
   background-color: #666666;
   background-image: url('http://illiweb.com/fa/punbb/aquagrey/header-bg.gif');
   text-align: left;
   background-repeat: repeat-x;
   }
а это тот же код после оптимизации

Код:
#pun-intro {
border-bottom:1px solid #666;
background-color:#666;
background-image:url(http://illiweb.com/fa/punbb/aquagrey/header-bg.gif);
text-align:left;
background-repeat:repeat-x;
margin:0;
padding:1.5em 1em 1em;
}

На скриншоте видно на сколько он облегчён.

Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор UmaRee в Пт 17 Янв - 12:34

Огромное спасибо за разъяснения.  d_daisy 

Если у Вас есть еще чем поделиться полезным в плане сайтоведения и сайтостроительства, я бы очень хотела послушать.  29 Может как-нибудь минутка найдется у Вас лишняя, расскажите еще о каких-либо полезных вещах, которые надо знать и уметь начинающему веб-мастеру. Уж очень меня эта тема захватывает. Раньше ничем подобным не занималась, а тут понеслоооось.... ))) и остановиться не могу.)) иногда даже что-то получается... но не всегда.  girl_blush  Поэтому всегда прислушиваюсь к знающим людям и стараюсь "впитывать" как можно больше (сколько позволяют ))) ).

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

UmaRee
 

Женщина

Сообщения : 247
Возраст : 36
Регистрация : 2013-08-05
Благодарности : 14

Без предупреждений

http://www.domdiet.com/

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор Dana Domirani в Пт 17 Янв - 13:02

Самые тяжелые — это:
1) многоцветный png большого размера и с альфа-каналом (прозрачностью). Например, у цветастой шапки 1200*800px с прозрачным фоном вес перевалит за Мб.
2) GIF с длительной анимацией. Например, фрагмент фильма, сохраненный в виде анимированного аватара. Тут вес файла может ограничиваться только возможностями хостинга, на который он был залит (от Мб и больше)

Если брать средние значения, то оптимальный вес шапки — 150-200Кб, кнопки / иконки — 1-5Кб (в зависимости от того, сколько таких элементов на странице), аватара — 25Кб.

Вес flash-файла опять-таки зависит от того, какой (помимо скрипта) графический контент внутри него — векторный (он легкий) или растровый (тяжелый, потому что это те же jpeg и png-картинки).



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22101
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8883

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Тяжелые элементы сайта

Сообщение автор UmaRee в Вс 19 Янв - 11:32

Дана, спасибо за информацию. Может тему "подвесить" куда-нибудь, на случай, если таким же "чайникам" как я захочется сайт облегчить? )))

Подобный топик может пригодиться. Для меня лично многие вещи вообще открытием стали.)) Еще раз  13 

Я на свои вопросы все ответы нашла.  smile

UmaRee
 

Женщина

Сообщения : 247
Возраст : 36
Регистрация : 2013-08-05
Благодарности : 14

Без предупреждений

http://www.domdiet.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения