Как увеличить скорость страницы Google?

Question

Я проверил скорость страницы моего веб-сайта по данным о скорости страницы и текущей скорости страницы, которую я получил для своего веб-сайта ( https://www.jodhpuri.net/): 21 для мобильных устройств и 59 для настольных компьютеров. Вы также можете проверить это по ссылке: https: //developers.google.com/speed/pagespeed/insights/ URL = HTTPS% 3A% 2F% 2F% 2Fwww.jodhpuri.net & = вкладка мобильного

• Я оптимизировал CSS, JS, изображения (сжатые)

• Я также использовал кеш для быстрого доступа к файлам позже

• Я также использовал ленивый загрузчик для изображений

но ничего из этого не сработало!!

Если у кого-то есть идеи, как увеличить скорость страницы этого сайта: https://www.jodhpuri.net/ пожалуйста, дайте свои предложения. Любая помощь будет оценена.

Answer 1

Согласно моему анализу, веб-сайту, о котором вы упомянули, не хватает коэффициента скорости из-за изображений, загружаемых на целевой странице.

Я считаю, что на веб-сайте есть Express.JS в стеке технологий. Попробуйте использовать как можно больше изображений в кодировке Base64 на целевой странице или в SVG.

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

Я надеюсь, что вы сможете наилучшим образом использовать облачные сервисы, такие как AWS S3, AWS RDS, CloudFlare и так далее... для повышения скорости работы вашего сайта. Особенно это помогает в повышении скорости, которой мешают изображения, которые вы обслуживаете из экспресс-статической папки.

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

Answer 2

Если ваш веб-сайт интенсивно использует изображения, вы можете рассмотреть возможность загрузки изображений в формате webp, который обеспечивает превосходные изображения без потерь и с потерями для Интернета.

Обратите внимание на поддержку совместимости изображений webp, поскольку она не поддерживается браузерами Safari (по состоянию на февраль 2019 года). В таких случаях вы должны загрузить запасное изображение (в формате png или jpeg).

Вы можете использовать следующий скрипт для проверки поддержки webp:

ngOnInit(): void {      
  this.checkWebpSupport().then(res => {
      if (res) {
      // display .webp backgroung image only if .webp is supported by browser
      } else {
      // display fallback .jpg image is .webp is not supported by browser
    }
  });
}


async checkWebpSupport() {
  if (!self.createImageBitmap) return false;

  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
}