/ / Увеличиваем скорость загрузки сайта
июнь 21 2017

Увеличиваем скорость загрузки сайта

Увеличиваем скорость загрузки сайта

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

Анализ загрузки сайта


Сервисы для анализа:

https://gtmetrix.com – онлайн сервис для анализа производительности сайта с подробным отчетом и рекомендациями по устранению проблем. Минусом данного сервиса является то что ближайший сервер к РФ находится в Лондоне (выбор серверов доступен после регистрации).

https://tools.pingdom.com – Удобный онлайн сервис анализа с подробным отчетом схож с GTmetrix есть возможность выбрать быстрый сервер в Стокгольме.

https://developers.google.com/speed/pagespeed/insights/ - онлайн сервис от Google который проведет анализ вашего сайта как для компьютеров, так и готовность для мобильных устройств. Сервис на русском дает рекомендации что и как исправить для наилучшей работы вашего сайта.

Уменьшаем количество HTTP-запросов (актуально для протокола HTTP 1.1)


На сегодняшний день большинство сайтов работают на протоколе HTTP 1.1 разработанном еще в 1999 году. Протокол имеет ограничение на количество одновременных подключений, что является узким горлышком и в случаи если на сайте много материалов (скриптов, картинок, стилей) такой сайт может достаточно долго загружаться даже если у клиента высокоскоростной канал доступа в интернет.

Следуя рекомендациям поисковых систем и спецификациям протокола HTTP/1.1 нам требуется сократить количество запросов к веб серверу. Каждая подгрузка файла (скрипта, картинки, стиля) является обращение к серверу.

Рассмотрим несколько способов как сократить запросы к серверу:

1. Объединение нескольких файлов в один.

Если мы посмотрим на исходный код страницы в раздел head, то можем увидеть примерно следующий код:

<link href="{THEME}/css/engine.css" type="text/css" rel="stylesheet">
<link href="{THEME}/css/styles.css" type="text/css" rel="stylesheet">
Данный код можно обьединить в одну строку и сжать его средствами DLE, заменив данный код на:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/engine.css,{THEME}/css/styles.css" />
Ваши два файла будут обьеденены в один и сжаты посредством GZIP сжатия. Тоже самое можно проделать и с JS файлами.

2. Объединение картинок в спрайт

Несколько изображений располагаются в одном графическом файле. Далее, чтобы разложить его на несколько изображений, применяется ограничение размеров изображения по размеру одного спрайта в атласе, и сдвиг background-position атласа на значение, кратное высоте изображения. Таким образом, один файл может обеспечить иконками весь сайт.


Например, у нас есть картинка размером 968x242 точек из 16 спрайтов по 8 в верхнем и нижнем ряду. Размер данных спрайтов составляет 121x212 точек, тогда для вывод первого спрайта разметка будет выглядеть так:

HTML:
<div class="img2"><div>
CSS:
.img1 {
    background: url("/ваш_путь/sprite.png") 0px 0px;
    width: 121px;
    height: 121px;
    display: inline-block;
}
background: 0px (ось X) 0px (ось Y) этим свойством мы выводим часть нашего спрайта размером 121x121px от верхнего левого угла, таким образом для вывода второго спрайта верхнего ряда нам нужно сместить координаты вправо на 121px.

HTML:
<div class="img1"><div>
CSS:
.img2 {
    background: url("/ваш_путь/sprite.png") 0px 121px;
    width: 121px;
    height: 121px;
   display: inline-block;
}
Для вывода спрайтов нижнего ряда нам требуется сместиться на -121px по оси Y

HTML:
<div class="img3"><div>
CSS:
.img3 {
   background: url("/ваш_путь/sprite.png") 0px -121px;
   width: 121px;
   height: 121px;
   display: inline-block;
}

Протокол HTML /2

Увеличить скорость загрузки сайта можно используя более совершенный протокол HTTP /2. Мультиплексирование позволяет браузеру выполнять множество запросов в рамках одного TCP-соединения снижая нагрузку на сервер:

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

Сервер статики CDN (Content Delivery Network)

Если на ваш сайт заходят посетители из разных стран и регионов вы получите наибольшую выгоду от использования CDN. Идея заключается в том, чтоб отдавать посетителю сайта статические файлы на максимальной скорости и избавить сервер виртуального хостинга от не свойственной для него задачи. Такое решение позволит увеличить скорость загрузки картинок, скриптов, стилей и т.д. Наиболее простым и бесплатным в использовании является сервис https://www.cloudflare.com

Хостинг в вашем городе или регионе

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

Сжимайте Java-скрипт код и стили CSS

Jаvascript выполняется при каждом просмотре страницы, вы можете уменьшить размер Jаvascript, удалив все незаполненное пространство.

Jаvascript компрессия онлайн: http://jаvascriptcompressor.com/
Jаvascript + CSS компрессор: http://refresh-sf.com/

Сжимайте картинки в JPG и PNG форматах

Часто можно встретить на сайтах графику в формате PNG, если картинка имеет прозрачность, то как правило она сохраняется с глубиной цвета в 32 бит и может быть сжата в несколько раз. Отличный сервис для сжатия картинок https://tinypng.com/

Вынесите jаvascript в конец страницы

При использовании внешних скриптов с ресурсов типа Tweetmene, Mail.ru и т.д. если скрипты расположены в разделе head скорость может упасть или загрузка может подвисать. Для решения этого вынесите доступные скрипты вниз страницы, это также позволит пользователю увидеть содержание страницы до загрузки скриптов. Например:

{jsfiles}
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
</body>

Используйте сжатие статических данных

