10 способов быстро оптимизировать веб-производительность всего за 5 минут

Автор: Марк Переводчик: Front-end Xiaozhi Источник: разработчик

Я получил разрешение на перевод от автора оригинала.

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

В этой статье основное10Быстрый способ улучшить производительность веб-сайта, вы можете применить его на своем веб-сайте всего за 5 минут, без лишних слов, давайте перейдем к делу 💎.

1. Сжатие файлов

Сжатие файлов, уменьшающее количество байтов, передаваемых по сети. Существует несколько алгоритмов сжатия.Gzipявляется наиболее популярным, но дляBrotli, вы можете использовать более новый или даже лучший алгоритм сжатия. Если вы хотите проверить, поддерживает ли ваш серверBrotli,можно использоватьBrotli.pro.

Если ваш сервер не поддерживаетBrotli, вы можете установить его, следуя этому простому руководству 👍:

Nginx on Linux
Apache
NodeJs - Express

2. Сжатие изображений

Несжатые изображения являются огромным потенциальным узким местом в производительности. Если изображения не сжимаются перед их предоставлением пользователю, передаются ненужные байты. Существует несколько полезных инструментов для быстрого сжатия изображений без потери видимого качества. я в основном пользуюсьImagemin. Он поддерживает множество форматов изображений, вы можете использовать его как интерфейс командной строки или модуль npm.

imagemin img/* --out-dir=dist/images

Вы также можете импортировать npm в свой проект, используяimagemin-mozjpeg, который может сжимать изображение JPEG до исходного60%:

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['img/*.jpg'],
      {
        destination: 'dist/img',
        plugins: [
          imageminMozjpeg({quality: 60}),
        ]
      }
  );
  console.log(files);
})();

В моем случае он изменил размер файла с4MBсокращено до100kB:

3. Формат изображения

Использование современных форматов изображений действительно может повысить производительность. Изображения WebP меньше, чем JPEG и PNG, и обычно меньше25％-35％.WebPТакже широко поддерживается браузерами.

Мы используем пакет imagemin npm и добавляем в негоВеб-плагин. Следующий код выводит версию WebP моего изображения вdistпапка.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async() => {
  const files = await imagemin(
      ['img/*.jpg'],
      {
        destination: 'dist/img',
        plugins: [
          imageminWebp({quality: 50})
        ]
      }
  );
  console.log(files);
})();

Давайте еще раз посмотрим на размер файла:

Результаты показывают, что размер файла уменьшен по сравнению с исходным изображением.98%, по сравнению со сжатым файлом JPG, WebP сжимает изображение более явно, версия WebP меньше, чем сжатая версия JPEG43%.

4. Отложенная загрузка изображения

Ленивая загрузка изображений — это метод загрузки изображений за пределами экрана позже, чем раньше. Когда синтаксический анализатор встречает правильно загруженное изображение, он замедляет начальную загрузку страницы. С отложенной загрузкой вы можете ускорить процесс и загрузить изображения позже. использоватьlazysizeЭто легко сделать. использоватьlazysizeПара скрипт и браузерloadingПоддержку атрибутов можно оптимизировать следующим образом:

<img src="image.jpg" alt="">

Измените его на:

<img data-src="image.jpg" class="lazyload" alt="">

Об остальном позаботится библиотека, вы можете проверить это в своем браузере. Откройте свой веб-сайт и найдите тег изображения. Если урок начинается сlazyloadизменить наlazyloaded, это просто работает.

5. Кешировать заголовки http

Кэширование — это быстрый способ ускорить ваш сайт. Это сокращает время загрузки страницы для посетителей. Мы можем указать браузеру кэшировать файлы в определенное время.Если у вас есть некоторые знания о предыстории, настроить сторону кэширования несложно.

Мы можем использовать следующие API для кэширования:

Cache-Control
ETag
Last-Modified

6. Встроенный критический CSS

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

Определите критический CSS

Если вы не знаете, какой у вас ключевой CSS, вы можете использоватьCritcal, CriticalCSSилиPenthouse. Все эти библиотеки извлекают CSS из файлов HTML, видимых для данного окна просмотра.

Критический экземпляр CSS выглядит следующим образом:

var criticalcss = require("criticalcss");

var request = require('request');
var path = require( 'path' );
var criticalcss = require("criticalcss");
var fs = require('fs');
var tmpDir = require('os').tmpdir();

var cssUrl = 'https://web.dev/app.css';
var cssPath = path.join( tmpDir, 'app.css' );
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {
  criticalcss.getRules(cssPath, function(err, output) {
    if (err) {
      throw new Error(err);
    } else {
      criticalcss.findCritical("https://web.dev/", { rules: JSON.parse(output) }, function(err, output) {
        if (err) {
          throw new Error(err);
        } else {
          console.log(output);
          // save this to a file for step 2
        }
      });
    }
  });
});

Встроенный критический CSS

Анализатор HTML обнаруживает тег стиля и немедленно обрабатывает критический CSS.

<head>
  <style>
  body {...}
  /* ... rest of the critical CSS */
  </style>
</head>

Отставание некритического CSS

Некритичный CSS не требует немедленной обработки. Браузер может загрузить его после события onload, поэтому пользователю не нужно ждать.

<link rel="preload" href="/assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/styles.css"></noscript>

7. Асинхронный JavaScript/отложенная загрузка/отложенная загрузка

HTML также блокирует рендеринг, и браузер должен дождаться выполнения JS, прежде чем завершить синтаксический анализ HTML. Но мы можем сказать браузеру дождаться выполнения JavaScript.

Загружать JavaScript асинхронно

