Как сжать страницу сайта


Как ускорить сайт с помощью gzip, brotli, минификации и других способов

Разбираемся, как уменьшить вес сайта и ускорить загрузку страниц: как использовать сжатие gzip и brotli, минифицировать CSS, HTML, JS, кэшировать страницы в браузере пользователя, как оптимизировать изображения и другую графику.

Зачем уменьшать размер HTML-страницы

С каждым годом вес HTML-страниц в среднем увеличивается. По данным MachMetrics, средний размер веб-страницы в 2018 году — 2МБ, это в три раза больше, чем три года назад. Это происходит, потому что на сайты добавляют более качественные и тяжелые изображения и видео, CSS или JS-файлы.

Большой вес страницы — одна из причин медленной загрузки, поэтому рекомендуем сжимать объекты и избавляться от ненужных элементов. Это не единственная причина медленной загрузки ресурса, на нее влияет много факторов, но всегда лучше исправить то, что доступно.

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Анализ amazon.com

Скорее всего Amazon рассчитывает на то, что пользователи со смартфонов будут скачивать мобильное приложение, поэтому не работает над скоростью мобильной версии сайта.

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Фрагмент результатов проверки

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

Для уменьшения размера HTML-страницы нужно сжать код и облегчить элементы:

  1. Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
  2. Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
  3. Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
  4. Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
  5. Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
  6. Использовать кэш браузера — кэшировать данные в браузере пользователя.
  7. Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
  8. Оптимизировать количество рекламных блоков на странице.

Использовать сжатие gzip или brotli

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

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

Сжатие данных алгоритмами состоит из этапов:

  1. Клиент совершает запрос и оповещает сервер, какие данные может принять.
  2. Сервер обрабатывает запрос и определяет, какую версию отправить.
  3. Сервер отправляет файл клиенту.
  4. Клиент распаковывает и считывает информацию.

На втором этапе браузер сообщает серверу, какие методы сжатия поддерживает — посылает заголовки Accept-Encoding с кодом, где указаны алгоритмы сжатия, например, "accept-encoding: gzip, deflate, br". Сервер выбирает форматы из доступных: если клиент поддерживает brotli, то сервер ищет суффикс ".br" в заголовке и отправляет клиенту нужный файл. Если его нет, будет использовать другой алгоритм. Если клиент не поддерживает сжатие вообще, сервер отправит несжатую версию.

Какой алгоритм сжатия выбрать: gzip или brotli?

Многие веб-мастера используют оба способа, поскольку brotli позволяет сжимать сильнее, но gzip поддерживают больше браузеров, поэтому он будет использоваться чаще.

Как использовать сжатие gzip

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

Степень сжатия можно настраивать, gzip поддерживает уровень сжатия от 1 до 9. Обычно рекомендуют степень 4-7 в зависимости от ресурсов процессора, оптимальное значение 5. Подберите подходящую степень сжатия под свои ресурсы, чтобы процессор справлялся, иначе сжимать информацию будет бесполезно, если нагрузка на процессор сильно вырастет. Экономить ресурсы поможет использование заранее сжатых файлов, они имеют формат gzip с дополнительным расширением .gz. На такие файлы можно применять максимальную степень сжатия, дальше сервер будет использовать ее вместо обычной.

Сжатие gzip для Nginx

В новых версиях Nginx gzip сжатие включено по умолчанию, но если такого нет, его можно настроить. Чтобы запустить сжатие gzip для сервера Nginx, нужно включить сжатие в модуле /etc/nginx/nginx.conf: 

 gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Директива "gzip_disable «msie6»" отключает сжатие для эксплорера 5.5 и 6, "gzip_proxied any" позволяет сжимать данные для proxy-серверов.

Уровень сжатия указывают в директиве "gzip_comp_level 6".

Директива "gzip_types text/css text/javascript application/javascript" указывает типы файлов для сжатия на сервере. Перечислите те, которые вам нужны. Cжатие text/html подразумевается и не может быть отключено, если вы не установили gzip off, а text/css и application/x-javascript включает сжатие gzip для файлов CSS и javascript соответственно.

