Приветствую всех посетителей данного форума.

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

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

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

Итак начну.


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



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

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

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



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



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




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



- Главная страница форума отправляет на сервер 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%). Обязательно делайте резервные копии.



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


Картинки

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



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

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



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



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

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


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

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


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


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

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

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

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