10 шагов к оптимизации вашего сайта

Когда вы только начинаете изучать HTML/CSS, то главным моментом для вас является запомнить все или хотя бы основные теги, понять сам принцип их использования, разобраться со странным понятием "семантика" и уяснить, какие правила CSS и к каким селекторам применять, чтобы было красиво и функционально.

Однако, рано или поздно с этим этапом вы справляетесь. У вас уже есть сверстанный сайт или посадочная страница (Landing Page), и вы даже уже выложили ее на хостинг, купив доменное имя. Кстати, если вы еще находитесь в сомнениях по поводу того, какой хостинг выбрать, рекомендую присмотреться к hostiq.ua - очень достойный хостинг на просторах СНГ с отличной поддержкой (проверено на собственном опыте). У них есть даже малоизвестный тарифный план для студентов с ооочень хорошими условиями - так что не раздумывайте долго - покупайте хостинг вместе с доменом и воплощайте свои идеи.

Вернемся, к вашему сайту. После того, как вы выложили его в сеть, вы узнаете о том, что есть такая штука, как SEO (Search Engine Optimization), т.е. оптимизация вашего сайта для поисковых систем, и начинаете ломать голову, как вам сделать ваш сайт лучше, чтобы не только вы, ваши друзья, мама с папой и любимая бабушка, заходили на ваш сайт, но и десятки, а лучше сотни, а еще лучше тысячи людей со всего того региона, который является местом  проживания ваших потенциальных заказчиков/клиентов.

Вы ломаете голову над наличием и расположением заголовков, узнаете о существовании тега <meta name="description" content="Описание вашего сайта"> и думаете, что бы такого в нем написать.

Дальше-больше: до вас добирается информация о том, что есть какие-то инструменты веб-мастеров, которые позволяют рассказать Гуглу и Яндексу о том, насколько прекрасен и полезен для потребителей ваш сайт. И вы устанавливаете код Google Analytics и Яндекс-метрики на свой сайт. И вам кажется, что это все или почти все.

Не тут-то было. Оказывается, что этим системам нужно еще создать файл robots.txt и показать, где лежит sitemap.xml. Вы находите в Интернете, как сделать оба эти файла и выкладываете их к себе на сайт.

Подсказка: сгенерировать robots.txt  и карту сайта можно на сайте cy-pr.com.

Вроде бы уже все. Вы можете быть уверены, что ваш сайт будет проиндексирован и попадет в поисковую выдачу Google и Яндекс, т.к. именно эти 2 поисковика лидируют на просторах бывшего CCCP и нынешнего СНГ, где больше всего русскоязычного контента. Если ваш сайт ориентирован на другую аудиторию - с украинским, литовским или казахским языком и т.п., то вам придется еще озаботиться тем, чтобы разместить свой сайт в других, национальных каталогах.

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

Вы думаете, что на этом вводная часть статьи уже закончилась? Нет-нет, сейчас будет самое главное, ради чего она, в общем-то, и писалась: в один прекрасный или не слишком прекрасный момент Яндекс-метрика присылает вам письмо о том, что сайт oursite.com в целом долго отвечает поисковому роботу. И что вам нужна оптимизация страниц с точки зрения ускорения скорости загрузки. Вы напрягаетесь, узанете о том, что есть еще гугловский инструмент тестирования страниц PageSpeed Insights, вводите адрес своего сайта и ... оказываетесь в красной зоне и для мобильных, и для компьютеров.

Упс! - думаете вы и начинаете искать информацию о том, как сделать ваш сайт быстрее. Вот тут мы и подходим к тем 10 шагам, которые позволят вам улучшить скорость загрузки вашего сайта.

Шаг 1. Оптимизируем структуру разметки и CSS-стили

В HTML/CSS есть такой принцип - DRY (Don’t Repeat Yourself, или "не повторяй себя" в переводе с английского), который говорит нам о том, что если можно сделать разметку или стили минимальными, т.е. уменьшить их до оптимального количества, то нужно обязательно этим воспользоваться.

