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



 

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

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

История благодарностей участнику Ardjuna. Поблагодарили: 12 раз(а)
Дата поста: В теме: За сообщение: Поблагодарили:
24.9.2010, 9:25 Клиентская оптимизация форума
Приветствую всех посетителей данного форума. smile.gif

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

Надеюсь получиться статья.

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

Итак начну.


число файлов 174
суммарный размер файлов 428071
время загрузки (33,6kbps) 220.5 с
время загрузки (100 KB/s) 79.08 с



Я разберу только некоторые моменты:

Читатели игнорируют баннеры

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

[attachment=8279:Untitled_1.png] [attachment=8280:Untitled_2.png]

- без баннеров на 1 ветку больше видно стало
- не мозолит и не отвлекает анимация, которая 99% пользователям не нужна.

[attachment=8281:Untitled_3.png]

- Как видим на картинке эти 2 flash баннеры тормозят сайт на 1.66 секунд.
- Отправляет на сервер 2 запроса, и конечно же серверу нужно обработать эти запросы.

[attachment=8282:Untitled_4.png]


Далее перейдём к CSS файлам

[attachment=8283:Untitled_5.png]

- Главная страница форума отправляет на сервер 2 запроса на что уходит на первую загрузку 2.58 секунд, если их объединить, то серверу будет легче справляться с ним и время загрузки CSS уменьшиться.
- Далее, после того как Вы объедините CSS файлы в один файл (сделать это можно через Блокнот), нужно сделать резервную копию CSS файла и сжать специальным компрессором. Я использую css оптимизатор (основанном на проекте CSS Tidy) в настройках ничего не меняйте, если не знаете что там настраивать, единственное что можете поставить Степень сжатия, я на максимум ставлю.

Я сделал, и у меня получилось вот что:

Исходный CSS: 38.426KB, Оптимизированный CSS: 28.172KB, Степень сжатия: 26.7% (-10254 Bytes)

После этого можно отдавать CSS-файлы в виде архивов с сервера (общий выигрыш до 85%).

Подробнее о сжатии CSS-файлов.



Далее перейдём к JavaScript.

Тут 11(!) запросов, это много. Первая загрузка (после очистки кэша) 2.14 сек. Тут можно воспользоваться таким же алгоритмом что и CSS. Компрессор для JS я использую http://dean.edwards.name/packer/ (общий выигрыш до 70%). Обязательно делайте резервные копии.

[attachment=8285:Untitled_6.png]

Рекомендую объединить все файлы в один внешний или даже включить его в итоговый HTML. Это позволит сократить количество запросов к серверу.


Картинки

С картинками у нас дела обстоят посложнее, их 47(!) штук и запросов на сервер тоже естественно 47. Это очень много. Тут можно воспользоваться техникой Спрайтов, подробнее читать тут

[attachment=8286:Untitled_7.png]

Ненужные изображения нужно убрать. Нужные объединить если это возможно. Далее нужно их сжать. Инструменты:
smushit
punypng

Вот смотрите пример: я взял JPG изображение

[attachment=8287:button.jpg]

И через сайт smushit урезал его больше чем в два раза.

[attachment=8288:Untitled_8.png]

Так можно обработать все изображения на сервере (включая кнопки и фоновые изображения).

GIF давно устарел, на его замену пришёл PNG. Только в редких случая использовать GIF. Подробнее о преимуществах формата PNG.


Необходимо перевести TABLE верстку в DIV

Многим давно известно, что DIV верстка лучше, более подробнее тут


Далее можно прочитать вот эту статью Тоже очень полезна.


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

p.s.2. Я не придираюсь к форуму, почти все сайты в Интернете кроме мне известных (vkontakete,google) оптимизированы плохо. Я только хочу, чтобы было хорошо и хостингу (админам) [т.к. оптимизация уменьшает нагрузку и трафик на сервер] и клиентам (нам) [так как сайт будет быстрее и будет меньше трафика].

Надеюсь, для кого-то статья была полезна. Пишите свои мысли, побеседуем, подискутируем. smile.gif

Спасибо за внимание!


Спасибо сказали: (3)
23.9.2010, 9:53 Некоторые рекомендации по улучшению форума.
Прошу прощения если эта тема уже была, не нашёл.
(Silverspam @ 23.9.2010, 9:27) *
Ну не знаю... при нынешних скоростях интернета гонятся за 2мя килобайтами как то смысла нету...
В целом еще наверное есть смысл оптимизировать форум, но не в логотипе дело...

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

Я привёл только логотип, на форуме есть сотни изображений. Я когда оптимизировал свой IPB форум, в итоге уменьшил вес в 2 раза.

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

А так спасибо за комментарий.


(MobiX @ 23.9.2010, 9:31) *
Поржал с утра smile.gif Про table-верстку мило. ТС, не пробовали сначала сами разобраться в вопросе самостоятельно?

Вы надписям на заборах тоже верите?


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


(MobiX @ 23.9.2010, 9:31) *
4-6. Не знаю, у меня все быстро грузится. Да, шаблон тяжеловат, но зато приятный для восприятия. Хотите простоты и аскетичности, welcome to Серченджин smile.gif

