Оптимизация трафика сайта от 1 тб до 12 мб

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

Мы разработали портал eurasiametaverse.com и во время разработки столкнулись с рядом проблем, а именно с оптимизацией. Были два момента, которые мы не могли упустить при решении вопросов с оптимизацией: 

1 - тяжелое модели планет, 2 - технология three.js, которая сама по себе очень “прожорливая” как по железу, так и по трафику. 

Как мы решили данные проблемы:  

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

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

В конечном итоге пользователь уже загружал не более 100 мб и загрузка полного сайта начала занимать более 12 минут, но команда “Crocos” на этом не остановилась. После нескольких изменений концептов планет, мы смогли уменьшить весь планеты до 12 мб, благодаря искусственному 3Д объему элементов планеты. 

Вторая проблема была уже с самой технологией, которая позволяет показывать сайт в браузере в 3D формате. Самым тяжелым в ней было то, что на весь Казахстан меньше 10 разработчиков которые знают three.js.

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

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

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

(Но лучше не повторять дома и обратиться к нам, чтобы мы провели диагностику и сделали это Вам быстрее и качественнее)

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

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

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

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

Минификация и сжатие кода

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

Использование Content Delivery Network (CDN)

Content Delivery Network (CDN) – это сеть серверов, которые расположены в разных частях мира и предназначены для быстрой доставки контента пользователям. Использование CDN позволяет ускорить загрузку страницы, так как контент будет загружаться с сервера, который находится ближе к пользователю.

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