Как реализовать постепенную загрузку страницы?

Question

[AnteFil]

Дабы угодить Google с его PageSpeed возникла проблема.
Не могу реализовать постепенную загрузку страницы. Как я понял нужно загрузить шапку от страницы потом непонятно когда подгрузить все остальные элементы на странице.

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

Если я правильно думаю как это можно реализовать.

Сайт slushat-muziku.ru
Сейчас все работает если я на таймере выставляю 10 секунд, но заставлять ждать 10 секунд пользователя через чур.
Выглядит это так

var app = angular.module('progressApp', ['ngProgress']);
	
var MainCtrl = function($scope, $timeout, ngProgressFactory) {

        $scope.show = false;

		$scope.progressbar = ngProgressFactory.createInstance();

	    $scope.progressbar.start();
        $timeout(function(){
            $scope.progressbar.complete();
            $scope.show = true;
        }, 1000);

}

За основу взял этот victorbjelkholm.github.io/ngProgress

Answer 1

[IvanN777]

1) С чего начать стоит посмотреть сколько загружается с теми же данными но при пустом контенте. Тоесть проверить оптимальность бд. Explain и.т.д. Но если проблема всеже в виде

2) Если ты используеш что-то типо бутстрапа. Имеет смысл раделить его. Поместить сетку css на верх, а подробные стили в низ страницы. Так же имеет смысл размещать js в низу страницы.

3) Настроить на отдачи контента gzip
Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

4) Кеширование Хорошо, redis и на уровне http заголовков.
https://habrahabr.ru/post/204464/

5) Минифицировать js и css

6) В некоторых случаях хорошо хранить стили на посторонних ресурсах(не на своем сайте) гугл и прочее. Но это вариативно, нужно измерять.

7) Картинки(галерея) имеет смыл подгружать ajax, но на сео это может отразится плохо. Ключевики title, alt могут потерятся.

Comments

[AnteFil]

А можно как то просто выключить блок див и включить после полной загрузки?

[IvanN777]

можно подгрузить js блоки которые не важны для сео. "Выклбючение" в плане cтилей это только внешний вид, никак не меняет скорость загрузки. Для вставки можно использовать React.js например. Но только не то что нужно для сео.

[IvanN777]

Ну как вариант, можно css подгузить с анимациями через js. Для робота будет сухая версия для загрузки, потом появится более красявишная версия сайта. Так же можно подгрузить неважные блоки, скажем с рекламой.