Как сделать параллельную загрузку браузером css, js, img с поддоменов для ускорения сайта на prestashop

Если Вы на этой странице, то наверно уже знаете про два разных протокола передачи данных браузера. Это HTTP 1.1 и HTTP/2. Отличие их основное то, что последнее не открытое, зашифрованное, и то что протокол HTTP/2 загружает в несколько потоков. Не по очереди в ряд как протокол HTTP 1.1.

Мультипоточная загрузка сайта

Данный способ о котором я напишу, на данный момент, подходит для нагруженных сайтов. Сайты, которые хотят подключить CDN (сети доставки контента). Это даст одновременную загрузку отдельно картинок, скриптов и стилей и получать их с самих ближайших серверов от пользователя. К примеру у Вас хостинг в Питере, а Юзер, который зашел на Ваш сайт во Владивостоке. Все css, js, img Вашего сайта погрузятся ему с серверов находящиеся во Владивостоке.

CDN как устроен

Данное реализация, это самое идеальное решение. Жаль что не самое дешевое. Если нет 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/.

Она показалась не такой дорогой как её конкуренты, и рассматривали сайты на поддоменах не как отдельно ресурсы, а как один проект. В общем рекомендую. Реклама не за деньги, без рефералок)

У меня подключение выглядело так:

параллельная загрузка с поддомена CDN

А код выглядел вот так:

cdn видео подключение

Загрузки стилей 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

Возможно Вам будет интересно:  Добавляем JavaScript, чтоб при наведении на картинку цвета текстуры - картинка увеличилась.

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

Первый блок:Первый блок загрузка css и js с другого домена

Второй блок:Второй блок загрузка css и js с другого домена

Вот скриншоты двух блоков. Параллельная загрузка с поддоменов CDN. 

Первый блок:

 Если погрузка с CDN первый блок

Второй блок:

Если погрузка с CDN первый блок

в Controller.php так же ограничил два блока комментариями на строчках примерно 328 и 434
/*****начало блока — переписываем url css и js на поддомены*****/
……
…..
/*****конец блока — переписываем url css и js на поддомены*****/

 

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

Первый блок:

Первый блок на поддоменах мультипоточная загрузка

Второй блок:

Второй блок на поддоменах мультипоточная загрузка

Вот скриншоты двух блоков. Параллельная загрузка с поддоменов CDN. 

Первый блок:

Первый блок для CDN

Второй блок:

Второй блок_CDN

Ну вот и все.

В общем получились правки в двух файлах, в каждом файле в двух местах. Js стили не были подключены к CDN на скриншотах обратите внимание. Такая была специфика моего сайта. Конечно javascript лучше тоже подключить к системе раздачи контента.

На момент написание я отключил загрузку с CDN и оставил просто от соседних доменных сайтов. Так как планировал масштабный апдейт сайта.