5 способов оптимизации веб-страницы

5 способов оптимизации веб-страницыНесмотря на то, что скорость подключения к интернету растет как на дрожжах, тем не менее, нет причины не оптимизировать свои веб-станицы, чтобы ускорить загрузку контента. На эту тему в нашем блоге мы рассмотрим пять способов уменьшения размера Ваших веб-страниц и, соответственно, ускорения их загрузки.

1 способ. Стенография CSS

Первый способ поможет сократить размер Вашей веб-страницы лишь на байты, если это маленькая страница, но если речь идет о большом сайте с большим количеством CSS, то этот способ может оказаться очень полезным.

Стенография CSS существует для многих свойств, например: background-image, background-repeat и background-position и т.д.

Итак, неоптимизированный CSS выглядел бы примерно так:

1
2
3
4
5
background-color: #ff9900;
background-image: url(background.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: bottom left;

Соответствующая ему стенография выглядит намного проще:

1
background:#ff9900 url(background.jpg) repeat-x fixed bottom left;

Подобная техника может быть применена для padding и margin.

До:

1
2
3
4
5
6
7
8
padding-top:4px;
padding-right:2px;
padding-bottom:3px;
padding-left:1px;
margin-top:4px;
margin-right:2px;
margin-bottom:3px;
margin-left:1px;

После:

1
2
padding:4px 2px 3px 1px;
margin:4px 2px 3px 1px;

Подробнее стенографию CSS мы рассмотрим на нашем блоге чуть позже.

Способ 2. Оптимизация изображений

Еще один способ уменьшения «веса» Вашей веб-страницы заключается в использовании оптимизаторов изображений, например DynamicDrive или ImageOptimizer.net. Там, кстати, можно скачать программку и оптимизировать изображения оффлайн.

Ну и помимо оптимизаторов изображений, при сохранении изображения, например, в Фотошопе, не используйте 100%-ное качество, если это не необходимо. Старайтесь найти оптимальный вариант между весом картинки и её качесвом.

Способ 3. Оптимизация дизайна

Старайтесь использовать как можно меньше флэшек, JavaScript-ов. В некоторых вещах, например, выпадающее меню, вместо JavaScript-ов можно обойтись CSS (даже в IE6!).

Использовать изображения для навигационных кнопок — плохая идея, не только для SEO. Используйте фоновое изображение, а по верху поместите текст. И поисковым машинам это по вкусу, и юзверь будет доволен 🙂

Способ 4. Минимизируйте JavaScript и CSS

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

Способ 5. Оптимизируйте разметку (div’ы vs. таблицы)

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

Давайте рассмотрим этот крайне просто пример двух колонок, написанных на дивах:

1
2
3
4
5
6
7
8
9
10
11
<div class="left">left hand content</div>
<div class="right">right hand content</div>
и с помощью таблицы:
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="left">left hand content</td>
<td class="right">right hand content</td>
</tr>
</tbody>
</table>

Но даже при использовании дивов, нужно быть внимательным, чтобы не использовать лишние дивы, так называемые «обёртки», которые по сути ничего не дают.

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

  • Владимир

    я тоже хочу писать для вас статьи