0

Добрый день.

Есть лендинг http://stage.acservis.com.ua/ Однако он грузится за 3-5-6 секунд. Как ускорить возможно процесс загрузки? Кеширование уже подключил. Что еще можно предпринять?

3
  • у меня и секунды не прошло загрузился 19 окт 2016 в 11:14
  • 1
    вообще попробуй gzip сжатие и оптимизировать css && js код, на случай можно включить оптимизацию html, жать картинки, некоторые библиотеки подгружать асинхронно или использовать cdn 19 окт 2016 в 11:17
  • 1
    сервис гугла по измерению скорости, очень доволен вашим сайтом: developers.google.com/speed/pagespeed/insights/…
    – spectre_it
    19 окт 2016 в 11:29

1 ответ 1

1

У тебя много картинок, для загрузки каждой устанавливается новое соединение. Это дорого.

Предлагаю:

  1. Сделать картинки спрайтами. Ты создаёшь, одну составную картинку из всех своих картинок. И с помощью css правил отображаешь, в нужной тебе части сайта, нужный кусок твоей сборной картинки. https://habrahabr.ru/post/159027/ - CSS спрайты: основные техники и полезные инструменты

  1. Собери весь свой код js в один файл --> минифицируй его. Тоже сократит количество сетевых запросов и немножко увеличится скорость.

  1. Загружай шрифты оптимизированно. Способов много, один из примеров

  1. Эфективно кешируй, все возможные ресурсы

<ifModule mod_expires.c>

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive On
ExpiresDefault "access plus 5 seconds"

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache Fonts
ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
ExpiresByType application/x-font-woff "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache other content types (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

</ifModule>

<ifModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

</ifModule>

5
  • Спасибо. Про шрифты вообще интересно. Почитаю. Картинки не все можно сделать спрайтами, но те, которые можно - попробуем - посмотрю на сколько выростет скорость.
    – Platon
    19 окт 2016 в 11:42
  • Также еще как вариант может быть вынести картинки на поддомен - это ускорить сможет? За счет того, что домен будет другой.
    – Platon
    19 окт 2016 в 11:42
  • @Platon согласен, спрайтами обычно делают маленькие изображения. если картинка большая нет смысла добавлять в спрайт её. полностью согласен с Вами. Насчёт другого домена для картинок не подскажу, не знаю ускорит или нет. Думаю что нет.
    – spectre_it
    19 окт 2016 в 12:26
  • В любом случае спасибо за подсказки. Есть над чем подумать.
    – Platon
    19 окт 2016 в 12:40
  • @Platon такой вариант ещё, с preconnect, prefetch, prerender, preloading… ymatuhin.ru/front-end/html5-link-prefetch
    – spectre_it
    30 окт 2016 в 6:56