Корректная оптимизация и сжатие файла style.css
Октябрь 21, 2014 0

Корректная оптимизация и сжатие файла style.css

Опубликовано:webmaster onОктябрь 21, 2014

Если Вы читаете эту статью, то у Вас есть свой сайт и Вам интересна тема его оптимизации.

Рано или поздно каждый вебмастер задумывается о том, а быстро ли работает его сайт?

Корректная оптимизация и сжатие файла style.css

На это влияют многие факторы, и в этой статье я хочу рассказать, как оптимизировать и сжать файл style.css. Сделаю я это на примере этого сайта.

Корректная оптимизация и сжатие файла style.css

Хочу предупредить, прежде чем начать работать с файлом, сохраните его копию у себя на компьютере. Если что-то пойдет не так, Вы всегда сможете восстановить прежнюю версию.

И так начнем.

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

Поэтому, я предлагаю проделать эту работу самостоятельно, конечно это нудно и занимает не мало времени, но работа стоит того. А для работы, я использую программу Dreamweaver, о ней можно прочитать в статье на этом сайте и даже скачать бесплатные уроки.

Первое, что я хочу Вам показать, это скриншот теста с сервиса Google PageSpeed

google_st

Как видно из этого теста, google рекомендует сжать файл style.css чем мы сейчас и займемся.

Мой исходный файл выглядит вот так.

dream_st

dream_st1

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

В моем исходном файле 3087 строк и его размер 68 Ко

Первое, что нужно сделать, это безжалостно удалить все комментарии, если в последующем нужно будет найти и изменить какой-то стиль, это можно будет сделать тем же Dreamweaver.

Затем удаляем все пустые строки и Все что можно для каждого стиля переносим в одну строку, также если можно параметры стилей. При переносе и удалении будьте внимательны, чтобы не удалить что-то нужное!

И так смотрим результаты моей работы.

dream_end

dream_end1

Как видите в файле style.css осталось всего 1917 строк и его размер стал 51 Ко, заметная разница 🙂

Ну что же, проверяем результаты своей работы, идем на сервис Google PageSpeed.

google_end

Как видите, результат на лицо. Тест больше не показывает, что нужно сжать файл style.css и окошечко показателей стало зеленым.

Конечно еще не идеал и есть еще рекомендации по улучшению, но это уже в других статьях.

Буду рад Вашим комментариям и вопросам если возникнут, обязательно отвечу.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:
Confirmez que vous n'êtes pas un bot - sélectionnez homme avec main levée:
Confirm that you are not a bot - select a man with raised hand:

Powered by  1web-seonet.eu 2018
Copyrights © Vladimir Rokosuiev.
Яндекс.Метрика