Главная » 2011 » Декабрь » 21 » 7 способов ускорить загрузку вашей страницы, используя CSS и JavaScript
21:08
7 способов ускорить загрузку вашей страницы, используя CSS и JavaScript

7 способов ускорить загрузку вашей страницы, используя CSS и JavaScriptСегодня у всех все меньше и меньше времени на то, чтобы лазать в интернете, общаться в чате, социальной сети или заниматься другими делами. Медленная скорость загрузки уже давно ушла в прошлое, поэтому сайты и блоги, которые долго грузятся и тратят наше и так драгоценное время просто неприемлемы. В интернете можно найти много инструментов, помогающих улучшить скорость загрузки вашей страницы, именно их я просмотрел и могу порекомендовать некоторые из таких инструментов, которые, в большинстве своем, работают, удаляя плохо написанный код.


1. Site Load Test

Site load test

Site Load Test работает больше как валидатор, но подробно описывает каждую имеющуюся у вас ошибку.

Он не сделает для вас чудес, но поможет вам избавиться от тех мелких ошибок, о которых вы даже не думали. Также, он поможет найти ошибки, касающиеся загруженных файлов, размера сайта и общего количества объектов для загрузки, а не только ошибки CSS и JavaScript, которые вы сделали в написании кода. Стоит заметить, что это приложение не убирает ошибки автоматически  - этим вы должны заниматься сами.

2. Packer

Packer

Если вы разработчик JavaScript или хотите использовать JavaScript в коде свой страницы, то Packer — это то, что вам нужно. За вас код он не напишет, но сожмет его. Этот инструмент работает очень быстро и очень хорошо. Вам лишь нужно скопировать оригинальный код в верхнее поле и нажать кнопку «Pack». Через несколько секунд вы получите новый код (который выполняет ту же функцию), но в другом виде. Сжатый код не создает ошибок и, как всем известно, меньше кода, поэтому меньше время загрузки.

3. SquishIt

SquishIt является продуктом GitHub, и также может вам здорово помочь. Если на вашем сайте есть и CSS, и JavaScript (что и бывает в большинстве случаев), то этот инструмент «свяжет» их в один файл, уменьшая таким образом количество загружаемых файлов. Несмотря на то, что может быть сложно пользоваться этим инструментом из-за его не очень хорошего меню, но когда вы пару раз его используете, то поймете, что он на самом деле полезен.

SquishIt поможет помочь и куда большим, благодаря  Google Group и предоставленному форуму для обсуждений. Вы можете обсудить там не только CSS и JavaScript, но и спросить совета или мнения для более правильного написания кода.

4. Minify

Minify

Это PHP5-приложение, которое поможет с вашим CSS и JavaScript. Оно объединяет несколько JavaScript и CSS файлов, удаляя пробелы и комментарии, и экспортирует их в кодировку gzip и в оптимальные кэш-заголовки клиента.

Проще говоря, если у вас есть 5 файлов JavaScript, то они станут одним после использования Minify. Приложение просто в использовании, удаляет запросы HTTP и уменьшает нагрузку CSS/JavaScript на 70%.

Приложение встраивается и в другие проекты. Если вы используете WordPress, то есть два плагина с теми же функциями : WP Minify и W3 Total Cache.

5. JSMin

JavaScript Minifier работает почти также, как и Minify, только он не комбинирует несколько файлов в один. Единственная вещь, которую он делает — удаляет пробелы и комментарии со страницы JavaScript. На официальном сайте этого инструмента написано, что приложение уменьшает размер файла вдвое и способствует более выразительному стилю программирования.  JavaScript Minifier ничего другого в коде не меняет и не испортит его, поэтому код будет работать как положено.

6. Google Closure Compiler

Closure

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

Compiler включает в себя огромную библиотеку JavaScript, протестированную на различных компьютерах и браузерах, проверку и исправление стиля, а также оптимизатор JS. Инструмент от Google является очень мощным и работает превосходно, вычищая каждую вашу страницу JavaScript до тех пор, пока уже ничего нельзя больше сделать.

7. YUI Compressor

YUI Compressor

Хотя компания Yahoo! в последнее время довольно отстала в развитии, но их сеть разработчиков до сих пор делает свою работу хорошо. YUI Compressor — это один из их продуктов, который, как и указано в названии, быстро и безопасно компрессует (сжимает) ваши файлы. YUI отлично работает как с CSS, так и с JavaScript, и позиционирует себя как лучший среди конкурентов, например Packer или JSMin (представленный выше). Цель этого приложения — сохранить качества кода и только изменять то, что не работает корректно.

Инструментом от Yahoo! мы завершаем наш список компрессоров CSS/JavaSctipt, которые помогают вашей странице загружаться быстрее. Большинство из них очень просты в использовании и вам не потребуется много времени для оптимизации вашей страницы, но все же следует сделать этого до того, как вы загрузите последнюю версию сайта. Не забывайте, что время загрузки страницы очень важно для обеих сторон: для вас и для посетителей, ведь неспособность придерживаться высоких стандартов не сильно вам поможет. Поэтому вам следует попробовать каждый из этих продуктов и посмотреть, какой из них вам наиболее подходит.

Перевод статьи – 7 Ways to Boost Your Page Load Time Using CSS and JavaScript

Категория: Коддинг | Просмотров: 452 | Добавил: [L1nk] | Теги: css, javascript | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]