Новошахтинск

Укажите свой город

8 (800) 250-32-83

Телефоны для связи:

Техническая поддержка

+7 (4932) 21-22-34

Отдел продаж

+7 (4932) 22-21-23

SEO специалисты

+7 (4932) 21-22-34

Бухгалтерия

+7 (4932) 22-13-33

Руководство

+7 (4932) 21-22-33

Контакты

Обратный звонок

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

В этой статье мы по пунктам опишем какие методы использовали для оптимизации загрузки страницы на клиенте на примере страницы https://webproject.group/seo



Не используем иконки

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

Мы выбрали использование svg иконок в таком формате. Такое использование лучше по некоторым причинам:

  1. Быстро и удобно встраивать иконки на сайт. Требуется только разместить код, а обычные картинки необходимо предварительно скачать
  2. Быстрая загрузка и экономия трафика. SVG иконки показываются на странице моментально и не требуют от браузера отдельного запроса для их получения
  3. Легко изменить цвет иконки с помощью свойства fill: red;

Объединяем все скрипты и css в один файл

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


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

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


Используем CDN

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


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

Очень просто оптимизировать до 90% размера картинок через https://tinypng.com


Используем GZIP сжатие

Для web сервера apache

 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


Используем кеширование

Это файлы, которые находятся на основном сервере. Подробнее

 ExpiresActive On ExpiresDefault "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType text/css "access plus 1 year"

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

Очень легко встроить lazyLoad в проект с помощью этого описания


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

Современные браузеры не загружают контент из display: none. После загрузки основной страницы, можно показать скрытый контент и он будет загружен Подробнее об этом

$(function() {$('.banner').show()}) 

19 августа 2019

Россия:

8-800-250-32-83

Москва:

+7 (985) 768-32-83

Санкт-Петербург:

+7 (812) 925-42-72

Нижний новгород:

+7 (831) 410-72-73

Иваново:

+7 (4932) 21-22-33

Владимир:

+7 (919) 002-1-002

Кострома:

+7 (4942) 499-664

Ярославль:

+7 (4942) 499-664

support@webproject.group

manager@webproject.group

seo@webproject.group

billing@webproject.group

director@webproject.group

Написать нам

© 2011–2024 ООО «Web Project Group»