Сжатие gzip можно включать и выключать для каждого «сервера» Nginx — более мелкой структуры, и для конкретного location — еще меньшей, зачастую располагающейся внутри него.

Gzip-сжатие файлов SVG для Nginx

Сжатие gzip будет работать для SVG, если формат векторной графики SVG есть в файле, который обычно располагается по пути "/etc/nginx/mime.types". Добавьте строку изображения "image/svg+xml svg svgz"

В файле конфигурации Nginx найдите "gzip types" и добавьте "image/svg+xml" к концу строки. Получившаяся строка может выглядеть так:

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
Сжатие gzip для Apache

Сервер Apache для работы со сжатыми ресурсами использует модуль mod_deflate или mod_gzip.

Если вы используете mod_gzip, в в файл .htaccess добавьте строки: 

 <ifmodule mod_gzip.c=""> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_include mime ^text/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_include handler ^cgi-script$ </ifmodule>

Если используете mod_deflate, для отгрузки сжатых файлов добавьте строки в файл .htaccess: 

 <ifmodule mod_deflate.c=""> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/opentype # For Older Browsers Which Can't Handle Compression BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </ifmodule>

Есть еще такой вариант перечисления типов файлов для сжатия в одной строке: 

<ifmodule mod_deflate.c=""> AddOutputFilterByType DEFLATE text/html text/css text/javascript font/ttf application/javascript DeflateCompressionLevel 7 </ifmodule>

В строке DeflateCompressionLevel 7 указывают степень сжатия. Сжатие будет работать после сохранения.

Gzip-сжатие файлов SVG для Apache

Векторную графику формата SVG можно сжать с помощью gzip. В файле .htaccess. должна быть строка "# Compress HTML, CSS, JavaScript, Text, XML and fonts", добавьте в .htaccess строчку кода: 

AddOutputFilterByType DEFLATE image/svg+xml

После вставки и сохранения функция должна работать. Следите, чтобы код в файле не повторялся. 

Как использовать сжатие brotli

Brotli поддерживают браузеры Chrome, Firefox и Edge 15 для SSL-соединений. В заголовках должен быть "Accept-Encoding: br". В brotli есть собственный словарь из более сотни тысяч фраз, который используется для сжатия данных. Он же встроен в браузеры, которые поддерживают алгоритм, поэтому словарь не передается в архиве, и архив весит меньше.

Алгоритм сжатия brotli сжимает файлы сильнее, чем gzip. Максимальная степень сжатия у gzip — 9, а у brotli 11, степень 11 brotli дает файл на 25% меньше, чем сжатый 9 степенью gzip.

Некоторые веб-мастера считают, что brotli нет смысла использовать для динамических страниц, поскольку он медленнее gzip. Такое ощущение складывается, если сравнивать параметры по умолчанию: у команды brotli стоит максимальный 11 уровень сжатия, для него нужно больше времени, поэтому процесс сжатия получается медленнее.

Для динамических страниц рекомендуем использовать уровень 5-6, тогда скорость сжатия будет достаточно быстрой. Для статических страниц можно использовать скрипт для сжатия 11 уровня.

Сжатие brotli для Nginx

Сервер Nginx использует brotli при включенном модуле "brotli_static" в конфигурации "brotli_static on". Тогда сервер получит от браузера заголовок, проверит, есть ли в нем файл с расширением ".br" и отдаст нужный файл как архив, сжатый в brotli.

Brotli-архивы нужно установить из репозитория или собрать утилиты:

git clone https://github.com/badger/libbrotli cd libbrotli autoreconf -i make install git clone https://github.com/google/brotli cd brotli ./configure make chmod +x bro ./bro —quality 11 —input <filename> —output <filename.br></filename.br></filename>

Пересборка Nginx с поддержкой brotli на Github.

