→ 10 способов сделать ваш сайт быстрее

10 способов сделать ваш сайт быстрее

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

Не смотря на то, что с каждым днем и увеличивается пропускная способность каналов связи, - это не значит, что можно делать сайт очень «тяжелым», оставляя неприятный осадок у пользователя сайта. Хочется выделить 10 основных пунктов, при соблюдении которых, ваш сайт будет загружаться не заметно для пользователя. И так приступим:

 1. Для того чтобы сайт загружался быстрее необходимо помнить, что все отступы и комментарии в HTMLфайлы нужны только вам, браузер игнорирует их, но тратит время на загрузку. Например, плохой код для скорости:

<!-- Это Меню -->
<menu><li><ahref="#">Пункт1</a></li> \\ Первый пункт меню с ссылкой
<li><ahref="#">Пункт2</a></li> >\\ Второй пункт меню с ссылкой
<li<ahref="#"> Пункт3</a></li> \\ Третий пункт меню с ссылкой
</menu>

Хороший код для скорости:

 <menu><li><a href="#">Пункт1</a></li> <li><a href="#"> Пункт2</a></li><li<a href="#"> Пункт3</a></li> </menu>

2.  Загружайте JavaScript’s асинхронно, если нет необходимости в его работе до загрузки всей странички сайта. 
<scriptsrc="player.js"></script>- пока не загрузится скрипт браузер не продолжит дальнейшую обработку кода.
<scriptasyncsrc="player.js"></script>- браузер «поставит на загрузку» скрипт и продолжит обработку кода странички. Важно помнить, что если таких скриптов несколько, необязательно, что они загрузятся в той последовательности, в которой были указаны коде.

3.  Избавьтесь от комментариев, отступов и тому подобного в css файле, для этого можно использовать специальные инструменты. Если вы используете динамические стили на подобии Less и Sass, можно настроить их так, чтобы при загрузке сайта стили выдавались уже сжатыми. 

 4. Не стоит использовать для каждой части сайта отдельный css файл. Браузер может иметь ограничение на одновременную загрузку файлов, из-за чего стили могут грузиться поочередно, что займет гораздо больше времени, по сравнению с одним файлом стилей.

5. Используйте сторонний контент асинхронно. Вы не можете гарантировать, что какой-нибудь сторонний сайт в данный момент не «лежит» или не заблокирован системным администратором сети пользователя сайта. Да или просто напросто заблокирован Роскомнадзором в связи с новым законом.

6. Не забывайте оптимизировать работу и JavaScript файлов. Ведь, например, каждая лишняя итерация цикла или повторное вычисление констант в каждой итерации пагубно скажется на скорости работы скрипта в общем.

 7. ContentDeliveryNetwork (CDN) - установите самостоятельно сеть серверов/ купите готовое решение/ используйте бесплатное решение, - не важно главное используйте, вся суть CDN это распределение нагрузки между синхронизированными серверами, которые балансируют нагрузку на сервера и в зависимости от географического положение, пропускной способности и многих других параметров выбирают с какого сервера дать пользователю требуемый контент на максимальной скорости, поэтому, даже если у вас не получается увеличить скорость посредством избавления от всего не нужного контента, можно компенсировать это системой CDN, утрируя, если сервер будет стоять в соседней комнате от пользователя он не заметит загрузки много мегабайтной странички с сервера.

 8. Архивируйте всё! Сервер, при помощи gzip, может сжать весь контент до отправки браузеру, а браузер «на лету» всё декодирует и отображает пользователю в обычном виде. Включается сжатие файлов на стороне сервера, например для Apache, необходимо внести изменения в файл «.htaccess»: AddOutputFilterByType DEFLATE text/css

 9. Станьте Королём кэша! Браузер по умолчанию сам контролирует, сколько хранить кэш на компьютере пользователя, но можно исправить эту ситуацию, и контролировать время хранения кэша самостоятельно, например, в Apache достаточно добавить в .htaccess несколько строчек:

ExpiresActiveOnExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"

Тем самым продлив время кэширования, в нашем случаи, на месяц, но важно не забывать, что даже при изменение файла он не будет загружаться заново чтобы загрузить файл принудительно можно добавлять в имя файла версию, например, style-v1.css либо использовать параметр GET.

 10. Последним пунктом, но не последним по значимости, необходимо отметить инструменты для диагностики и проверки скорости загрузки сайта, например, при помощи расширений YSlow и PageSpeed(имеется также веб-версия). Можно получить хорошую инфографику загрузки страницы и работать в сторону её улучшения.

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

 devicehit.ru


Теги: ускорение сайта

Читайте также по теме статьи «10 способов сделать ваш сайт быстрее»:


Актуально