Что это значит? Если в разметке вы использовали слишком много div-ов или других элементов-оберток, подумайте, от чего вы можете отказаться, чтобы глубина вложенности кода была минимальной. Чаще всего этим страдают не только html-страницы, но и CMS-системы, в которых используются builder-ы - плагины наподобие Visual Composer, DIVI, Elementor  и т.п. для WordPress. Они очень помогают легко сделать красивые страницы наподобие Landing Page в CMS, но при этом добавляют зачастую избыточную разметку и избыточные css-стили, т.к. неизвестно, какими из них вы реально воспользуетесь. Избавится от них нельзя, уменьшить - крайне сложно, т.к. при обновлении плагина подтянется новый файл стилей.

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

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

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

В том, что касается CSS, то принцип DRY говорит о том, что все стили с подобными правилами нужно сгруппировать в один класс, а все отличия указывать в других классах, используя для этого 1-2 строки, а не 5-7. Например, если все заголовки на вашей странице должны быть оранжевыми и с выравниванием по центру, задайте для них общее правило, а в отдельных указывайте только размер, например, или размер (font-size):

Возможно, вам покажется, что это не слишком большая компенсация по количеству строк. На практике в CSS-файлах найдется немало стилей, которые повторяются от блока к блоку, поэтому имеет смысл объединять общие свойства и выделять индивидуальные.

Второй пример связан оформлением нескольких больших блоков с фоновыми картинками. Для них можно задать какой-либо общий класс .bg и несколько отдельных, в которых будет только ссылка на нужную картинку. Например, так:

В разметке же у вас будет следующая картина:

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

Также вместо добавления лишней разметки вы можете воспользоваться для создания различных эффектов, анимации или просто для улучшения стиля оформления элементов псевдоэлементы ::before и ::after.

Проверьте свой HTML с помощью валидатора

Важный момент: всегда проверяйте свой html с помощью валидатора. Это поможет вам  обнаружить дефекты или неправильный код, чтобы вы могли их устранить. Чаще всего стоит использовать валидатор w3c, т.к. он быстро и просто выдаст вам информацию относительно валидности вашей страницы. С его помощью можно проверять не только сайт в сети, но и загружать локальные html-файлы.

Проверьте свой CSS на повторяемость

При написании различных стилей вы можете повторить часть кода. С помощью CSS Shrink вы можете попробовать сократить количество кода, если вы не обращали внимания на схожесть ваших css-стилей в процессе создания классов и псевдоклассов. Это сервис постарается оптимизировать ваш код, находя повторяющиеся правила или медиа-запросы.

Шаг 2. Встраивание критического css

Как правило, при верстке мы подключаем css-файлы с помощью тегов <link>, которые размещаем в блоке <head>. Однако стили, подключенные через <link>, блокируют отрисовку страницы до полной загрузки этих самых стилей. Если же ваш css-файл имеет большой размер, то пользователи смартфонов и планшетов могут любоваться пустой страницей слишком долго. И это не есть хорошо.

С другой стороны, вам скорей всего не раз говорили, что нежелательно записывать стили на каждой странице в тегах <style>, т.к. таким образом мы увеличиваем количество кода на них плюс усложняем себе жизнь в том случае, если код придется менять. Тем более нежелательно указывать стили непосредственно для каждого элемента с помощью атрибута style. Тем не менее тесты Google показали, что встроенные стили позволяют странице загружаться несколько быстрее, чем при подключении их в <link>.

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

Так что же делать? Какой путь добавления css-стилей выбрать?

Если у вас не слишком большое количество страниц или она одна, или вы используете CMS, постарайтесь встроить часть css-кода внутрь страницы в тегах <style>. Это критический css (critical css) - минимальный набор css-правил, который требуется для отображения верхней части страницы, которую пользователь видит первым при заходе на ваш сайт. Учтите, что при вставке стилей в теги <style> они не кешируются браузером!

Для генерации критического CSS ваш сайт должен находится в сети. Тогда вы можете указать путь к любой вашей странице и с помощью Critical Path CSS Generator получить нужный код. Разница достаточно ощутимая.

Для генерации критического css с помощью npm или yarn можно воспользоваться Penthouse или Critical.

Остальные стили рекомендуется вынести в нижнюю часть документа и разместить перед закрывающимся тегом </body>. Подробнее - в статье на английском языке и еще одной на русском. Стоит ли это делать - решать вам.

