Помощник
Дата поста: | В теме: | За сообщение: | Поблагодарили: | ||
---|---|---|---|---|---|
24.9.2010, 9:25 |
Клиентская оптимизация форума |
Приветствую всех посетителей данного форума. После того как создал тему захотелось написать более подробный топик по улучшению нашего с вами форума. Так как некоторые пользователи не понимают серьезность клиентской оптимизации. Надеюсь получиться статья. Если администрация посчитает данный топик ненужным, ничего страшного, я не огорчусь. Пишу для всех, надеюсь, кто-нибудь почерпнет для себя, что ему нужно. Итак начну. число файлов 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) оптимизированы плохо. Я только хочу, чтобы было хорошо и хостингу (админам) [т.к. оптимизация уменьшает нагрузку и трафик на сервер] и клиентам (нам) [так как сайт будет быстрее и будет меньше трафика]. Надеюсь, для кого-то статья была полезна. Пишите свои мысли, побеседуем, подискутируем. Спасибо за внимание! |
|||
23.9.2010, 9:53 |
Некоторые рекомендации по улучшению форума. Прошу прощения если эта тема уже была, не нашёл. |
Ну не знаю... при нынешних скоростях интернета гонятся за 2мя килобайтами как то смысла нету... В целом еще наверное есть смысл оптимизировать форум, но не в логотипе дело... Да и если подумать, целевая аудитория форума - веб-мастера, у которых, как правило, интернет более-менее приличный. Не знаю как у остальных, у меня форум без задержки видимой грузится. Тоесть нажал на нужный топик - он сразу и открылся прям тут же. Я привёл только логотип, на форуме есть сотни изображений. Я когда оптимизировал свой IPB форум, в итоге уменьшил вес в 2 раза. Я понимаю что у многих интернет быстрый, но нужно к делу подходить более серьёзно. Если есть знания как сделать форум лучше, почему бы ими не воспользоваться? А так спасибо за комментарий. Поржал с утра Про table-верстку мило. ТС, не пробовали сначала сами разобраться в вопросе самостоятельно? Вы надписям на заборах тоже верите? Спасибо за критику MobiX, я четыре года верстал с Table версткой, буквально год назад столкнулся с Div версткой и скажу что Вес страницы уменьшился, да и пользователей стало больше. 4-6. Не знаю, у меня все быстро грузится. Да, шаблон тяжеловат, но зато приятный для восприятия. Хотите простоты и аскетичности, welcome to Серченджин 5. Ничего личного, это бизнес (с) ;-) В целом, думаю администрация в силах самостоятельно разобраться с вопросами нагрузки на сервер. Не сомневаюсь P.S. За Yahoo! Smush.it, тем не менее, спасибо. Пожалуйста, вот ещё подобный инструмент: PunyPNG они используют немножко другой алгоритм. 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. я просто занимался клиентской оптимизацией некоторое время, если кому интересны ссылки на подобные работы, пишите, скину. |
|||
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] Спасибо за внимание, надеюсь кто нибудь что нибудь почерпнул для себя нужной информации. |
|||
22.9.2010, 21:15 |
Дизайн сайта без использования картинок |
Уважаю такие сайты, сам недавно открыл проект где уделил большое внимание клиентской оптимизацией. На странице 1-2 картинки (логотип и кнопка поиска(кнопку скоро наверное поменяю на текстовую)). Сжал и объединил CSS и JS файлы. Включил GZIP сжатие и сайт стал загружаться за полсекунды и быстрее. Да и верстка должна быть не табличная(table), а дивная(div), что сокращает код в ~ пол раза. Вам того-же рекомендую. |
|||
22.9.2010, 18:23 |
АП ТИЦ от 22.09.2010! |
||||
Текстовая версия | Сейчас: 19.3.2024, 7:15 |