5. Ничего личного, это бизнес (с) ;-)

В целом, думаю администрация в силах самостоятельно разобраться с вопросами нагрузки на сервер.


Не сомневаюсь smile.gif


(MobiX @ 23.9.2010, 9:31) *
P.S. За Yahoo! Smush.it, тем не менее, спасибо.


Пожалуйста, вот ещё подобный инструмент: PunyPNG они используют немножко другой алгоритм.



(webpavilion @ 23.9.2010, 9:36) *
Ardjuna, скорее всего нечего не изменится. я уже пробовал: http://www.maultalk.com/topic42908.html


Ну ведь можно пошагово вместе улучшать форум. Вот смотрите как можно сжать CSS файл.

http://www.maultalk.com/style_images/css_6.css весит 37.654KB

Не забудьте сделать резервную копию.

После сжатия его (путём удаления комментариев, удаления лишних пробелов и т.д.) через инструмент Оптимизатор CSS можно получить вот такой результат: Исходный CSS: 37.654KB, Оптимизированный CSS: 27.535KB, Степень сжатия: 26.9% (-10119 Bytes)

p.s. я не придираюсь к форуму, я тут пишу, потому что мне форум понравился, и я хочу чтобы всем было здесь лучше чем вчера :-)

p.s. я просто занимался клиентской оптимизацией некоторое время, если кому интересны ссылки на подобные работы, пишите, скину.


Спасибо сказали: (1)
23.9.2010, 9:19 Некоторые рекомендации по улучшению форума.
Прошу прощения если эта тема уже была, не нашёл.
Некоторые рекомендации по улучшению форума.

Прошу прощения если эта тема уже была, не нашёл.


Итак.

1) Необходимо отказаться от Table верстки и перейти на DIV верстку, это даст: а) уменьшение веса страницы в ~ 2 раза; б) плавное отображение контента на форуме, т.к. если table до конца не загрузился, значит и не загрузиться контент. С DIV вёрсткой такой проблемы нет; в) в некоторых местах рунета писали что и индексация контента в DIV вёрстки лучше.

2) Уберите лишние пробелы в HTML коде, сократите размер на треть. А значит загрузка страницы всё-же будет быстрее.

3) Добавьте в поле "Дополнительная секция вашего профиля" графу "Skype: "

4) Объедините и сожмите CSS и JS файлы на сайте, тем самым уменьшите кол-во запросов на сервер, это даст: а) более быструю загрузку форума; б) уменьшение кол-ва трафика; в) уменьшит нагрузку на хостинг.

5) На 20% шапку сайта рекомендую уменьшить, у меня пол монитора занимает шапка и 2 рекламы.

6) Я прикрепил файл ФайрБага, который у меня не смог отобразиться на всей странице. Главная страница отправляет на сервер 64(!) запроса, хотя можно их уменьшить в 2ое-3ое, всё зависит от грамотного подхода. Когда у форума вырастит посещаемость в несколько раз, это будет одна из самых первых задач.

[attachment=8271:23423423.png]

Когда всемирно известный интернет магазин Амазон.ком уменьшили вес своей главной страницы на несколько килобайт, тем самым уменьшив загрузку своего сайта, они увеличили доход на несколько миллионов $ в год. Дело в том, что среднестатические пользователи не любят ждать загрузки сайта больше 4 секунд.

---

Добавлю ещё коечто.

Вот ещё один ход по улучшению форума. Это сообщение пригодиться не только администраторам форума, но и всем веб-мастерам.

Логотип нашего любимого форума http://www.maultalk.com/style_images/maulnet/header/logo.gif весит 17.4 КБ

Если конвертировать давно устарелый GIF формат в PNG и убрать ненужные для изображения данные (дата создания фото и т.п.) и сжать изображение не потеряв качества изображения, то можно получить такой же файл, но уже с весом 15.96 KB это 8.20% выигрыша для всех посетителей данного логотипа форума. Воспользоваться можно инструментом Yahoo! Smush.it

[attachment=8273:77777777.png]

Спасибо за внимание, надеюсь кто нибудь что нибудь почерпнул для себя нужной информации.


Спасибо сказали: (6)
22.9.2010, 21:15 Дизайн сайта без использования картинок
Уважаю такие сайты, сам недавно открыл проект где уделил большое внимание клиентской оптимизацией. На странице 1-2 картинки (логотип и кнопка поиска(кнопку скоро наверное поменяю на текстовую)). Сжал и объединил CSS и JS файлы. Включил GZIP сжатие и сайт стал загружаться за полсекунды и быстрее. Да и верстка должна быть не табличная(table), а дивная(div), что сокращает код в ~ пол раза. Вам того-же рекомендую.


Спасибо сказали: (1)
22.9.2010, 18:23 АП ТИЦ от 22.09.2010!
(Jepps @ 22.9.2010, 18:19) *
http://www.yandex.ru/ - 502 Bad Gateway


У всех Яндекс "умер"?


Спасибо сказали: (1)

RSS Текстовая версия Сейчас: 19.3.2024, 7:15
Дизайн