Шаг 3. Подключаем теги script в нижней части body

Обычно теги script размещаются, как и стили, в блоке <head>, но если поместить их в нижней части документа, перед закрывающим тегом </body>, мы можем отложить их загрузку и позволить нашему документу сначала загрузить всю DOM-структуру страницы, показать ее пользователю, а затем запросить скрипты.

Любой браузер интерпретирует ваш документ сверху вниз, строка за строкой. Когда он добирается до головы  (блока <head>) и натыкается на тег скрипта, он отправляет запрос на сервер, чтобы получить файл. Если скриптовый файл огромен, то будет загружаться именно он, и пользователь будет видеть только пустую страницу, т.к.  тело страницы (тег <body>) еще не успело загрузиться.

Поэтому перемещаем теги <script> вниз, заодно упрощая себе обращение ко всем элементам документа без обработки события window.onload или DOMContentLoaded. Браузер успеет загрузить текст страницы до того, как мы загрузим содержимое тега сценария, поэтому мы сможем удержать наших пользователей, т.к. страница будет грузится быстро. Вы также можете добавить атрибут defer (отложенный) внутрь тега  <script>, чтобы убедиться, что html загружается первым.

Чтобы получить хорошее представление о том, что делает атрибут defer, посмотрите на разницу в схеме загрузки скриптов без этого атрибута, с атрибутом async и с defer:

Шаг 4. Минификация стилей и js-кода

Для того, чтобы ускорить загрузку страницы, вы можете сжать любые текстовые файлы, а ими являются и файлы в формате html, css- и js-файлы. Делается это за счет уменьшения отступов, удаления переносов строк и сокращения имен переменных и функций в JavaScript-коде. Минифицировать стоит те файлы, которые уже содержат все нужные блоки, стили и код.

В современных тестовых редакторах для этого существуют плагины. Например, в Brackets вы можете использовать плагин brackets-minifier, который после установки добавляет в меню Правка блок опций Minify  с быстрыми клавишами.

После редактирования файла вы можете минифицировать его, нажав Ctrl+Alt+M и получить уменьшенную версию. Ниже приведен скриншот небольшого js-кода, в котором 7 строк превратились в одну. Если кода будет больше, то и сжатие будет более внушительным.

Если вы не хотите или не можете устанавливать плагины, воспользуйтесь онлайн-сервисом CSS Compressor или JS Compress, Compress.com, чтобы минимизировать вес css- и js-файлов. Обратите внимание на то, что не все такие сервисы пока хорошо дружат с нововведениями ES6 типа let, const и др., поэтому минификация не всегда сработает.

Второй метод - это использование Node.js и его установщика пакетов npm для загрузки и настройки Gulp, например, который также поможет минифицировать файлы для production-версии вашего сайта с помощью UglifyJS, как правило.

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

Шаг 5. Объединение CSS и JS-файлов в один

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

С такими задачами также отлично справляется Gulp с помощью gulp-concat или gulp-concat-js.

Есть минус у такого подхода. Например, вы использовали какой-либо слайдер на только главной странице,  и больше он вам нигде не нужен. Поэтому смысл в подключении дополнительного css- и js-кода на остальных страницах отсутствует. То же самое касается оформления контактной формы и скрипта, отсылающего ее на сервер без перезагрузки. Стоит посмотреть на количество кода для этих страниц и решить, стоит ли их исключать из общего файла.

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

Шаг 6. Оптимизация изображений

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

На данный момент сложно представить сайт без изображений. Они украшают, поясняют, привлекают внимание ... и значительно увеличивают вес страницы, а следовательно уменьшают скорость  загрузки. По сравнительным тестам от Google идеальный размер для страницы должен составлять менее 500кб. Это значение далеко не всегда достижимо, если вы добавили на страницу массу изображений. Для того чтобы уменьшить их вес, сначала используйте алгоритмы экспорта в Photoshop, Sketch, Figma, а затем воспользуйтесь возможностями онлайн-сжатия от таких сервисов:

