Самостоятельная раскрутка сайта uCoz
Главная » Раскрутка сайта uCoz » SEO советы


Оптимизация JavaScript без знаний языка программирования


Оптимизация JavaScript

Как оптимизировать JS скрипты для увеличения скорости загрузки страниц без знаний JavaScript программирования.


Оптимизация JavaScript кода – это процесс редактирования самого кода JS путем замены функций, массивов и циклов более упрощенными аналогами с целью максимально сократить «тяжесть» восприятия кода браузерами.




Обычно оптимизация JavaScript проводиться для интерфейсных компонентов и обработчиков частых событий. Для этого нужно обладать достаточными знаниями в JS, но в этой статье, я расскажу, как оптимизировать JavaScript без каких-либо знаний в этом языке программирования.

Чтобы приступить к оптимизации страниц и работе с JS кодом, я хочу кратко рассказать, как обрабатывают страницы сайта все известные нам браузеры.

Когда браузер получает ответ в виде HTML страницы на свой HTTP запрос к серверу, он начинает читать и обрабатывать код в определенной последовательности:

  1. Сначала проводит загрузку всех внешних исполняемых файлов (JS, CSS, Flash и др.) в порядке их очереди расположения на странице (сверху вниз). В этот момент пользователь видит белую страничку.
  2. Затем он начинает выполнение файлов в том же порядке очереди. Посетителю начинают «вырисовываться» элементы дизайна.
  3. По мере обработки CSS и JS отображается весь сайт в целом.
  4. Загрузка страницы заканчивается, когда все файлы загружены, обработаны и отображены посетителю.

Чтобы ускорить процесс загрузки страницы, необходимо проводить оптимизацию CSS стилей и конечно же JavaScript.




Удаление лишних скриптов.

Для большинства новичков, скачать скрипт для uCoz и «влепить» его на сайт не составляет труда, если скрипт оказался нерабочим, то некоторые новички даже не удосуживаются удалить его со страниц, так как не понимают его роль, независимо от того - рабочий он или нет. Это же касается и скачанных шаблонов, в которых часто можно встретить бесполезные скрипты.

Вы должны определить, какие JS скрипты присутствующие в коде шаблона лишние и не влияют на работоспособность каких-то важных функций сайта.

Сделать это очень легко. В коде шаблона – «вырезаете» скрипт (Ctrl + X) и сохраняете шаблон, затем обновляете страницу и смотрите, какие произошли изменения. Если ничего страшного и критического не произошло, значит данный скрипт был лишним, а если пропали какие-то функции, то в коде шаблона «вставляем» вырезанную часть на место (Ctrl + V) и снова сохраняем. Такую процедуру проводим со всеми скриптами и во всех шаблонах модулей в панели управления.


Загрузка всех исполняемых файлов (скриптов) на свой сайт.

Некоторые скрипты (особенно скопированные из интернета) содержат в себе ссылку на другой ресурс, откуда он и подгружается. В этот момент браузеру приходится обратиться за файлом на другой сервер (послать на него запрос и дождаться ответа), а затем еще и обработать. Это увеличивает время открытия сайта, а если скрипт будет отсутствовать на стороннем ресурсе или находится в нерабочем состоянии, то страница может вообще не открыться. Также сторонние скрипты увеличивает угрозу заражения вирусами. Вы должны залить все исполняемые внешние скрипты к себе на сайт.

Для этого:

  1. Cкопируйте ссылку из скрипта в новое окно браузера и перейдите по ней (например, http://leviy-sajt/sript/fail.js).
  2. Выделите весь JS код (Ctrl + A) и скопируйте его в новый txt документ (создать его с помощью стандартного блокнота Windows).
  3. Данный файл сохранить с тем же именем, каким он был в исходном варианте (для вышеуказанного примера - это fail.js). Чтобы файл автоматически получил нужный формат – заключите имя в кавычки ("fail.js"), а так же выберите «Тип файла» - все файлы, «Кодировка» - UTF-8.
  4. После этого загрузите полученный файл через файловый менеджер на свой сайт (например, в паку JS).
  5. Подключите к скрипту в коде новый файл со своего сайта, заменив внешнюю ссылку в скрипте на внутреннею (http://ваш-сайт.ru/js/fail.js или просто /js/fail.js)


Вынос объемных скриптов во внешние файлы.

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

Но если код скрипта достаточно объемный – он может занимать ценное место в HTML коде шаблона модуля, которое лучше использовать для размещения полезного для посетителя текстового контента.

Чтобы вынести код скрипта во внешний файл вам нужно:

  1. Скопировать содержимое скрипта от открывающего тэга <script type="text/javascript"> до закрывающего </script>
  2. Вставить в блокнот и сохранить в кавычках с именем, придуманным вами и разрешением js (например, "new-script.js"). Опять же выбрать «Тип файла» - все файлы, «Кодировка» - UTF-8.
  3. Залить полученный файл в файловый менеджер.
  4. В HTML коде шаблона замените старый объемный код на новый:

    <script type="text/javascript" src="http://ваш-сайт.ru/js/new-script.js"></script>
  5. Где http://ваш-сайт.ru/js/new-script.js и будет ссылкой на исполняемый файл, находящийся в файловом менеджере вашего сайта.


Вынос кода скриптов в самый низ страницы.

Как я уже говорил, браузер обрабатывает скрипты в порядке очереди сверху вниз, и он не сможет сначала открыть весь дизайн (чтобы посетитель начал получать контент, не дожидаясь полной загрузки страницы), не обработав скрипт находящийся перед основным содержимым страницы. Поэтому все скрипты необходимо размещать перед закрывающим тэгом BODY или в глобальном блоке – «Нижняя часть сайта».

Но, к сожалению, есть JS скрипты, которые устанавливаются строго в HEAD страниц (иначе они не будут работать), и в этом случае старайтесь не размещать их перед подключением CSS, а как можно ниже к закрывающему тэгу блока HEAD. Если говорить про общий порядок выстраивания всего содержимого блока HEAD, то он будет следующим:

  1. Заголовок страницы (тайтл)
  2. Описание (дескрипшон)
  3. Кодировка страницы
  4. Подключение основных стилей
  5. Иконка сайта (фавикон)
  6. Все остальные мета-тэги и данные
  7. Скрипты

Такая структура позволит как браузеру, так и поисковому роботу в максимально сжатые сроки получить всю необходимую информацию о странице.


Чтобы самостоятельно провести полную оптимизацию кода JavaScript необходимо обладать хорошими знаниями этого языка программирования, но даже новичок в сайтостроительстве сможет без проблем ускорить свой сайт путем манипуляции уже установленными скриптами. Удаление лишних и вынос объемных скриптов во внешние файлы, не только увеличивают скорость загрузки страниц, но и освобождают место в коде страниц, что облегчает вебмастеру работу с ним.


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

Поделитесь записью в социальных сервисах!






Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Быстрый вход ]







Опрос
Ваше отношение к uCoz?

Всего ответов: 749
Ваш профиль
Вся информация на этом сайте предоставляется бесплатно и без регистрации, но для того чтобы принимать участие в обсуждениях и комментариях необходимо зайти на сайт под своим именем (uID) или зарегистрироваться.
Новые пользователи