Для сжатия «на лету» можно установить дополнительный модуль nginx brotli. Модуль Nginx для сжатия brotli «на лету» на Github.

Сжатие brotli для Apache

Сжатие brotli поддерживает Apache версии 2.4.26 и выше.

Для Apache есть модуль mod_brotli.

Модуль mod_brotli by kjdev на Github.

Как проверить сжатие данных

Алгоритм сжатия данных будет работать сразу после установки кодов. Проверить корректность работы можно несколькими способами.

Для проверки работы gzip есть Check GZIP compressed.

Фрагмент результатов проверки тестом

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

Фрагмент результатов проверки инструментом

Инструмент «Проверка скорости сайта» от PR-CY оценит скорость и покажет страницы, на которых не работает сжатие.

Фрагмент результатов проверки инструментом

Использовать минификацию HTML, CSS и JS

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

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение ".min". После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

  • minifycode.com
    Простой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
  • willpeavy.com/minifier
    Другой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
  • letteros.com/compressor
  • Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
  • htmlcompressor.com
    Инструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
  • jscompress.com
    Инструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
  • askapache.com/online-tools/compress-css
    Инструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
  • csscompressor.com
    Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.

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

Ускорить загрузку страницы помогает кэширование в браузере пользователя. При первой загрузке страницы файлы помещаются в кэш браузера с меткой времени, а при повторных посещениях они загружаются из кэша, а не с хостинга. Когда указанный промежуток времени пройдет, файлы обновятся с хостинга. Для кэширования подойдут файлы, которые изменяются не постоянно, иначе пользователь не увидит важных изменений. Статические объекты можно кэшировать от года и дольше.

Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:

Cache-Control: max-age=31536000

Директива "max-age" указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.

Google советует применять "no-cache" для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением "no-cache", но сначала проверит актуальность на сервере.

Кэширование для Nginx

Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша: 

location ~* \.(js|css|png|jpg|jpeg|gif)$ { expires 86400s; log_not_found off; }

Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение "max" указывает на кэширование навсегда.

Вместо времени хранения файла можно указать дату следующего обновления файла в кэше: 

expires Fri, 24 Nov 2017 01:01:01 GMT;

Строка log_not_found off нужна для снижения нагрузки на сервер, она отключает ведение лога сообщений с ошибкой 404 для перечисленных файлов. 

Кэширование для Apache


Метод Cache-Control

Метод позволяет указать для кэширования файлы конкретных форматов. В файле .htaccess в конструкции FilesMatch нужно указать расширения файлов для кэширования и время сохранения файла в кэше в секундах: 

# 1 Month for most static assets <filesmatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"=""> Header set Cache-Control "max-age=2592000" </filesmatch>

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

 <filesmatch ".(pl|php|cgi|spl|scgi|fcgi)$"=""> Header unset Cache-Control </filesmatch>
Кэширование по времени

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

 ## EXPIRES CACHING ## <ifmodule mod_expires.c=""> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </ifmodule> ## EXPIRES CACHING ##

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

После сохранения нужно обновить страницу.

Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:

Столбец Size в Chrome DevTool. Источник — Google

Вкладка Headers покажет, как установлен Cache-Control:

Проверка заголовка Cache-Control. Источник — Google

Сжать фотографии, иллюстрации и другую графику

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

Почитать по теме:
Как оптимизировать загрузку картинок: настройка lazy loading изображений