использовать атрибутasync, который указывает браузеру загружать скрипт асинхронно.

<script src="app.js" async></script>

Задержка JavaScript

deferАтрибут указывает браузеру запустить сценарий после того, как анализатор HTML проанализировал документ, но до того, как произойдет событие.DOMContentLoadedбудет запущен.

<script src="app.js" defer></script>

Повторная сортировка встроенных скриптов

Встроенный скрипт выполняется немедленно, и браузер анализирует его. Таким образом, вы можете поместить их в конец HTML, прямо перед тегом body.

8. Используйте подсказки ресурсов для оптимизации производительности

Подсказки ресурсов HTML5 (Resource Hints) можно просто понимать как предварительную загрузку, и браузер выборочно загружает и оптимизирует в соответствии с подсказками последующих ресурсов, предоставленных разработчиком. «Избирательность» является обязательной и чрезвычайно важной, и она также находится в центре внимания более ранних альтернатив, потому что во многих случаях предварительная загрузка будет ограничена выделенными вычислительными ресурсами и ресурсами полосы пропускания, и браузер имеет право отказаться от этих дорогостоящих добавлений. -он.

Подсказки ресурсов помогают разработчикам сообщать браузеру, какие страницы могут быть загружены позже. Спецификация определяет четыре примитива

preconnect
dns-prefetch
prefetch
prerender

Кроме того, для подсказок ресурсов мы использовали атрибут ссылкиpreloadключевые слова.

preconnect

Предварительно ссылка, используйте метод следующим образом:

 <link rel="preconnect" href="https://example.com">

Проще говоря, когда мы посещаем сайт, мы проходим следующие шаги:

разрешение DNS
TCP-рукопожатие
Если это сайт HTTPS, будет выполнено рукопожатие TLS.

После использования преконнекта браузер заранее инициализирует ссылку для конкретного доменного имени (выполняет три вышеуказанных шага), что экономит нам время на доступ к сторонним ресурсам. Следует отметить, что мы должны убедиться, чтоpreconnectСайт необходим для веб-страницы, иначе он будет тратить ресурсы браузера и сети.

DNS Prefetch

Предварительное разрешение DNS, которое известно большинству людей, и его использование очень простое:

 <link rel="dns-prefetch" href="http://example.com">

Проще говоря, разрешение DNS — это преобразование доменных имен в IP-адреса. Когда мы используем доменное имя для запроса других ресурсов на веб-странице, оно сначала будет преобразовано в IP-адрес, а затем будет инициирована ссылка.dns-prefethРабота по преобразованию выполняется заранее, а время запроса ресурсов сокращается.

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

prefetch

Предварительная выборка, метод использования следующий:

<link rel="prefetch" href="index.html" as="document">
<link rel="prefetch" href="main.js" as="script">
<link rel="prefetch" href="main.css" as="style">
<link rel="prefetch" href="font.woff" as="font">
<link rel="prefetch" href="image.webp" as="image">

linkна этикетке的asПараметр может принимать следующие значения:

audio: 音频文件
video: 视频文件  
Track: 网络视频文本轨道 
script: javascript文件
style: css样式文件
font: 字体文件   
image: 图片   
fetch: XHR、Fetch请求
worker: Web workers
embed: 多媒体<embed>请求 
object:  多媒体<object>请求
document: 网页

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

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

Здесь следует отметить, что использованиеprefetch, ресурс загружается только заранее, и после загрузки не будет никаких операций, таких как разбор ресурса.

prerender

При предварительном рендеринге используйте следующие методы:

<link rel="prerender" href="//example.com/next-page.html">

prerender идет на шаг дальше, чем prefetch. Будут не только загружены соответствующие ресурсы, но и проанализированы ресурсы. Если в процессе синтаксического анализа требуются другие ресурсы, эти ресурсы могут быть загружены напрямую. Таким образом, когда пользователь переходит с текущей страницы на целевую страницу, браузер может реагировать быстрее.

preload

<link rel="preload" href="..." as="...">
<link rel="prefetch" href="...">

Обратите внимание, что для правильной работы предварительной загрузки необходимо указать правильный атрибут as (предварительная выборка не требуется). Но какая между ними разница?

preload — это ресурс, используемый для предварительной загрузки текущей страницы, браузер сначала загрузит их
prefetch используется для предварительной загрузки ресурсов, используемых последующей навигацией, браузер их тоже подгрузит, но приоритет не высокий

9. Закрепите свои шрифты Google

Шрифты Google великолепны, они предлагают отличный сервис и широко используются. Если вы не хотите размещать шрифты самостоятельно, Google Fonts — отличный вариант. Что тебе нужно, так это научиться их цитировать, Гарри Робертс (Harry Roberts) написал статью о "The Fastest Google Fonts, отличная подробная статья. Настоятельно рекомендуется прочитать ее.

Если у вас есть быстрый доступ, вы можете использовать встроенный фрагмент Google Fonts ниже:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=...&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap" media="print" onload="this.media='all'"/>
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap"/></noscript>

10. Используйте сервис-воркеров для кэширования ресурсов

Service Worker — это скрипт, который браузер запускает в фоновом режиме. Кэширование, вероятно, является наиболее часто используемой функцией, и ее следует использовать. Я не думаю, что это вопрос выбора. Внедрив кэширование с помощью сервис-воркеров, можно ускорить взаимодействие пользователя с сайтом и получить доступ к сайту, даже если пользователь не в сети.

Суммировать

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

Спасибо за просмотр и поддержку, увидимся в следующий раз, не забывайте о Санлиане.

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Dev.to/Marc RA D Self i…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.