Тема выпускной квалификационной работы: "Оптимизация загрузки и производительности мобильной версии сайта социальной сети Одноклассники". Цель работы — создание программного обеспечения, интегрируемого в мобильную версию сайта социальной сети "Одноклассники"для оптимизации ее функционирования по заранее выбранным показателям.В ходе данной работы были решены следующие задачи: Описана методика снижения времени загрузки сайта. Обоснованно выбраны наиболее значимые для работы социальной сети показатели оптимизации. Обосновано количество выбранных оценочных характеристик. Разработана методика оптимизации производительности сайта. Были произведены оптимизации следующих аспектов сайта: Разделение ресурсов для уменьшения количества неиспользуемого кода на страницах. Использование современной версии языка JavaScriptВнедрение отложенной загрузки изображений. Замена PNG изображений на SVG изображения. Был проведен анализ программных средств и инструментов для разработки программного обеспечения.

The subject of the graduate qualification work is "Optimization of load and performance of the mobile version of the Odnoklassniki social network site."The purpose of the work is to create software, integrate into the mobile version of the Odnoklassniki social network site to optimize its functioning according to pre-selected indicators. In the course of this work, the following tasks were solved: Described a technique to reduce the loading time of the site.Reasonably selected the most significant for the work of social network optimization indicators. Justified the number of selected evaluation characteristics. Developed a methodology for optimizing site performance. The following aspects of the site have been optimized:Separation of resources to reduce the amount of unused code on pagesUsing Modern JavaScriptImplementation of lazy loading of imagesReplace PNG images with SVG images. An analysis of software tools and tools for software development was carried out.

• 1. Обзор предметной области
  • 1.1. Измерение метрик производительности
    • 1.1.1. Оценка оптимизации в полевых условиях
    • 1.1.2. Оценка оптимизации в лабораторных условиях
  • 1.2. Разделение CSS и JS ресурсов по страницам
    • 1.2.1. Подключение CSS и JS на страницу
    • 1.2.2. Разделение ресурсов вместе с HTTP/2
  • 1.3. Загрузка JS файлов с современным синтаксисом
  • 1.4. Отложенная загрузка изображений
  • 1.5. Использование векторных изображений
• 2. Анализ существующий решений
  • 2.1. Сбор статистики с помощью CrUX и библиотеки web-vitals
    • 2.1.1. Chrome User Experience Report
    • 2.1.2. Библиотека web-vitals
  • 2.2. Разделение ресурсов с помощью Webpack
  • 2.3. Загрузка современной версии JS с помощью скриптовых модулей
  • 2.4. Методы и библиотеки для ленивой загрузки изображений
    • 2.4.1. Методы для ленивой загрузки
    • 2.4.2. Библиотеки для ленивой загрузки
  • 2.5. Способы использования SVG-изображений на странице
• 3. Реализация предложенных методов
  • 3.1. Самостоятельно написанный сбор статистики производительности
  • 3.2. Динамическая загрузка CSS и JS с помощью AJAX
  • 3.3. Настройка транспилятора для поддержки ES2015
  • 3.4. Создание компонента изображения, поддерживающего ленивую загрузки
  • 3.5. Использование SVG как фоновых изображений
• 4. Результаты
• ПРИЛОЖЕНИЕ 1. ЛИСТИНГ КОДА СБОРА КЛИЕНТСКОЙ СТАТИСТИКИ
• ПРИЛОЖЕНИЕ 2. ЛИСТИНГ КОДА ДИНАМИЧЕСКОЙ ЗАГРУЗКИ СТИЛЕЙ
• ПРИЛОЖЕНИЕ 3. ЛИСТИНГ КОДА ЗАМЕНЫ ИЗОБРАЖЕНИЙ НА SVG