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

[?Mafiozi?]

На сегодняшний день скорость загрузки сайта является одним из важных показателей и влияет на множество факторов и даже на поисковую выдачу. Согласно исследованиям таких компаний, как 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, то можем увидеть примерно следующий код:

Данный код можно обьединить в одну строку и сжать его средствами DLE, заменив данный код на:

Ваши два файла будут обьеденены в один и сжаты посредством GZIP сжатия. Тоже самое можно проделать и с JS файлами.

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

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

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

HTML:

CSS:

.img1 {
    background: url("/ваш_путь/sprite.png") 0px 0px;
    width: 121px;
    height: 121px;
    display: inline-block;
}

background: 0px (ось X) 0px (ось Y) этим свойством мы выводим часть нашего спрайта размером 121x121px от верхнего левого угла, таким образом для вывода второго спрайта верхнего ряда нам нужно сместить координаты вправо на 121px.

HTML:

CSS:

.img2 {
    background: url("/ваш_путь/sprite.png") 0px 121px;
    width: 121px;
    height: 121px;
   display: inline-block;
}

Для вывода спрайтов нижнего ряда нам требуется сместиться на -121px по оси Y

HTML:

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}

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

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

  # 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

Вариант 2:

    # 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]

    
      # 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
    

Вариант 3

	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.*

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

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

Let's block ads! (Why?)

Далее