Оптимизация кода и CSS сайта с целью повышения скорости загрузки сайта

Размер страницы весьма позитивно сказывается на ее продвижении. По заявлению поисковой системы Яндекс, их роботы не индексируют страницы, вес которых превышает 10 Мб. Помимо этого, размер страницы напрямую влияет на скорость загрузки у конечного пользователя, что будет влиять и на поведенческий фактор, т.к. чем быстрее будет грузиться страницы, тем меньше шансов, что пользователь закроет ее еще до загрузки и пойдет по другой ссылке из выдачи. Следовательно, необходимо максимально сократить размер страницы. Естественно, без ущерба качеству отображения и функционалу. Стоит понимать, что даже если страницы занимает мало, это еще не значит, что она не нуждается в оптимизации.

Собственно, в оптимизации может нуждаться и не только код сайта http://upgoing.ru/, но и обратные ссылки и прочие моменты.

Что такое оптимизация кода сайта?

Под оптимизацией кода сайта подразумевают технический процесс по уменьшению размера кода, который отдается пользователям и поисковым системам при загрузке. Оптимизация кода имеет сразу несколько преимуществ:

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

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

Пример кода без использования внешнего CSS файла (246 символов кода)

Код с использованием CSS файла
(177 символов кода)

<div style=”border:1px; padding:5px; color:#000; font: 14px Tahoma;”>Информация Раз</div>
<div style=”border:1px; padding:5px; color:#000; font: 14px Tahoma;”>Информация Два</div>
<div style=”border:1px; padding:5px; color:#000; font: 14px Tahoma;”>Информация Три</div>
.content {border:1px; padding:5px; color:#000; font: 14px Tahoma;}

<div class=”content”>Информация Раз</div>
<div class=”content”>Информация Два</div>
<div class=”content”>Информация Три</div>

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

Вынос стилей CSS во внешний файл является огромным плюсом в сокращении размера страницы, но так же стоит уделять внимание сокращению и самого файла CSS. Особенно, если речь идет о крупном портале с обилием стилей. Оптимизация CSS заключается в сокращении описаний стилей путем удаления или объединения идентичных параметров. Например, вместо записи “margin-top:10px; margin-bottom:10 px;” можно использовать сокращенный вариант написания “margin: 10px 10px;”. Как видим, последняя запись в два раза короче первой. В случае большого количества стилей размер CSS файла после оптимизации может сократиться в несколько раз.

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.