Delayed loading of blocks on the landing page?

Question

JavaScript

Hello! I'm a coder in a company that develops landing pages. And analytics requires me to load sites in one or two seconds, which is almost impossible with designs like landing pages (a long, multi-block site that is replete with pictures and effects). And I decided to make a delayed loading of blocks.
Here is the code:

Репозиторий выглядит так:
project
|--build
|   |--js
|      |--scripts.js
|--parts
|   |--file1.inc.php
|   |--file3.inc.php
|   |--...
|--index.php

HTML:
  первый блок
  второй блок
  третий блок
  <div class="ajax-load" id="file1"></div>
  <div class="ajax-load" id="file2"></div>

JS:
//  ******************* Ajax page partials load *******************
var ajaxPath = '../../parts/';
var ajaxExtension = '.inc.php';
var ajaxId = $('.ajax-load').first().attr('id');

//Инициализация при прокрутке
$("#load-start").waypoint(function(direction){
  if(direction !== 'up'){
    $('.ajax-load').first().load(
      ajaxPath + ajaxId + ajaxExtension, 
      function( response, status, xhr ) {
        if ( status == "error" ) {
          var msg = "Произошла ошибка, пожалуйста обновите страницу!";
          $( "#" + $(this).attr(id) ).html("<h2 class='ajax__error'>" + msg + "</h2>");
        }else{
          nextId = $(this).next('.ajax-load').attr('id');
          ajaxLoader(nextId);
        }
      }
    );
  }
}, { offset: 600 });

//Рекурсивная функция подгрузки блоков
function ajaxLoader(id){
  $('#' + id).load(
    ajaxPath + id + ajaxExtension, 
    function( response, status, xhr ) {
      if ( status == "error" ) {
        var msg = "Произошла ошибка, пожалуйста обновите страницу!";
        $( $(this) ).html("<h2 class='ajax__error'>" + msg + "</h2>");
      }else{
        nextId = $(this).next('.ajax-load').attr('id');
        ajaxLoader(nextId);
      }
    }
  );
}
//  ******************* Ajax page partials load *******************

The logic is as follows:
I wrote a recursive ajaxLoader function in jquery that is called when scrolling is initialized (by the waypoint plugin). And it starts calling itself until the blocks with the ajax-load class run out. At least I wanted to do this =), the code is raw and you can still cut it and cut it, if there are errors, please unsubscribe.

The advantages are that only the first two or three blocks are loaded for the client at first, which affects the speed of displaying the site.

And now the question! Is it correct to upload files this way? It happens that the Internet speed is bad and js is not loaded and the whole site turns out to be a curve.

Maybe someone knows other ways, more reliable. Since I am a junior, I think there are more experienced comrades who have already encountered such problems and solved them.

Answer 1

Although I’m not even a junior, you won’t save almost anything on loading blocks, but loading pictures has been completely postponed.
Google image lazy load
For example, here is a plugin
www.appelsiini.net/projects/lazyload

Answer 2

Why in your company the issue of site performance is only within the competence of the layout designer?

Answer 3

We load all the static at the end of the file. first, html will load, then css, js is connected, and in js it is already regulated which bibles and in what order to connect and on which pages. lazy loading needs to be done.
the option with loading the code as you have looks very sad (the idea itself)