Как оптимизировать картинки для сайта:

  1. Подберите разрешение.
    Незачем загружать изображение в большом разрешении, если оно будет отображаться в маленьком без увеличения по клику.
  2. Подберите формат.
    JPEG подходит для фотографий, PNG для дизайнерской графики, SVG для вектора. Google также индексирует формат WebP, который весит меньше, но не все браузеры его поддерживают. Яндекс не индексирует SVG и изображения в скриптах.
  3. Уменьшайте количество цветов.
    Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.
  4. Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)
  5. Пропишите параметры в CSS.
    Укажите размеры в коде или в редакторе изображений CMS. Для разных экранов и дисплеев с матрицей Retina нужны дополнительные варианты изображения разных размеров, чтобы браузер загружал нужное для устройства.
  6. Используйте шрифты.
    Если вы еще используете графику вместо шрифтов для текста, замените надписи на шрифты, это удобнее и меньше весит. Такой текст можно скопировать, поменять, масштабировать в любой момент.
  7. Удалите лишние изображения.
    Неинформативные картинки, иллюстрации ради разбивки текста и непонятные схемы лучше заменить на качественные изображения, которые помогут понять тему материала, или вообще удалить, чтобы они не прибавляли вес странице.
  8. Минифицируйте.
    Удаляйте XML-разметку с лишними метаданными, она появляется при работе с картинками в некоторых графических приложениях. EXIF — информацию о геоданных, дате съемки, фотокамере тоже можно удалить.
  9. Используйте алгоритмы сжатия.
    Настройте на сервере gzip-сжатие для SVG-графики.

Инструменты и сервисы для оптимизации изображений на сайте:

  • CompressJPEG
    Сервис для сжатия JPEG и PNG без потерь качества.
  • PunyPNG
    Инструмент сжимает PNG, JPEG и GIF.
  • TinyPNG
    Инструмент для оптимизации изображений в PNG и JPEG.
  • Jpegtran
    Инструмент для оптимизации JPEG-изображений.
  • Optipng
    Инструмент для оптимизации PNG без потерь.
  • Pngquant
    Инструмент сжимает PNG-изображения.

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

Как оптимизировать изображения для Интернета и производительности 2020

Навигация
  • Планы
  • Характеристики
  • Клиенты
  • Связаться с нами
  • Забронировать демо
Авторизоваться Блог Кинста Брайан Джексон, .

Как легко оптимизировать изображения для Интернета (без потери качества)

Знаете ли вы, что оптимизация изображений перед загрузкой в ​​WordPress может иметь огромное влияние на скорость вашего сайта?

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

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

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

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

Что такое оптимизация изображения? (Оптимизированные и неоптимизированные изображения)

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

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

Вот пример оптимизированного и неоптимизированного изображения:

Как видите, при правильной оптимизации одно и то же изображение может быть на 75% меньше оригинала без потери качества.

Как работает оптимизация изображения?

Проще говоря, оптимизация изображений работает с использованием технологий сжатия, таких как «Lossy» и «Lossless», которые помогают уменьшить общий размер файла без какой-либо заметной потери качества.

Что значит оптимизировать изображения?

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

Почему так важна оптимизация изображения? Каковы преимущества оптимизации изображений?

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

  • Быстрее скорость веб-сайта
  • Улучшен рейтинг SEO
  • Более высокий общий коэффициент конверсии продаж и потенциальных клиентов
  • Меньше хранилища и пропускной способности (что может снизить стоимость хостинга и CDN)
  • Более быстрое резервное копирование веб-сайтов (также снижает стоимость хранения резервных копий)

Помимо видео, изображения - это следующий по значимости элемент на веб-странице.Согласно HTTP-архиву, изображений составляют в среднем 21% от общего веса веб-страницы.

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

Теперь вам может быть интересно, насколько действительно важна оптимизация изображений?

Согласно исследованию Strangeloop, задержка загрузки веб-сайта в одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

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

Это означает, что оптимизируя изображения для Интернета, вы можете как улучшить скорость сайта, так и повысить рейтинг WordPress в SEO.

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

Как сохранить и оптимизировать изображения для повышения производительности в Интернете?

Ключ к успешной оптимизации изображений для работы в Интернете - это найти идеальный баланс между минимальным размером файла и приемлемым качеством изображения.

Три вещи, которые играют огромную роль в оптимизации изображения:

  • Формат файла изображения (JPEG против PNG против GIF)
  • Сжатие (более высокое сжатие = меньший размер файла)
  • Размеры изображения (высота и ширина)

