Как пользователи, так и поисковые системы не любят долго ожидать пока загрузится Ваш сайт, потому, вы обязаны уменьшить время его загрузки до самого возможного минимума. В этом Вам поможет оптимизация кода Вашего сайта.
Не считая этого, у поисковых систем имеется ограничение по времени индексации вашего интернет-сайта. Потому, Гугл добавил параметр скорости загрузки сайта как один из важных факторов ранжирования. Иными словами, если ваши странички не загружаются довольно быстро, то ваш сайт имеет возможность существенно просесть в позициях.
У людей ведь ещё меньше терпения, потому, если сайт загружается довольно долго
(либо существенно медленнее нежели у конкурентов), то они элементарно закроют ваш сайт и больше ни разу не посетят его.
Давайте рассмотрим главные методы увеличения скорости загрузки страниц.
Оптимизация кода 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
Объединение всех 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