Скорость загрузки веб-сайта является одной из наиболее критичных задач, которые должны решить все веб-мастера. Не секрет, что «быстрый сайт» гораздо быстрее привлечет внимание целевой аудитории и увеличит поток пользователей. Длительное ожидание загрузки страницы в браузере отпугнет не только пользователей, но и может привести к проблемам с индексацией в поисковых системах. Чтобы избежать этого, необходимо тщательно оптимизировать страницы сайта, как по отдельности, так и в целом.
Рекомендуется перейти по ссылке Компьютер для начинающих и ознакомиться с для лучшего понимания основ веб-разработки.
Методы оптимизации
Важно знать несколько моментов и применять их с умением. В противном случае функциональный и привлекательный сайт может оказаться без посетителей. Чтобы этого избежать, необходимо придерживаться определенных правил при создании HTML-документа:
- Старайтесь минимизировать использование JavaScript для улучшения загрузки..
- Переносите скрипты в отдельные файлы для снижения нагрузки.
- Оптимизируйте использование HTML-сущностей для сокращения кода.
- Используйте внешние CSS для уменьшения объема HTML-документов.
Пример
Давайте рассмотрим небольшой пример. Перед вами находится скрипт вывода даты и времени на сайт.
<script type=»text/javascript»>
<!—
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000) year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym < 10)
daym=»0″+daym
var dayarray=new Array(«воскресение»,»понедельник»,»вторник»,»среда»,»четверг»,»пятница»,»суббота»)
var montharray=new Array(«января»,»февраля»,»марта»,»апреля»,»мая»,»июня»,»июля»,»августа»,»сентября»,»октября»,»ноября»,»декабря»)
document.write(«»+dayarray[day]+», «+daym+» «+montharray[month]+» «+year+» года»)
—>
</script>
Для того, чтобы сделать «Ненавязчивый Java Script» нужно скопировать содержимое скрипта без тегов <script type=»text/javascript»><script>, вставьте скопированный код в Блокнот и сохраните под расширением .js в нужной кодировке. В месте, где необходимо вставить в HTML документ скрипт, впишите следующий код:
<script type=»text/javascript» src=»my_new_file_js.js»></script>
где src=»название файла.js» и есть ссылка на созданный вами файл. Таким образом, вы вынесите скрипты из документа HTML во внешние файлы и создадите «Ненавязчивый Java Script», который позволит гораздо быстрее загружаться странице и облегчит ее.
Будьте внимательны и осторожны с применением мнемоник в html. Мнемоника представляет собой конструкцию SGML (стандартный обобщённый язык разметки). Уверен, что каждый встречался с использованием мнемоник. Если сказать проще, то это спецсимволы HTML. Мнемоника отображает сущность, а не сам элемент. Примером может служить неразрывный пробел, который часто используют визуальные редакторы. Помните, что неразрывных пробелов на странице может быть всего несколько штук, не более. Они и так достаточно хорошо нагрузят HTML документ. К тому же все знакомы со знаком copyright — это тоже мнемоника. Вышеперечисленные спецсимволы, самые распространенные, лучше записывать их в документе HTML следующим образом:
пропишите как  
© пропишите как ©
Это немного облегчит страницу и ускорит ее загрузку.
Старайтесь по возможности не прописывать стили в открывающем теге. Лучше воспользоваться замечательным инструментом, как «Каскадные таблицы стилей» — CSS и вынести создаваемые стили за пределы HTML документа.
Пример кода с записью стилей в открывающий тег:
<p style=»color: red; font-family: Verdana; font-size: 14px; font-weight: bolder;»>
Обратите внимание на то, какой код получился в открывающем теге.
</p>
Если создать класс с вышеуказанными стилями и вынести его в отдельный файл, например, style.css, то код значительно сократится.
Запись в файле — CSS:
.new_class {
color: red;
font-family: Verdana;
font-size: 14px;
font-weight: bolder;}
Сам код в странице HTML будет выглядеть уже следующим образом:
<p class=»new_class»>
Теперь посмотрите на сколько уменьшился код.
</p>
В CSS, лучше использовать class, чем id. Тег id в значительной мере сократит скорость загрузки и ко всему прочему он не универсален. На странице, назначенный id может использоваться единожды в отличие от class. Использование одного и того же id на одной странице, сделает документ HTML не валидным.
Мы рассмотрели варианты выноса скриптов и стилей за пределы документа HTML. Но, это еще не все.
Созданные вами файлы .js и .css необходимо сжать. После сжатия файлы уменьшатся в размере, тем самым увеличится скорость загрузки вашего сайта. Эту операцию можно проделать вручную, убрав из кода все ненужные пробелы и комментарии. Так же можно воспользоваться сервисом в Интернет, для сжатия Java Script и CSS.
Для оптимизации CSS кода, можно воспользоваться сервисом онлайн: CSS Formatter and Optimiser.
Для оптимизации JS кода, можно воспользоваться сервисом онлайн: Online javascript compressor.
Прежде чем отправить ваши файлы на сжатие, обязательно сделайте их резервные копии, страховка должна быть всегда.
Графическое содержимое и скорость
Обилие графики на сайте может существенно замедлить загрузку. Здесь есть несколько универсальных рекомендаций:
Чем меньше будет весить изображение, тем быстрее оно будет загружаться. Существуют специализированные программы для работы с графикой, например, PhotoShop и инструмент, специально созданный для веб-разработчиков Adobe Fireworks, кстати, скачать его можно здесь: Adobe Fireworks. Каждый, кто хотя бы немного знаком с PhotoShop, без труда разберется с этой программой. Версия программы — Portable Rus.
- Ставьте размеры и альтернативное описание для изображений.
- Используйте ссылки на графические элементы вместо их явного указания.
- Выбирайте правильные форматы для изображений — JPEG для фотографий и PNG для графиков.
- Сократите количество HTTP-запросов путем применения CSS Sprite.
Различные подходы к ускорению загрузки многообразны, многие из которых могут быть описаны в отдельной книге. Необходимо помнить, что скорость работы вашего сайта формируется на этапе его создания, еще на вашем компьютере. Мудрое прогнозирование и оценка веб-ресурса позволят значительно оптимизировать сайт и увеличить скорость загрузки.
