Главная - Без рубрики - Хотите сэкономить немного килобайт при загрузке сайта?

Хотите сэкономить немного килобайт при загрузке сайта?

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

Поэтому советую задуматься и провести необходимые работы на своем сайте, особенно, если вы знаете, что время его загрузки — больше 6-7 секунд.

Кто не знает как проверить скорость загрузки сайта — могу посоветовать этот ресурс: http://tools.pingdom.com.

Вводите адрес вашего сайта, желательно с http и ждете теста. После теста внизу страницы вы увидите маленький отчет:

Результат тестирования — Total loading time — в моем случае показал 6,1 сек. Многовато.

Ниже видно сколько различных объектов также участвует в загрузке главной страницы. Среди них самое большое место занимают Images — Картинки. Также много места занимают разные скрипты.

Как уменьшить эти показатели? Отказаться от изображений — страница станет скучной. Как вариант — правильно оптимизировать все файлы изображений. Если вы умеете пользоваться программой Фотошоп, наверняка знаете, что изображения, которые содержат небольшое количество цветов, лучше сохранять в формате GIF — он наиболее маленький в сравнении с другими форматами картинок.

Например, последний скриншот выше: в формате JPG такая картинка «весит» 182К. Но я не вижу смысла сохранять такую картинку в этом формате — это не фотография, цветов здесь не много, поэтому стоит сохранить в формате GIF, тем более что весит такая картинка всего 36,05К. Согласитесь — есть разница.

Что еще можно уменьшить быстро? Например, файлы стилей.

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

/* Header */

#header {
 width: 980px;
 height: 35px;
 margin: 0 auto;
}

#menu {
 float: left;
}

Всегда удобно найти нужный фрагмент и изменить, подкорректировать его. Но такой код страдает одним недостатком: он занимает много места. Каждая пустая строка — это время, которое необходимо серверу, чтобы прочитать весь файл. А файл стилей «читается» сервером одним из первых, т.к. в файле header.php есть строка вызова этого, и она расположена в зоне тега <HEAD>, а это — один из первых тегов, которые «читает» сервер.

Как можно уменьшить файл? Надо убрать все «пустые» строки. Руками делать — долго, утомительно, и можно «сломать» код, даже не заметив этого.

Для редактирования кода и его уменьшения есть очень симпатичная программа, которая называется  SNAP{CSS}

Например, у каждого из вас есть дефолтный шаблон WordPress — Twentyten. Файл style.css этой темы «весит» на диске 24К. Открываем программу, открываем в ней этот файл. Видим стандартный код файла:

В меню находим Tools -> и два варианта для файла: Beautify Code, Collapse Code.

Beautify — это сейчас, как бы «красивый». Collapse — в этом случае надо перевести как «сжатие». Нажимаем этот вариант и получаем вот такой код:

Программа сжала код, не оставив ни одной пустой строки. И знаете, сколько теперь весит этот файл? Всего 20К. Таким образом, программа «сэкономила» 4К. Если в вашем шаблоне таких файлов стилей не один, а несколько, экономия может составить приличный размер.

Что это даст в итоге? В итоге, если вы примените не только мои советы, а попробуете сжать файлы изображений, то общая экономия может составить не одну сотню Кб данных, что в итоге приведет к уменьшению времени на загрузку до 1-2 секунд, а это — до 30% общего времени загрузки.

Есть еще программы, которые сжимают файлы PHP, сейчас не помню, как называются, но вы можете поискать в Сети.

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

Советую уделить этим вопросам свое время и провести необходимые работы на сайте.


Скачать программу Install Snap CSS!


ответы на вопросы

О admin

1 комментарий

  1. Максим

    Большое спасибо очень помогло

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*