На какой технологии или плагине работает подгрузка блока контента на сайте?

Question

[spido]

Приветствую!
Мой сайт работает на PHP 7.4, javascript, jQuery, HTML, CSS.
Есть задача ускорить загрузку страницы, разделив страницу на блоки, который будут подгружаться в определённой последовательности.
Я посмотрел несколько технологичный сайтов и обнаружил, что эти сайты применяют очень похожие принципы загрузки страницы.
Сначала загружается верхний и нижний блок страницы, а потом центральный блок с контентом.
Вот пример:
https://www.wildberries.ru/catalog/elektronika
- при нажатии на ссылку категории, в меню слева, сначала подставляется ссылка в адресную строку, а потом подгружается блок с контентом и бок с меню слева. Верхний и нижние блоки не перезагружаются.
- пагинация так же реализована, как и при нажатии на ссылку категории.

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

Заранее, спасибо!

Comments

[dollar]

Не забудьте про <noscript>, ибо не у всех пользователей вообще включён js, так что это хоть и маленький, но отток аудитории.

Answer 1

[Sanes]

Ajax это называется.

Comments

[spido]

Вы уже решали такую задачу только на Ajax? Получилось?

[wadowad]

spido, ajax - это всего лишь технология, с помощью которой загружается контент в блок. Нужно понимать, что кроме подгрузки требуется написать то, что будет каким-либо образом генерировать html. Говоря проще, одним аяксом тут никак не отделаться. На данном этапе Вам всего скорее нужно смотреть в сторону кэширования.

Answer 2

[ThunderCat]

Подскажите примеры плагинов

Для чего плагины то? Для фотошопа?

- при нажатии на ссылку категории, в меню слева, сначала подставляется ссылка в адресную строку, а потом подгружается блок с контентом и бок с меню слева. Верхний и нижние блоки не перезагружаются.

Это называется SPA, так же работает например вк, фликер и еще куча сайтов.

Есть задача ускорить загрузку страницы, разделив страницу на блоки, который будут подгружаться в определённой последовательности.

Это не всегда ведет к увеличению скорости загрузки, и бОльшая часть таких сайтов имеет иные цели и более веские причины для этого, то есть это не сильвер буллет, а осознанный выбор под определенную задачу, где скорость отрисовки не самый важный показатель. Возможно в вашем случае достаточно будет подключить лэзи лоад, и оптимизировать другие параметры загрузки, вместо не совсем подходящего вам функционала (например, вполне понятно что текст хтмл содержимого занимает в байтах в стони раз меньше чем изображения, и логично что легче и эффективнее откладывать только загрузку картинок, а не кусков хтмля).

Answer 3

[russeljo]

Подгрузка блоков в определенной последовательности - это отложенная загрузка(lazy load).
Когда при нажатии на ссылку меняется адрес в адресной строке, но страница фактически не перезагружается, а меняется контент страницы , то это - SPA(single page application). Это можно сделать и на чистом js, но сейчас для этого есть js-фреймворки, react, например.