Сейчас читаю
Оптимизация кода сайта — руководство для начинающих Часть 1

Оптимизация кода сайта — руководство для начинающих Часть 1

Оптимизация кода сайта — руководство для начинающих Часть 1

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

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

Оптимизация кода сайта — руководство для начинающих Часть 1

У людей ведь ещё меньше терпения, потому, если сайт загружается довольно долго
(либо существенно медленнее нежели у конкурентов), то они элементарно закроют ваш сайт и больше ни разу не посетят его.
Давайте рассмотрим главные методы увеличения скорости загрузки страниц.

Оптимизация кода HTML

Уменьшение размера контента в верхней части кода веб страницы

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

Пример, такой оптимизации

Ежели документ HTML выглядит следующим образом:

<html>
<head>
<link rel=»stylesheet» href=»mystyle.css»>
</head>
<body>
<div class=»prumer»>
Привет, земляни!
</div>
</body>
</html>

а файл стилей mystyle.css имеет следующий вид

.prumer {background-color: yellow;}
.textsite {font-size: 14px; color: #000;}
.blogtext {font-size: 16px; color: red;}

то нужный CSS код можно записать таким образом:

<html>
<head>
<style>
.prumer {background-color: yellow;}
</style>
</head>
<body>
<div class=»prumer»>
Привет, земляни!
</div>
</body>
</html>
<link rel=»stylesheet» href=»mystyle.css»>

В результате файл mystyle.css станет подгружаться после загрузки страницы.

Сжатие пробелов

С помощью соединения повторяющихся пробелов и переносов строчек можно уменьшить окончательный размер страницы и, поэтому, уменьшить время на итоговую загрузку страницы. Данный способ невозможно на прямую применять для следующих тегов: <pre>, <textarea>, <script> и <style>.

Нередко бывает так:

Привет, земляни!<script>// <![CDATA[
var x = ‘Привет, земляни!’;
// ]]></script>Привет, земляни! <pre> Привет, земляни! </pre>

Однако, в результате код можно уменьшить до

<html>
<head>
<title>Привет, земляни!</title>
<script> var x = ‘Привет, земляни!’;</script>
</head>
<body>
Привет, земляни!
<pre>
Привет,
земляни!
</pre>
</body>
</html>

Предварительный резолвинг DNS

С помощью предоставленной оптимизиции вы сможете «сказать» браузеру по каким адресам пребывают внешние ресурсы на предоставленной странице (к примеру, изображения, javascript, файлы стилей). Это позволяет сходу делать преобразование DNS имён.

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

<link rel=»dns-prefetch» href=»http://mc.yandex.ru»/>
<link rel=»dns-prefetch» href=»http://www.google-analytics.com»/>

Удаление домена из URL в атрибутах src и href

Можно уменьшить код Вашего сайта методом преобразования абсолютных URL в условные для атрибутов href и src.

Это смотрится следующим образом: до удаление домена

<html>
<head>
<base href=»http://www.wowit.info/»>
</head>
<body>
<a href=»http://www.example.com/bar»>Анкор </a>
</body>
</html>

После того как мы удалим домен

<html>
<head>
<base href=»http://www.example.com/»>
</head>
<body>
<a href=»bar»>Анкор</a>
</body>
</html>

Оптимизация кода CSS

Оптимизация кода сайта — руководство для начинающих Часть 1

Читайте также

Объединение всех CSS в один файл

Данное деянье позволяет убавить нужное количество HTTP запросов при загрузке страницы.
В особенности важно:

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

Вид, до

<html>
<head>
<link rel=»stylesheet» type=»text/css» href=»css/mystyle1.css»>
<link rel=»stylesheet» type=»text/css» href=»css/mystyle2.css»>
<link rel=»stylesheet» type=»text/css» href=»css/mystyle3.css»>
</head>
<body>
<div class=»blue yellow big bold»>
Привет, земляни!
</div>
</body>
</html>

После

<html>
<head>
<link rel=»stylesheet» type=»text/css» href=»styles/allmystyle.css»>
</head>
<body>
<div class=»blue yellow big bold»>
<pre>Привет, земляни!</pre>
</div>
</body>
</html>

Минимизация CSS

Минимизация файлов стилей состоит в следующем:

  • устранение всех объяснений;
  • устранение пробелов;
  • сокращение название цветов.

К примеру,

<style>
body { background-image: url(«fon.png»); }
/* Этот комментарий будет лишним */
#iddy, .anotherId {
border: solid 1px #cccccc;
padding: 1.5em;
float: left;
color:##ff0000;
}
</style>

Можно сжать до

<style>body{background-image:url((«fon.png»}#iddy,#anotherId{border:solid 1px #ccc;padding:1.5em;float:left;color:red}</style>

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

Следите за нашими статьями и узнавайте больше !

Источник: Wowit.info