Как сделать оптимизацию страниц сайта?

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

Оптимизация логотипа

Итак, начнем сначала, то есть сверху. Во-первых, разберемся с логотипом. Логотип должен быть обязательно сохранен в формате JPG, если он статичный и сохранен с максимальными настройками качества, но это оправдано т.к. для лучшей оптимизации есть программы специально для этого предназначенные, вот одна из таких программ. С ее помощью можно сократить размер на 25-35%, а иногда и в 2-3 раза. Затем взглянем на размер логотипа по ширине и высоте. Как правило, рядом с логотипом размещают баннер, наиболее распространенный в Рунете размером 468х60px. Высота логотипа не должны превышать высоты баннера. Такой стандарт сейчас популярен и удобен: во-первых: вы экономите место, во-вторых, улучшается общий вид страницы т.к. нет больших пустых пробелов. Ширина логотипа не должна превышать 300px. Если вы разместите баннер рядом с логотипом, то при разрешении 800х600 не должно появляться скролла, отсюда и фиксированные размеры. Рекомендую не делать логотип на Flash. Это конечно красиво, но это лишние килобайты размера страницы. Также не все включают просмотр Flash и как в большей степени интересна не красота вашего сайта, а его наполнение. И не в коем случае не делайте его Gif-анимаццией! Если так хочется сделать анимированным, то лучше выбрать Flash. Итак, подводим итог:
Логотип не рекомендуется делать на Flash или Gif анимацией
Высота логотипа равна высоте баннера рядом с ним. Ширина не более 300px.
Оптимизирован специальными программами для сжатия JPG
Оптимизация графики

Далее возьмемся за оптимизацию остальной графики на сайте. Это могут быть фоны для отдельных элементов, фоны для меню, рамки и многое другое. Во-первых, нельзя делать меню одной целой картинкой и писать текст на самой картинке. Текста не увидят те, у кого отключены картинки и ничего не поймут, а если сделать цельной картинкой, то оно будет долго загружаться. Нарезайте меню на несколько составляющих картинок. Для уменьшения общего веса графики следует все повторяющиеся элементы делать размером 1px и не загружать их целиком. Например, таким элементом является созданный в Photoshop плавный переход при помощи инструмента Gradient Tool. Если вы все-таки используете на странице большие графические объекты и этого не избежать, то режьте их на части. Все маленькие графические элементы: повторяющиеся, кнопки, иконки и прочее, нужно сохранять в GIF формате. Большие графические элементы, элементы с высокой детализацией и плавными переходами цветов в JPG формате.

Не загружаем повторяющиеся элементы целиком
Нарезаем крупные изображения
Оптимизация стилей

Не советую вам пользоваться тегом . Так как в нем нужно постоянно писать повторяющиеся элементы и браузер не отличает их, то есть для него каждый такой тег новый и он будет заново смотреть, какие параметры вы в нем задали. Это лишняя трата времени на обработку браузером кода, поэтому этот тег не используем. Лучше всего все стили хранить в одном или нескольких файлах стилей, например main.CSS, content.CSS и так далее. Один раз зарузив этот файл, браузер будет всегда пользоваться им и буфера. Хранить их в файлах и применять атрибут class=»» вместо style=»» нужно по тем же соображениям, которые я описал выше для тега .
Отказываемся от тега
Не пользуемся атрибутом style=»»
Пользуемся CSS все стили храним в одном или нескольких файлах, если их очень много.
Избавляемся от лишних украшений сайта

Еще один метод оптимизации — отказаться от использования украшений сайта на JavaScripts. Лучше всего использовать не более 2-3 таких скриптов, а это придется делать обязательно, для более полезных целей. Чаще всего такие украшения только раздражают и ухудшают юзабилити. Тематический сайт это не балаган, а прежде всего источник информации. Пользователю оно будет только мешать и отвлекать. Также рекомендую отказаться от JavaScripts в счетчиках посещений, которые нужны для развернутой статистики. Почему этого можно избежать читайте в статье про бесплатные счетчики посещений для сайта. Также не используйте Flash или другие укршения сайта, когда они не несут смысловой нагрузки.
Отказываемя от JavaScripts во всех возможных случаях, когда это не является необходимостью или может принести практическую пользу сайту
Избавляемся от лишних урашательств Flash и других.
Оптимизация кода

Теперь посмотрим, как оптимизировать код, который не будет подвергаться частым изменениям и исправлениям. Это — «шапка» страницы, элементы меню, рекламные блоки, «ноги» страницы. В них код лучше всего «согнать» в 2-3 строчки, тем самым вы существенно уменьшите размер, если код длинный. Если вы еще не обладаете достаточным опытом и не сможете потом разобраться, то не следует делать пробелов и лишних пропусков строк, так как это тоже сказывается на размере. Для того чтобы было проще разобраться в коде, пользуйтесь тегом комментариев . Они не видны на странице, а только в коде страницы.

Отдельно хочется сказать про HTML редакторы. 99% визуальных или комбинированных редакторов используют слишком много лишнего кода, особенно, когда вы делаете таблицы с их помощью. Самый «чистый» код получается при использовании редактора Macromedia Dreamweaver. Лучше всего писать код вручную и не пользоваться визуальными редакторами.

Избегайте большой вложенности таблиц и не помещайте все содержимое страницы в одну большую таблицу. Когда браузер видит тег, то начинает смотреть все его содержание и пока этот тег не будет закрыт, он не отобразит содержимое. Лучше пользоваться загрузкой небольшими блоками. Используйте тег вместо таблиц, где это возможно. Тег прекрасно поддерживают все браузеры. Наведение порядка в коде сильно ускорит загрузку сайта.

Сгоняем готовый код в 2-3 строчки
Избавляемся от лишних пробелов и пропусков строк
Используем для верстки блокнот или Macromedia Dreamweaver. Лучше всего пишем код вручную — это наилучший вариант
Избегаем большой вложенности таблиц. Заменяем по возможности таблицы на блоки, используя тег
Вывод

Общий вес web страницы не должен превышать 50-60kb для быстрой загрузки по модемному соединению (сейчас и еще долго будет основным). И, в крайнем случае, не должен превышать 100-120kb. Все советы, которые я давал в статье, применимы к большинству сайтов и являются универсальными.

Еще один метод оптимизации — отказаться от использования украшений сайта на JavaScripts. Лучше всего использовать не более 2-3 таких скриптов, а это придется делать обязательно, для более полезных целей. Чаще всего такие украшения только раздражают и ухудшают юзабилити. Тематический сайт это не балаган, а прежде всего источник информации. Пользователю оно будет только мешать и отвлекать. Также рекомендую отказаться от JavaScripts в счетчиках посещений, которые нужны для развернутой статистики. Почему этого можно избежать читайте в статье про . Также не используйте Flash или другие укршения сайта, когда они не несут смысловой нагрузки.
Также не используйте Flash или другие украшения сайта, когда они не несут смысловой нагрузки.