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

Раздел: DataLife Engine » Советы по DLE
Как увеличить скорость загрузки сайта

Представляем сегодня на www.dle9.com полезную статью, где мы узнаем: «Как увеличить скорость загрузки сайта». Увеличиваем скорость загрузки сайта DLE с помощью методов сжатия, скриптами и другими полезными модулями. Скорость загрузки страниц интернет площадок является очень важным показателем и влияет на множество факторов, связанны с продвижением сайта. Согласно исследованиям многих интернет ресурсов, к примеру, как "Amazon" увеличение скорости загрузки ресурса положительно сказывается на количестве посетителей, конверсии, на количестве заказов и как следствие на прибыли. Поисковые системы также учитывают скорость загрузки страниц сайта и дают преимущество в органической выдаче сайтам, которые загружаются быстрее. Следуя не хитрым советам, которые мы разберем ниже можно оптимизировать сайт и увеличить скорость загрузки сайта.

Анализ загрузки сайта
Как увеличить скорость загрузки сайта

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

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

Внимание! У вас нет прав для просмотра скрытого текста.
– Удобный онлайн сервис анализа с подробным отчетом схож с GTmetrix есть возможность выбрать быстрый сервер в Стокгольме.

Внимание! У вас нет прав для просмотра скрытого текста.
- онлайн сервис от 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 компрессия онлайн:
Внимание! У вас нет прав для просмотра скрытого текста.

Jаvascript + CSS компрессор:
Внимание! У вас нет прав для просмотра скрытого текста.


Сжимайте картинки в JPG и PNG форматах
Часто можно встретить на сайтах графику в формате PNG, если картинка имеет прозрачность, то как правило она сохраняется с глубиной цвета в 32 бит и может быть сжата в несколько раз. Отличный сервис для сжатия картинок
Внимание! У вас нет прав для просмотра скрытого текста.

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

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



Используйте сжатие статических данных
Проверить включена ли у вас на сайте компрессия
Внимание! У вас нет прав для просмотра скрытого текста.

На некоторых хостинг компаниях по умолчанию не всегда настроено 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>


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

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

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

Здравствуйте!
Подскажите, первый вариант "сжатие статических данных" у меня прописано было так:
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>


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

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

Как это все сделать в одну или две строки

<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">

Представляем сегодня на www.dle9.com полезную статью, где мы узнаем: «Как увеличить скорость загрузки сайта». Увеличиваем скорость загрузки сайта DLE вы найдете всё лучшее у нас форумы, хаки, модули, шаблоны.
  • 100
Рубрика: Все для DLE » Советы по ДЛЕ
Ранее » Степень опасность высокая в версиях DLE 11.1 и ниже
Добавление комментарияОставить комментарий
  • № :1
  • 30 июля 2017 15:12
Спасибо. Интересный материал.