Выбрав правильную комбинацию из трех, вы можете уменьшить размер изображения до 80%.

Давайте рассмотрим каждый из них более подробно.

1. Формат файла изображения

Для большинства владельцев веб-сайтов единственные три формата файлов изображений, которые действительно имеют значение, - это JPEG, PNG и GIF. Выбор правильного типа файла играет важную роль в оптимизации изображения.

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

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

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

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

В WPBeginner мы используем все три формата изображений в зависимости от типа изображения.

2. Сжатие

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

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

Большинство инструментов для редактирования изображений, таких как Adobe Photoshop, On1 Photo, GIMP, Affinity Photo и другие, имеют встроенные функции сжатия изображений.

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

Хотя это немного вручную, эти два метода позволяют вам сжимать изображения перед их загрузкой в ​​WordPress, и это то, что мы делаем на WPBeginner.

Существует также несколько популярных плагинов WordPress, таких как Optimole, EWWW Image Optimizer и другие, которые могут автоматически сжимать изображения при их первой загрузке. Многие новички и даже крупные корпорации предпочитают использовать эти плагины для оптимизации изображений, потому что это просто и удобно.

Мы расскажем больше об этих плагинах WordPress позже в этой статье.

3. Размеры изображения

Обычно, когда вы импортируете фотографию со своего телефона или цифровой камеры, она имеет очень высокое разрешение и большие размеры файла (высоту и ширину).

Обычно эти фотографии имеют разрешение 300 точек на дюйм и размер от 2000 пикселей и более. Эти высококачественные фотографии хорошо подходят для печати или настольных издательских систем. Они не подходят для веб-сайтов.

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

Например, мы оптимизировали фотографию с исходным размером файла 1,8 МБ, разрешением 300 точек на дюйм и размером изображения 4900 × 3200 пикселей.

Мы выбрали формат jpeg для более высокого сжатия и изменили размеры до 1200 × 795 пикселей, а также уменьшили размер файла изображения до 103 КБ. Это на 94% меньше исходного размера файла.

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

Лучшие инструменты и программы для оптимизации изображений

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

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

Мы рекомендуем использовать эти инструменты для оптимизации изображений, прежде чем загружать их в WordPress, особенно если вы перфекционист.

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

Adobe Photoshop

Adobe Photoshop - это программное обеспечение премиум-класса с функцией сохранения изображений, оптимизированных для Интернета. Просто откройте изображение и нажмите «Файл» Сохранить для Интернета ».

Откроется новое диалоговое окно. Справа вы можете установить разные форматы изображений.Для формата JPEG вы увидите разные варианты качества. Когда вы выбираете свои параметры, он также показывает размер файла в нижнем левом углу.

GIMP

GIMP - бесплатная альтернатива популярному Adobe Photoshop с открытым исходным кодом. Его можно использовать для оптимизации ваших изображений для Интернета. Обратной стороной является то, что его не так просто использовать, как некоторые другие решения из этого списка.

Сначала вам нужно открыть ваше изображение в GIMP, а затем выбрать опцию File »Export As .Это вызовет диалоговое окно сохранения файла. Дайте вашему файлу новое имя, а затем нажмите кнопку экспорта.

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

TinyPNG

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

Они сожмут изображение и дадут вам ссылку для скачивания. Вы можете использовать их дочерний веб-сайт TinyJPG для сжатия изображений JPEG.

У них также есть расширение для Adobe Photoshop, которое мы используем в процессе редактирования изображений, потому что оно сочетает в себе лучшее из TinyPNG и TinyJPG внутри Photoshop.

Для разработчиков у них есть API для автоматического преобразования изображений, а для новичков у них есть плагин WordPress, который может автоматически делать это за вас (подробнее об этом позже).

JPEG Mini

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

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

ImageOptim

ImageOptim - это утилита для Mac, которая позволяет сжимать изображения без потери качества, находя лучшие параметры сжатия и удаляя ненужные цветовые профили.

Альтернатива Windows для этого - Trimage.

