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