Важным этапом разработки сайта для любого веб-программиста является оптимизация его проекта. Хорошо оптимизированный сайт говорит не только об опыте самого программиста, но и увеличивает коэффициент конверсии, поднимает сайт в результатах выдачи поисковых систем и конечно довольные пользователи.
Так же, большим плюсом является адаптивный дизайн под ПК, планшет и мобильное устройство.
Ведь заинтересованные пользователи, в любой момент захотят посетить сайт с мобильного устройства или планшета, а неадаптивный дизайн не всегда удобно просматривать и конечно, это влияет на поисковую выдачу.
Но, сегодня я хочу рассказать не про адаптивный дизайн и не про поисковые выдачи.
В данной статье, я расскажу про грубые ошибки которые допускают многие веб-разработчики.
Заранее хочу предупредить, что есть очень много факторов влияющих на загрузку сайта. Однако, ниже я опишу самые популярные ошибки и конечно решение этих недочетов.
Начну с сайта joomla-secrets.ru, который в данной статье рассказывает о том, как оптимизировать сайт на Joomla. И давайте заглянем в исходный код этого сайта.
Посмотрели? Все, теперь чистим глаза белизной! И стираем из памяти то, что увидели sudo clear.
И такое тоже никогда не делайте!
Обратимся к WebPageTest и проверим данный сайт.
Ни в коем случае не делайте такого! Даже если вы еще неопытный программист и не можете обойтись без сторонник плагинов, не подключайте таким образом кучу плагинов и стилей! Это очень плохая практика разработки сайтов.
И так, прежде всего вам надо понять, какая разница где подключать скрипты и стили. В качестве примера, я нарисовал схему демонстрирующую загрузку сайта.
Конечно пример «высосан из пальца», но суть думаю ясна. Наш браузер обращается к серверу, который в свою очередь выполняет серверные скрипты и после, выдает браузеру HTML-код страницы и уже выполняет отображение элементов страницы.
Все как-бы просто и ясно, но не забываем про синхронные и асинхронные HTTP-запросы.
Наш браузер подгружает каждый файл поочередно и для того, чтобы сайт загружался быстрей, некоторые программисты используют асинхронные запросы.
К примеру, на некоторых сайтах подгружают изображения, стили и скрипты после того, как загрузится вся страница и тем самым, мы не успеваем обратиться к сайту, как уже видим его содержимое, а это очень радует.
Теперь поговорим о правильном распределении скриптов и стили. Как я говорил выше, наш браузер поочередно загружает каждый файл до самого конца страницы.
_10<!DOCTYPE html>_10<html lang="ru-RU">_10<head>_10 <meta charset="UTF-8">_10 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">_10 <title>Мой сайт</title>_10 <link href="/css/style.min.css" rel="stylesheet">_10</head>
Хорошей практикой, впервую очередь является подгрузка стилей, а потом уже скриптов.
Таким образом, пользователь уже видит контент сайта и далее постепенно подгружаются остальные скрипты.
_10 <script src="/js/main.min.js"></script>_10</body>_10</html>
Вы наверное замечали, что на многих сайтах, скрипты вставляют перед тэгом body. После загрузки стилей и прочих файлов, браузер подгружает уже скрипты. И это есть хорошо!
Еще очень важной задачей оптимизации, является сжатие CSS и JS файлов.
Для этого, я использую JS Compressor и CSS Compressor.
К примеру, сжав CSS-код:
_15body {_15 font-family: 'Roboto Slab';_15 font-size: 16px;_15 background-color: #F8F8F8;_15 color: #323A49;_15}_15_15.wrap {_15 display: block;_15 float: left;_15 width: 100%;_15 height: 100%;_15 opacity: 0;_15 transition: opacity 0.5s;_15}
Получаем такой результат:
_10body{font-family:'Roboto Slab';font-size:16px;background-color:#F8F8F8;color:#323A49].wrap[display:block;float:left;width:100%;height:100%;opacity:0;transition:opacity .5s}
Просто копируем свой код и вставляем в данные утилиты. Результат сохраняем уже в своем файле. Таким образом размер файла уменьшается в 2-3 раза.
А это очень хорошо влияет на загрузку сайта.
(P.S.: Не забываем делать резервную копию своих JS и CSS файлов, на всякие пожарные. Желательно к названию сжатого файла добавлять суфикс .min ).
Или при сжатии такого JavaScript-кода:
_12function insertTag(tag,val) {_12 var Field = $('.content.article-edit .form-group textarea')[0];_12 var val = Field.value;_12 var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);_12 var before_txt = val.substring(0, Field.selectionStart);_12 var after_txt = val.substring(Field.selectionEnd, val.length);_12 if (tag=='list') {_12 Field.value = before_txt + '[' + tag + "]\n\t" + selected_txt + "\n[/" + tag + ']' + after_txt;_12 return false;_12 }_12 Field.value = before_txt + '[' + tag + ']' + selected_txt + '[/' + tag + ']' + after_txt;_12}
Мы получим такой результат:
_10function insertTag(t,n){var e=$(".content.article-edit .form-group textarea")[0],n=e.value,i=n.substring(e.selectionStart,e.selectionEnd),l=n.substring(0,e.selectionStart),r=n.substring(e.selectionEnd,n.length);return"list"==t?(e.value=l+"["+t+"]\n"+i+"\n[/"+t+"]"+r,!1):void(e.value=l+"["+t+"]"+i+"[/"+t+"]"+r)}
Так же, не мало важным является асинхронная загрузка JS файлов. Смысл асинхронной загрузки в том, что эти скрипты будут подгружаться после полной загрузки страницы.
Для этого, к тэгу script добавляем свойство async.
_10<script async src="/js/main.min.js"></script>
Однако, тут есть и свои минусы.
Сайт может работать неправильно, если у вас к примеру наверху стоит слайдер или встречная часть сайта работает с каким-то скриптом.
И тогда, при использовании асинхронной подгрузки скрипта, тот же слайдер будет в начале отображен криво, а после прогрузки страницы, слайдер примет свой вид.
Как я говорил, не пихайте 100500 ссылок на файлы JS и CSS в head как на фото выше. Все ваши стили сжимайте и сохраните в CSS файл, так же с JS.
Конечно некоторым разработчикам удобно хранить стили в разных файлах и подгружать каждый там, где им нужно. Но будет глупо делать так же, как делает joomla-secrets.ru.
Они подгружают эти все стили в каждой странице:
_15<link rel="stylesheet" href="/plugins/system/rokbox/assets/styles/rokbox.css" type="text/css" />_15<link rel="stylesheet" href="/cache/widgetkit/widgetkit-36de55ca.css" type="text/css" />_15<link rel="stylesheet" href="/libraries/gantry/css/grid-responsive.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/bootstrap.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/master-d0afa82797c36263599c814319e96ded.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css/master-webkit.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/demo-d0afa82797c36263599c814319e96ded.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/mediaqueries.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/grid-flexbox-responsive.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/menu-dropdown-direction.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/animate.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/odometer.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/menu.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/roksprocket/layouts/quotes/themes/default/quotes.css" type="text/css" />_15<link rel="stylesheet" href="/templates/rt_cygnet/roksprocket/layouts/features/themes/showcase/showcase.css" type="text/css" />
Можно из этого всего, сделать один CSS-файл:
_10<link rel="stylesheet" href="/plugins/system/rokbox/assets/styles/styles.min.css" type="text/css" />
Вы наверное спросите почему ставят .min.css? Это обычно делают для того, чтобы мы не путались с файлами и знали, какой файл со стилями является сжатым, то есть минимизированным - minzed.
Если объединить все эти файлы в один, то это хорошо повлияет на загрузку сайта. Однако, тут всё зависит еще от того, какой у вас тип протокола HTTP. Если вы используете на своем сервере протокол HTTP/2, то разумно уже делить файлы по частям, а не сохранять все в одну кучу. Вот хорошая статья, в которой объясняется будущее загрузки CSS
Наверное вы заметили, что мой блог плавно появляется после загрузки сайта. Я конечно делал это не только для красоты, но и для того, чтобы вы не видели сайт в кривом варианте при загрузке.
У меня есть два скрипта: jquery.js и main.js. Библиотека подгружается синхронно, а уже основные скрипты загружаются асинхронно. Это я сделал для того, чтобы прогрузились все скрипты и стили, а потом уже выполнился скрипт для отображения контента сайта.
Не забываем про то, что можно сжать HTML код, для оптимизации сайта. Иногда, это играет тоже огромную роль, тут зависит от размера кода. В моем случае, я не стал сжимать HTML код блога.
К примеру, код:
_10<ul>_10 <li><a onclick="nav.go('/',event);" href="/">Главная</a></li>_10 <li></li>_10 <li><a onclick="nav.go('https://archakov.im/about',event);" href="https://archakov.im/about">Обо мне</a></li>_10 <li></li>_10 <li><a onclick="nav.go('https://archakov.im/about#contacts',event);" href="https://archakov.im/about#contacts">Контакты</a></li>_10 <li></li>_10 <li><a href="mailto:[email protected]">[email protected]</a></li>_10</ul>
Можно сжать в одну строку, удалив оттуда табуляции и переносы строк:
_10<ul><li><a onclick="nav.go('/',event);" href="/">Главная</a></li><li></li><li><a onclick="nav.go('https://archakov.im/about',event);" href="https://archakov.im/about">Обо мне</a></li><li></li><li><a onclick="nav.go('https://archakov.im/about#contacts',event);" href="https://archakov.im/about#contacts">Контакты</a></li><li></li><li><a href="mailto:[email protected]">[email protected]</a></li></ul>
В общем, пока это все. В следующей статье я продолжу тему оптимизации и покажу еще несколько ошибок, которых не стоит делать.