Лучшие плагины для оптимизации изображений для WordPress

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

Ниже представлен наш список лучших плагинов для сжатия изображений WordPress:

  1. Optimole - популярный плагин от команды ThemeIsle.
  2. EWWW Оптимизатор изображения
  3. Сжатие изображений JPEG и PNG - плагин от команды TinyPNG, упомянутой выше в статье.
  4. Imagify - плагин от популярной команды плагинов WP Rocket.
  5. Оптимизатор изображения ShortPixel
  6. WP Smush
  7. reSmush.it

Использование любого из этих плагинов для оптимизации изображений WordPress поможет вам ускорить работу вашего сайта.

Последние мысли и передовые методы оптимизации изображений

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

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

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

В качестве альтернативы вы можете использовать управляемую хостинговую компанию WordPress, потому что они часто предлагают как кеширование, так и CDN как часть платформы.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как работает сжатый HTML и зачем он вам нужен

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

image-filetypes

В этой статье мы рассмотрим два основных метода сжатия файлов HTML: почему файлы HTML должны быть сжаты и как это сделать.

Сжатие и минификация

Что касается оптимизации файлов HTML, существует два основных метода: сжатие , и минимизация , .На первый взгляд они кажутся похожими, но на самом деле это две разные техники, так что не путайте их.

Минификация

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

Пример HTML-страницы:

  & lt; html> & lt; head> & lt; title> Здесь ваш заголовок & lt; / title> & lt; / head> & lt; body> & lt; div> & lt; img src = "облака.jpg "> & lt; / div> & lt; h2> Это заголовок & lt; / h2> & lt; p> Отправьте мне письмо по адресу & lt; a href = "mailto: [email protected]"> [email protected]< / a>. & lt; / p> & lt; p> Это новый абзац! & lt; / p> & lt; p> & lt; strong> & lt; em> Это новый абзац, выделенный жирным шрифтом и курсивом. & lt; / em> & lt; / strong> & lt; / p> & lt; / body> & lt; / html>  

Пример уменьшенной HTML-страницы:

  & lt; title> Здесь ваш заголовок & lt; / title> & lt; div> & lt; img src = clouds.jpg> & lt; / div> & lt; h2> Это заголовок & lt; / h2> & lt; p> Отправьте мне письмо по адресу & lt; a href = mailto: [email protected]> [email protected]< / a>. & lt; p> Это новый абзац! & lt; p> & lt; strong> & lt; em> Это новый абзац, выделенный жирным шрифтом и курсивом. & lt; / em> & lt; / strong>  

Оригинальный размер: 354.Минимальный размер: 272. Экономия: 82 (23,16%).

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

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

Сжатие

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

Но поскольку протокол HTTP поддерживает сжатие, ваш веб-сервер может сжать страницу перед ее отправкой посетителю (при условии, что сжатие включено в настройках вашего сервера), а затем браузер посетителя может вернуть страницу в исходное состояние.

Наиболее распространенной схемой сжатия является GZIP , формат файла, использующий алгоритм сжатия без потерь, называемый DEFLATE.

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

Рассмотрим такую ​​строку текста (пример взят с веб-сайта GZIP):

  Бла-бла-бла-бла-бла. 

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

  Б {лах б} {лах б} {лах б} {лах б} лах.  

Первое вхождение - это наша ссылка, оставьте:

  Бла б {лах б} {лах б} {лах б} лах. 

Второе вхождение относится к первому вхождению, которое отстает на пять символов и состоит из пяти символов:

  Бла б [5,5] {лах б} {лах б} лах. 

Но в этом случае алгоритм распознает, что следующее вхождение - это та же последовательность символов, поэтому он увеличивает длину ссылки еще на пять:

  Бла б [5,10] {лах б} лах. 

И снова:

  Бла б [5,15] лах.  

И алгоритм достаточно умен, чтобы понять, что следующие три символа являются первыми тремя символами в ссылке, поэтому он расширяется на три:

  Бла б [5,18]. 

