Студия веб дизайна «Альтра»
разработка сайтов, интернет магазинов
логотипов, фирменного стиля
веб дизайн
Cтатьи
Технические моменты разработки сайтов
Как уменьшить загружаемый объем файлов
В этой статье мы рассмотрим способы, которые позволят уменьшить загружаемый объем файлов и ускорить загрузку Вашего сайта. Скорость загрузки очень важна, так как пользователь с низкой скоростью соединения может попросту не дождаться окончания загрузки страницы и уйти. Стоит учитывать, что последние годы все большее распространение получает мобильный интернет, где скорость загрузки пока достаточно невелика. Выполнение рекомендаций, изложенных ниже, может позволить уменьшить размер и увеличить скорость загрузки страниц в несколько раз.
Веб-страница состоит из нескольких видов файлов, с каждым из которых следует поработать отдельно: сама страница в формате html, файлы стилей, скрипты, изображения и различные вставки наподобие флеш.
1. Постарайтесь не использовать автоматические генераторы страниц, в большинстве случаев они создают очень грамоздкий код, который в десятк или иногда даже в сотни раз превышает необходимый для получения точно такого-же внешнего вида страницы. Самый простой и неразумный способ создания страниц - использование сохранения файла из MS Word в виде html. Кроме ужасающего объема файла Вы можете получить непредскажуемые эффекты, такие как измененные местами шрифты, цвет шрифта и фона, которые будет практически невозможно исправить. К сожалению, некоторые нерадивые разработчики используют этот метод, как правила в условиях давления времени и необходимости быстро выкинуть в сеть многостраничные документы. Причиной большого размера файла я вляется сохранение в нем всего форматирования, в большинстве случаем избыточного, повторяющегося и ненужного - такое форматирование может занимать до 95% объема файла!
Примерно такой же эффект, пусть и в несколько более мягкой форме, дают визуальные редакторы тескта. встроенные в большинство CMS. Да, это очень быстро и удобно, когда можно скопировать текст из Word в окошко на сайте и нажать Сохранить. Но помните, даже в этом случае в тексте скорее всего будет присутствовать избыточное форматирование. Конечно, не всегда от этого можно уйти, но все же старайтесь писать текст для вручную, тогда объем его будет меньше.
2. За внешний вид страницы отвечают не только html-код и картинки, но и css-стили. Технология позволяет вынести стили в отдельный файл и подключать его к странице. Часто можно встретить, что разработчики включают стили в текст страницы, это возможно с помощью специальных тегов. Худший вариант включения - прописывать стили у каждого элемента. Во-первых, это занимает достаточно большой объем, во-вторых, извращает саму идею применения стилей. Делать такое нужно только в крайнем случае. Лучше, когда стиль привязывается к элементам при помощи классов и идентификаторов. Выносите стили в отдельный файл, тогда Вы значительно уменьшите объем Вашего текста. А файл стилей, однажды загруженный пользователем при просмотре одной из ваших страниц, окажется в кэше браузера, и следующие страницы будут грузиться быстрее.
3. Так же как и стили, выносите все скрипты в отдельные файлы.
4. Изображения - это то, что занимает наибольший объем страницы (если не считать видео и флеш). Их неправильное использование может значительно увеличить объем страницы. Современные фотоаппараты делают такие несуразно большие фотографии, что при попытке вставить их на страницу в необработанном виде мы получим ужасный эффект. Некоторые пользователи заблуждаются, думая, что если уменьшить визуальный размер картинки в редакторе CMS, то ее загружаемый объем также уменьшится. Это не так - браузер просто умеет отображать картинки в уменьшенном размере, а весят они так же много. Поэтому уменьшите картинку в графическом редакторе, она и выглядеть будет при этом гораздо лучше.
Отдельно стоит сказать про оптимизацию графики. Даже при небольшой высоте и ширине картинки она может занимать много. Попробуйте поэкспериментировать с параметрами при сохранении картинки из графического редактора: для gif это количество цветов, а для jpeg - качество картинки. Вы увидите, что в большинстве случаев можно уменьшить объем файла в несколько раз практически без изменения его внешнего вида. И имейте в виду: формат gif должен использоваться для изображений с небольшим количеством цветов: графиков, схем, простых рисунков, а для фотографий и изображений в множественными переходами цвета следует использовать формат jpeg.