Как сделать параллельную загрузку браузером css, js, img с поддоменов для ускорения сайта на prestashop
Если Вы на этой странице, то наверно уже знаете про два разных протокола передачи данных браузера. Это HTTP 1.1 и HTTP/2. Отличие их основное то, что последнее не открытое, зашифрованное, и то что протокол HTTP/2 загружает в несколько потоков. Не по очереди в ряд как протокол HTTP 1.1.
Оглавление
Мультипоточная загрузка сайта
Данный способ о котором я напишу, на данный момент, подходит для нагруженных сайтов. Сайты, которые хотят подключить CDN (сети доставки контента). Это даст одновременную загрузку отдельно картинок, скриптов и стилей и получать их с самих ближайших серверов от пользователя. К примеру у Вас хостинг в Питере, а Юзер, который зашел на Ваш сайт во Владивостоке. Все css, js, img Вашего сайта погрузятся ему с серверов находящиеся во Владивостоке.
Данное реализация, это самое идеальное решение. Жаль что не самое дешевое. Если нет CDN, можно подключить с поддоменов основного сайта. При протоколе HTTP 1.1 это было единственное решение увеличение загрузки сайта. Даже на сегодня, многие сайты с HTTPS (HTTP/2) подгружают стили, картинки с несколько серверов.
В данной статье я опишу только как это использовать подредактировав код на Prestashop 1.6
Если вы знаете PHP на уровне Junior, думаю сможете реализовать на любой CMS.
Загрузки стилей картинок с поддомена сайта, для ускорения
для картинок делаем правку в мойсайт.ru/public_html/classes/Link.php
блок в заранее закомментировать, к примеру:
/*меняем url картинок*/
…
/*меняем url картинок*/
примерно на строке 438 ищем такую строку
return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path;
вместо нее ставим строку
return ‘http://img.goostore.ru’.$uri_path; // в данном случае у Вас основной домен goostore.ru, а jpg изображения будут подгружаться с поддомена img.goostore.ru, в моем случае магазин был с несколько поддоменами — мультимагазин.
Когда подключился в CDN, я выбрал из предложений данную компанию https://www.cdnvideo.ru/.
Она показалась не такой дорогой как её конкуренты, и рассматривали сайты на поддоменах не как отдельно ресурсы, а как один проект. В общем рекомендую. Реклама не за деньги, без рефералок)
У меня подключение выглядело так:
А код выглядел вот так:
Загрузки стилей CSS с поддомена сайта, для ускорения
Тут я изменял файлы goostore/public_html/classes/controller/FrontController.php и goostore/public_html/classes/controller/Controller.php
в FrontController.php есть два блока кода ограниченные комментарием
/*****начало блока — переписываем url css и js на поддомены*****/
……
…..
/*****конец блока — переписываем url css и js на поддомены*****/
На строках примерно 622 и 735.
После каждого блока кода передаются в шаблон переменные с помощью конструкции
$this->context->smarty->assign(array(
…..
…..
));
там найдете комментарий //передаем переменную $css_linking в массив css_files
раньше было ‘css_files’ => $this->css_files
Сейчас стоит ‘css_files’ => $css_linking
Вот скриншоты двух блоков. Параллельная загрузка с поддоменов.
Первый блок:
Второй блок:
Вот скриншоты двух блоков. Параллельная загрузка с поддоменов CDN.
Первый блок:
Второй блок:
в Controller.php так же ограничил два блока комментариями на строчках примерно 328 и 434
/*****начало блока — переписываем url css и js на поддомены*****/
……
…..
/*****конец блока — переписываем url css и js на поддомены*****/
Вот скриншоты двух блоков. Параллельная загрузка с поддоменов.
Первый блок:
Второй блок:
Вот скриншоты двух блоков. Параллельная загрузка с поддоменов CDN.
Первый блок:
Второй блок:
Ну вот и все.
В общем получились правки в двух файлах, в каждом файле в двух местах. Js стили не были подключены к CDN на скриншотах обратите внимание. Такая была специфика моего сайта. Конечно javascript лучше тоже подключить к системе раздачи контента.
На момент написание я отключил загрузку с CDN и оставил просто от соседних доменных сайтов. Так как планировал масштабный апдейт сайта.
Загрузка...