Проверить включена ли у вас на сайте компрессия https://varvy.com/tools/gzip/
На некоторых хостинг компаниях по умолчанию не всегда настроено G-Zip сжатие данных. Если у вас на хостинге используется Apache сервер, вы можете попробовать самостоятельно включить сжатие данных, для этого в файл .htaccess который находится в корне сайта попробуйте перед директивой RewriteEngine On вставить следующий код:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Вариант 2:
<IfModule mod_headers.c>
    # Serve gzip compressed CSS files if they exist 
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

    # Serve gzip compressed JS files if they exist 
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]

    # Serve correct content types, and prevent mod_deflate double gzip.
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
    RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]

    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header append Content-Encoding gzip

      # Force proxies to cache gzipped & 
      # non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>

Вариант 3
<IfModule mod_gzip.c>
	mod_gzip_on         Yes
	mod_gzip_dechunk    Yes
	mod_gzip_item_include file		\.(html?|txt|css|js|php|pl)$
	mod_gzip_item_include mime		^text\.*
	mod_gzip_item_include mime		^application/x-javascript.*
	mod_gzip_item_exclude mime		^image\.*
	mod_gzip_item_exclude rspheader	^Content-Encoding:.*gzip.*
</IfModule>

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

На этом пока все. Удачи вам и хорошего настроения. Подписывайтесь на нашу страницу в социальной сети "Вконтакте" https://vk.com/dlepage

Комментарии

Video-Magnet

Video-Magnet

23 июня 2017 17:02 Клиенты
5
Я заметил что ещё сайт нагружают: счетчики метрик - метрика яндекс: точнее Вебвизор постоянно сканирует перемещение курсора по сайту экрана, виджеты групп соц. сетей, виджеты социальных кнопок, и оригинальный плеер Ютуб очень долго загружается.
Дмитрий6

Дмитрий6

24 июня 2017 12:08 Клиенты
0
Здравствуйте!
Подскажите, первый вариант "сжатие статических данных" у меня прописано было так:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/jаvascript text/css application/x-jаvascript и т.д.

То есть как-бы сокращенный вариант, или все прописывать по отдельности?

И кеш браузера тоже надо перед директивой RewriteEngine On прописывать. И такая запись правильная?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 604800 seconds"
ExpiresByType application/jаvascript "access plus 604800 seconds"
ExpiresByType text/jаvascript "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType text/x-jаvascript "access plus 604800 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# Cache-Control
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</filesMatch>
# 1 день
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=604800, private, must-revalidate"
</filesMatch>
</ifModule>
celsoft

celsoft

24 июня 2017 22:04 Администраторы
0
Цитата: Дмитрий6
То есть как-бы сокращенный вариант, или все прописывать по отдельности?

Этот как вам удобней, разницы никакой нет, можно и так и так.

Цитата: Дмитрий6
И кеш браузера тоже надо перед директивой RewriteEngine On прописывать.

Да. Все прописывается перед этой строчкой.

Цитата: Дмитрий6
И такая запись правильная?

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

gamid03081988

5 июля 2017 22:45 Клиенты
0
Привет всем. Как это все сделать в одну или две строки

<link type="text/css" rel="stylesheet" href="{THEME}/css/reset.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/main.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/engine.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/shortcode.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/fonts.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/colors.css" />
<link type="text/css" rel="stylesheet" href="{THEME}/css/responsive.css" />
Дмитрий6

Дмитрий6

6 июля 2017 01:54 Клиенты
0
Цитата: gamid03081988
Привет всем. Как это все сделать в одну или две строки

<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/reset.css,{THEME}/css/main.css,{THEME}/css/engine.css,{THEME}/css/shortcode.css,{THEME}/css/fonts.css,{THEME}/css/font-awesome.min.css,{THEME}/css/colors.css,{THEME}/css/responsive.css" />

Если сайт на HTML5 то можно убрать type="text/css" и слеш / на конце строки. Пример:

<link rel="stylesheet" href="/engine/classes/min/index.php?f={THEME}/css/reset.css,...,{THEME}/css/responsive.css">
gamid03081988

gamid03081988

22 июля 2017 21:24 Клиенты
0
Цитата: Дмитрий6
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/reset.css,{THEME}/css/main.css,{THEME}/css/engine.css,{THEME}/css/shortcode.css,{THEME}/css/fonts.css,{THEME}/css/font-awesome.min.css,{THEME}/css/colors.css,{THEME}/css/responsive.css" />

Если сайт на HTML5 то можно убрать type="text/css" и слеш / на конце строки. Пример:

<link rel="stylesheet" href="/engine/classes/min/index.php?f={THEME}/css/reset.css,...,{THEME}/css/responsive.css">



Когда делаю все в одну строку
<link rel="stylesheet" href="/engine/classes/min/index.php?f={THEME}/css/reset.css,{THEME}/css/main.css,{THEME}/css/engine.css,{THEME}/css/shortcode.css,{THEME}/css/fonts.css,{THEME}/css/font-awesome.min.css,{THEME}/css/colors.css,{THEME}/css/responsive.css">

Почему то потом у меня адаптивность теряется и сайт бывает обычный. Что делать как исправить ?
celsoft

celsoft

24 июля 2017 06:12 Администраторы
0
Цитата: gamid03081988
Почему то потом у меня адаптивность теряется и сайт бывает обычный. Что делать как исправить ?

Скорее всего в каких то файлах у вас синтаксические ошибки, которые при сжатии файлов, приводят в неработоспособность целые блоки стилей. Проверьте файлы своих стилей на CSS валидаторе и устраните ошибки.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Календарь
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31 
Опрос на сайте
Совершаете ли вы покупки в интернет?

Популярные новости
Архив новостей
Июль 2017 (1)
Июнь 2017 (1)
Апрель 2017 (3)
Март 2017 (2)
Февраль 2017 (1)
Январь 2017 (1)