1. TinyPNG  - он поможет очень прилично сжать ваши JPG и PNG-изображения (69% для картинки на скриншоте), которые составляют большую часть изображений на сайте. Минусом является не всегда хорошее качество сжатых изображений. Плюсом - что одновременно можно сжимать до 20 изображений весом не более 5Мб каждый и затем загрузить их в виде архива на компьютер или в Dropbox.
   
2.  Compressor.io - хороший сервис для сжатия изображений, хотя за один раз позволяет выполнить сжатие всего одного файла. Можно загрузить сжатый файл или сохранить его на Google-диск или в Dropbox.
   
3. kraken.io - очень хорошо сжимает файлы, сохраняя при этом их качество. Есть бесплатный и платный вариант. Можно скачать файлы архивом или загрузить на Dropbox. Существует их плагин для WordPress Kraken.io Image Optimizer, но он с платными возможностями.
   
   
4. На сайте iloveimg.com вы найдете не только инструмент по сжатию изображений, но и массу других возможностей по работе с изображениями, например, обрезку изображений, изменение их размера или преобразование в формат JPG или из него, и даже редактор фотографий: Скачайте изображения одним архивом и распакуйте в нужную папку.
5. Еще один сервис с простым и русскоязычным интерфейсом  - Optimizilla - позволит сжать JPEG и PNG файлы в количестве до 20 штук и загрузить их потом архивом.
6. Сжатие изображений в формате JPEG можно выполнить на сайте compressjpeg.com с русскоязычным интерфейсом.
7. Для обладателей компьютеров фирмы Apple есть возможность воспользоваться программой ImageOptim
   

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

6.2 Использование  data:url

Если вы используете на сайте небольшие изображения, то вместо использования самой картинки, можно использовать вариант загрузки файла в теге <img> или в css-свойстве background-image с помощью data:url. Это способствует уменьшению количества запросов на сервер и помогает при gzip-сжатии страниц увеличить скорость загрузки, а это несомненный плюс для вашего сайта, т.к. вы экономите килобайты на отправке заголовков с каждым запросом на загрузку изображения.

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

Итог:

Минусом использования data:url является то, что для конвертации требуется дополнительное время + браузер не кэширует такие изображения.

Для конвертации изображения в формат data:url, можно воспользоваться сервисом ezgif.com.

Этот сервис также поможет вам изменить размер изображения (resize), повернуть (rotate) или оптимизировать (optimize). Есть еще ряд операций, которые вы можете на этом сайте, например, конвертировать видео в формат GIF, но к теме этой статьи эти опции не относятся, хотя и могут оказаться вам полезными :).

6.3. Использование спрайтов

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

С помощью онлайн-генератора спрайтов мы соберем в один файл 5 социальных иконок, общий вес которых по отдельности составляет примерно 15кб. В результате получим один PNG-файл  весом 19,5кб.

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

Разметка и CSS-стили примера:

Результат использования спрайта.

Минус такого подхода - вы используете толко фоновые изображения в css, вставить на страницу тег <img> в таком виде не получится. Плюсы - вес меньше, запросов на сервер меньше - экономия очевидна, да и не факт, что тег <img> лучше.

6.4. Оптимизация SVG-файлов

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

Как правило, иконки в векторе создают дизайнеры в программах типа Adobe Illusrator или Sketch, а затем выполняют импорт графики в формат SVG. Они вряд ли задумываются о количестве текста, которые задействуют графические редакторы при сохранении SVG-файлов. Тем не менее, вы можете уменьшить их размер, убрав лишние теги (<g>, как правило), комментарии, неиспользуемые  стили, id и классы.

Для этого, разумеется, нужно понимать, как устроен формат SVG, чтобы не повредить нарисованное дизайнером. Однако никому не хочется тратить слишком много времени на такую оптимизацию. И не надо - воспользуемся онлайн-сервисами: SVGOMG, например, отлично справится с этой работой за вас.

Вы можете открыть SVG-файл с компьютера (Open SVG) или вставить его текстовую разметку (Paste markup).

Результат может быть уменьшен как весьма значительно (на скриншоте размер уменьшен со 100% до 27%), так и немного - на 4-10%. В настройках вы можете подобрать удобные для вас.