А теперь подумайте о типичном HTML-файле и о том, сколько повторов внутри него. Почти каждый тег, например , имеет соответствующий закрывающий тег, например . Кроме того, многие теги повторяются повсюду, например

,

, ,
  • и т. Д.Атрибуты также часто повторяются, включая class , href и src . Легко понять, почему сжатие GZIP так эффективно с HTML.

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

    Почему следует сжимать и минимизировать

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

    Более быстрая загрузка страниц

    В среднем минификатор HTML может уменьшить размер файла примерно на 3 процента с базовыми настройками.С дополнительными расширенными настройками размер файла HTML можно уменьшить еще на 3–7 процентов, что дает потенциальное сокращение до 10 процентов. Это напрямую приводит к более быстрой загрузке страницы.

    Меньше используемой полосы пропускания

    Допустим, у вас есть 10 файлов, каждый из которых уменьшен от 50 до 45 КБ, что дает общий размер 50 КБ.Допустим, ваш веб-сайт обслуживает в среднем 1000 посетителей каждый день, при этом на каждое посещение приходится в среднем десять страниц. Только минимизация HTML снижает использование полосы пропускания на 50 МБ в день (1,5 ГБ в месяц).

    Сжатие + минификация

    Как видите, минификация HTML полезна сама по себе, особенно когда ваш сайт становится больше, файлы становятся больше, а трафик увеличивается.Обратите внимание, что руководство Google PageSpeed ​​рекомендует минимизировать HTML, поэтому, если вы настроены скептически, позвольте этому убедить вас в обратном.

    Но что лучше всего в оптимизации HTML, так это то, что вам не нужно выбирать ни минимизацию, ни сжатие. Вы можете сделать и то, и другое! Фактически, должен делать и то, и другое.

    В среднем можно ожидать, что сжатие GZIP сократит HTML-файл на 70–90 процентов.Используя приведенный выше пример с консервативной оценкой сжатия, уменьшенные файлы HTML будут увеличиваться с 45 до 13,5 КБ каждый, что дает общее сжатие 365 КБ. По сравнению с несжатым / несжатым трафиком, пропускная способность вашего сайта теперь уменьшена на 365 МБ в день (11 ГБ в месяц).

    И помимо экономии полосы пропускания, каждая страница загружается значительно быстрее, потому что браузеру конечного пользователя нужно загрузить только 13.5 КБ против 50 КБ на страницу.

    Как сжимать и минимизировать HTML

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

    Плагины WordPress

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

    Большинство плагинов кэширования делают больше, чем просто кешируют страницы. Например, WP Fastest Cache и W3 Total Cache имеют настройки одним щелчком мыши, которые позволяют включить минификацию HTML и сжатие GZIP, а также другие функции, которые еще больше ускоряют загрузку страниц и уменьшают использование полосы пропускания.

    Если вам нужна минимизация только , мы рекомендуем плагин Minify HTML. Это просто, поддерживает HTML / CSS / JS и позволяет немного настроить метод минификации (например, следует ли удалять http: и https: из URL-адресов).

    Статические минификаторы HTML

    Если ваши HTML-файлы статичны (т. Е. Не генерируются динамически CMS или веб-фреймворком), то вы можете поддерживать два набора HTML-файлов: «исходный» набор, который не минимизирован для удобного редактирования, и «минимизированный» набор. , который вы создаете каждый раз, когда вносите изменения в исходный файл.

    Для уменьшения используйте один из следующих инструментов:

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

    Включить сжатие GZIP

    Действия по включению сжатия GZIP могут отличаться в зависимости от того, какое программное обеспечение веб-сервера вы используете.Поскольку Apache - самый популярный вариант, мы рассмотрим, как включить его с помощью .htaccess.

    Подключитесь к своему веб-серверу с помощью FTP, затем создайте файл с именем .htaccess в корневом каталоге. Отредактируйте файл.Кодирование содержимого:. * Gzip. * & lt; / ifModule> & lt; FilesMatch "\. (html? | txt | css | js | php | pl) $"> SetOutputFilter DEFLATE & lt; / FilesMatch>

    Не уверены, работает ли сжатие на вашем сайте? Проверьте это с помощью этого инструмента.

    Для максимальной эффективности вы также должны узнать, как проверять, очищать и оптимизировать свой CSS.

    blocklist-sites-parental 7 сайтов, которые все родители должны добавить в свой черный список прямо сейчас

    Вы еще не заблокировали YouTube Kids? Вот еще несколько веб-сайтов, которые все родители должны блокировать ради своих детей.

    Об авторе

    Джоэл Ли имеет степень бакалавра наук. Кандидат компьютерных наук и более девяти лет профессионального опыта в области написания и редактирования. Он был главным редактором MakeUseOf с 2018 года.

    Подробнее о Джоэле Ли
    Подпишитесь на нашу рассылку новостей

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

    Еще один шаг…!

    Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

    .

    Как ускорить работу веб-сайта

    Время до первого байта (TTFB) и время загрузки страницы - это два разных способа измерения скорости страницы.

    TTFB измеряет время, которое требуется браузеру пользователя для получения первого байта от вашего сервера после отправки ему HTTP-запроса.

    TTFB дает некоторое представление о времени ответа сервера, но не имеет большого значения для пользователей.

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

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

    Так каков хороший результат TTFB?

    Значение TTFB менее 200 миллисекунд вполне приемлемо, в то время как все, что превышает 500 миллисекунд, является медленным, начинает замедлять общую производительность.

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

    Вы должны стараться держать его как можно ниже, потому что все, что превышает 3 секунды, является слишком высоким.

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

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

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

    GTMetrix

    Мощный и простой в использовании, GTMetrix.com предоставляет подробный отчет обо всем, что касается скорости страницы.

    Вы можете выбрать тип браузера (Firefox или Chrome), протестировать в 7 разных местах и ​​проверить производительность сайта при различных типах подключения (широкополосное, кабельное или мобильное).

    GTMetrix присваивает вашему сайту оценку от F до A и перечисляет наиболее важные сведения о странице.

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

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

    WebPage Test

    WebPage Test так же подробен, как GTMetrix, но предлагает больше возможностей (40+ местоположений серверов и 25+ типов браузеров, включая мобильные).

    Пользоваться несложно. Вставьте URL своего сайта, выберите расположение сервера и браузер и нажмите кнопку Start Test .

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

    Pingdom

    Pingdom - одна из самых популярных сегодня сервисов мониторинга веб-сайтов.

    Так же, как WebPage Test и GTMetrix, он позволяет пользователям выбирать место, из которого они хотят запустить тест.Однако Pingdom не позволяет вам проводить тест скорости в разных браузерах.

    Pingdom охватывает все основные аспекты скорости страницы и отображает информацию аккуратно и компактно. По сравнению с первыми двумя инструментами он менее всеобъемлющий.

    Google PageSpeed ​​Insights

    Хотите узнать, как сразу же ускорить работу веб-сайта?

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

    В отличие от некоторых других инструментов, Google PageSpeed ​​предоставляет отчеты как для настольной, так и для мобильной версии вашего веб-сайта.

    Инструмент оценивает ваш сайт по шкале от 1 до 100. Чем выше оценка, тем лучше.

    Все, что старше 85 - это хорошо. Если в вашем протоколе указано 85+, вы можете похвалить себя за хорошее шоу.

    Load Impact

    Облачный инструмент Load Impact запускает тест скорости веб-сайта, используя до 50 виртуальных пользователей в бесплатной версии, чтобы записать производительность вашего сервера, когда он подвергается нагрузке.

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

    .

    Смотрите также

    Поделиться в соц. сетях

    Опубликовать в Facebook
    Опубликовать в Одноклассники
  • Вы можете оставить комментарий, или ссылку на Ваш сайт.

    Оставить комментарий