Вы можете прочитать статью Оптимизация изображений от разработчиков Google, которая рассказывает о массе нюансов при выборе формата изображения, сжатии с потерями и без, масштабировании картинок и методах их оптимизации.

6.5 Прогрессивные JPEG

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

Получить прогрессивный JPG можно было ранее в Adobe Photoshop с помощью модуля Save for Web (Сохранить для вэб), поставив в настройках сохранения флажок. Сейчас это уже устаревший вариант сохранения сжатых изображений для сайта. Его с версии CS6 заменил модуль экспорта, в котором такой настройки для JPG нет. На скриншоте приведены настройки для быстрого экспорта в формат JPG и чекбокс в настройках Сохранить для Web.

Сразу оговорюсь, что пока в Photoshop модуль Сохранить для Web (нажмите одновременно клавишиCtrl + Shift + Alt + S) еще существует, но не факт, что его не уберут со временем. Поэтому стоит воспользоваться онлайн-сервисами для преобразования последовательных JPEG в прогрессивные:

1. JPEG.io - конвертирует огромное количество форматов в JPEG и оптимизирует его.
2. IMGonline.com.ua - сделает JPEG картинку прогрессивной без сжатия онлайн. Тот же сервис предоставляет отличный инструмент для получения сжатых избажений онлайн с минимумом настроек, но с высокой эффективностью.
3. Coding.Tools - конвертирует обычный JPEG в прогрессивный.

Интересно, что такой инструмент проверки скорости загрузки вашего сайта, как WebpageTest на вкладке Perfomance Review показывает, используете ли вы прогрессивные JPG.

7. Ленивая загрузка изображений

Ленивая загрузка, или Lazy Loading,  - это подход, который базируется на загрузки части изображений (видео или элементов <iframe>), кода пользователь "добирается" до них, прокручивая страницу вниз. Основан он в основном на использовании JavaScript с дополнительными атрибутами. Кроме того, такое поведение уже внедрили в браузер Chrome 75, который позволяет отображать изображения с атрибутом loading="lazy" только тогда, когда пользователь дойдет до них, просматривая страницу.  Этот подход со временем должен войти в стандарт HTML, а на данный момент это пока экспериментальная и не поддерживаемая всеми браузерами возможность. Почитать подробнее. Реализовать ее можно с помощью различных плагинов.

Шаг 8. Уменьшение количества иконочных и загружаемых шрифтов

Не секрет, что сейчас масса сайтов использует шрифт Fontawesome с его разнообразным набором иконок. Однако в порыве сделать красивый сайт и дизайнер, и разработчик забывают о весе загружаемого шрифта. А он отнюдь не мал. Например, Fontawesome версии 4.7, которая преобладает еще на многих сайтах, т.к. долгое время была очень популярной, содержит такие файлы (в порядке увеличения веса файла):

• fontawesome-webfont.woff2- 76кб
• fontawesome-webfont.woff- 96кб
• fontawesome-webfont.ttf - 162кб
• fontawesome-webfont.eot - 162кб
• fontawesome-webfont.svg - 434кб

Хорошо, если вы используете много иконок из этого набора, а если только 3-4 - имеет ли смысл загружать ради этого даже дополнительные 76кб? Может, целесообразнее заменить эти иконки SVG или PNG файлами? Итоговый размер ваших иконок будет в районе 3-10кб, а может и меньше (зависит от формата и сложности иконок). Выигрыш в 7-25 раз.

Что касается загружаемых шрифтов, то идеально, когда сайт использует для отображения текста такие шрифты, как Verdana, Tahoma или Times New Roman (привет вам, 90-е и 2000-е годы!). Эти шрифты есть в системе каждого пользователя, поэтому грузить дополнительно их не нужно. Но кому это интересно в 2020, когда есть директива@font-face и сервис Google Fonts? Правильно - никому или редким поклонникам минимализма.

Как можно уменьшить вес загружаемых шрифтов? Во-первых, обязательно нужно иметь в папке fonts шрифты в современных хорошо сжимаемых форматах WOFF и WOFF2 - все новые версии браузеров изначально будут грузить именно их. Во-вторых, уменьшить количество используемых шрифтов - вместо 3-х (надеюсь, ваш дизайнер не заложил бОльшее их количество в макет?) постарайтесь обойтись двумя, а еще лучше - одним. Не забывайте, что для каждого начертания шрифта - Bold, Italic, Light - нужен отдельный файл с соответствующим начертанием букв и отдельное описание свойства @font-face.

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

Одной из рекомендаций Google для шрифтов является настройка их отображения ДО полной загрузки шрифта. Для этого нужно добавить в директиву @font-face 2 правила src: local('название шрифта') - для того, чтобы при наличии такого шрифта в операционной системе пользователя он подтянулся из ОС вместо загрузки этого шрифта по сети, и  font-display: swap - для того, чтобы во время загрузки шрифта был показан системный, а затем он заменился на загруженный. Пример написания @font-face:

Если вы загружаете шрифт из сервиса Google Fonts, то вам будет необходимо добавить параметр &display=swap в конце URL, скопированного из этого сервиса, например:

На данный момент Google Fonts уже добавил этот параметр в ссылку, которую вы копируете после выбора нужного шрифта.

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

Шаг 9. Gzip-сжатие html-, css- и js-файлов

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

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

Как правило, большинство хостинг-провайдеров позволяют включить gzip-сжатие на стороне сервера либо с помощью настроек в панели управления хостингом (CPanel), либо путем редактирования это конфигурационного файла веб-сервера Apache .htaccess.

Редактируем файл .htaccess

Для того чтобы включить gzip-сжатие файлов, вам нужно будет отредактировать файл .htaccess, который должен быть расположен в главной директории вашего сайта. Этот файл не имеет имени, только расширение, тем не менее отлично редактируется в любом текстовом редакторе (Sublime Text, Brackets, Atom, Visual Studio Code, Notepad++ - выбирайте любой). Он регулирует много процессов, но в данный момент нам необходимо добавить в него такие директивы:

Это рекомендуемый способ добавления сжатия через mod_deflate.

Можно записать то же самое короче:

Если предыдущие варианты не сработали, можно попробовать подключить gzip-сжатие через mod_gzip вместо mod_deflate в том же файле .htaccess:

После сохранения файла .htaccess вы можете проверить, было ли включено сжатие на сервере с помощью ресурса GIDZipTest или  HTTP Compression Test. Если все в порядке, то вы получите соответствующее сообщение:

Если с gzip-сжатием на вашем сервере есть проблемы, то результат будет таким:

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

Сжимаем файлы в формат GZIP архиватором 7zip

В качестве расширения для архива выбираем gzip и формируем gz-архив для всех css- и js-файлов, чтобы уменьшить скорость их загрузки.

Редактируем файла .htaccess, заменив неработающий код серверного сжатия на другой:

Добавление кода в PHP-файл для gzip-кэширования

В результате "танцев с бубном" на одном из дешевых серверов, на котором не проходил никакие манипуляции с файлом .htaccess, решением стало добавление в код PHP-файла одной строки, которая помогла сделать gzip-кэширование:

Записать ее необходимо в самом начале файла ДО того, как писать весь основной код. В этом случае редактировать .htaccess не нужно.

Если ваш сайт использует CMS WordPress можно включить gzip сжатие, установив плагин, например Enable Gzip Compression или другие из соответствующей категории. Почитать об оптимизации WordPress можно на английском языке.

Шаг 10. Кэширование файлов

Как правило, тест Google PageSpeed Insights выдает рекомендацию вида "Задайте правила эффективного использования кеша для статических объектов", подразумевая под этим, что вы можете указать браузеру, сколько времени со дня загрузки вашего сайта он должн хранить информацию в своем кэше.

Вы можете указать время в секундах, днях, неделях или месяцах в том же файле .htaccess, о котором шла речь в разделе о gzip-сжатии.

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

• years — лет или year — один год
• months — месяцев или month — одни месяц
• weeks — недель или week — одна неделя
• days — дней или day — один день
• hours — часов или hour один час
• minutes — минут или minute — одна минута
• seconds — секунд

Более короткий вариант:

Хорошая статья на тему кэширования и gzip-сжатия доступна по ссылке. В ней много вариантов использования инструкций для .htaccess.

Инструменты  определения скорости загрузки сайта

На самом деле, помимо Google PageSpeed Insights есть еще ряд инструментов, которые позволяют посмотреть скорость загрузки вашего сайта. Кстати, часть из них - от того же Google:

1. В браузере Chrome, нажав клавишу F12, вы найдете в инструментах разработчика вкладку Audits, которая основана на  Lighthouse In Chrome DevTools. С помощью этого встроенного в браузер Chrome (только в нем) инструмента вы можете посмотреть на различные параметры оптимизации сайта, причем отдельно для компьютеров, отдельно для мобильных:

Будьте  готовы к тому, что данные несколько отличаются от тех, что вы увидите в Google PageSpeed Insights, хотя последний сервис работает на основе аналогичного инструмента.

2. Test My Site - этот онлайн-сервис анализирует сайт по множеству параментров: JavaScript, удобство для мобильных пользователей, скорость загрузки, сравнение с похожими сайтами в этой же ниши, которые вы указываете самостоятельно. После проверки вы узнаете:

• Среднюю скорость загрузки.
• Долю потерянных посетителей.
• Скорость загрузки в сравнении с другими сайтами этой же ниши.
• Список исправлений, которые сократят время загрузки (использование кеширования, уменьшение времени отклика сервера и так далее).

Также вы получите отчет с советами по улучшению сайта, в котором самым интересным, на мой взгляд, оказалось сравнение вашего сайта по скорости загрузки с конкурентами. Список рекомендаций похож на тот, что выдает Google PageSpeed Insights, но с меньшей детализацией. Стоит ли его выбирать в качестве инструмента тестирования, решать вам.

Дополнительные сервисы тестирования вашего сайта на скорость загрузки

• Pingdom Tools- это бесплатный англоязычный инструмент, который позволит вам получить такие данные по загрузке вашего сайта, как процент производительности, количество запросов к серверу, время загрузки страницы (в миллисекундах), размер загружаемой страницы, а также покажет ряд рекомендаций. Почитать .
• WebPageTest.  - показывает развернутую информацию о скорости загрузки каждого файла. Вместе с этим сразу отображает информацию о кэшировании файлов, нахождении их на CDN, оптимизации изображений и др. Англоязычный сервис.
• GTmetrix - очень информативный сервис. После ввода URL вашего сайта он сформирует для вас отчёт о времени и скорости загрузки, и при этом выдает список с параметрами оптимизации. Англоязычный сервис.
• Uptrends - сайт использует информацию PageSpeed Insights + дает дополнительную информацию о скорости загрузки всех элементов вашей страницы. Например, обращает ваше внимание на наличие переадресаций, т.к. даже банальное перенапрвление с mysite.com на www.mysite.com  может привести к снижению скорости загрузки.
• Dotcom-tools - сайт позвоялет измерить скорост загрузки вашего сайта в различных городах мира.  Показывает скорость загрузки при первом и повторном обращении (т.е. здесь вы можете увидеть, насколько работает кэширование файлов, например). Имеет 30 дневный тестовый бесплатный период. Показывает рекомендации по улучшению загрузки - в этом плане подобен PageSpeed Insights.
• Site24x7 - проводит анализ скорости вашего сайта, выдавая время DNS, время соединения, время первого байта, начало рендеринга, полное время загрузки. Также предоставляет еще ряд инструментов для проверки IP, страны регистрации сайта
• Sucuri Load Time Tester - даст вам информацию о скорости загрузки сайта из разных городов мира.

Инструменты для визуального теста вашего сайта в разных браузерах

• PageWatch - покажет,  как выглядит ваш сайт в разных браузерах. Первые 15 тестов бесплатно после регистрации в системе. Дальше - либо один тест за .8$, либо каждый месяц оплачиваете  по  2$-5$ за страницу на 4-6 устройствах.

• ILoveAdapptive -  позволит посмотреть на ваш сайт на различных iOS или Mac-устройствах с разными разрешениями.
• Lambdatest.com - достаточно интересный в бесплатной версии инструмент для тестировния внешнего вида сайта в различных браузерах на разных платформах. Требует несложной регистрации.