УДК 004.8

Васяева Татьяна Александровна – кандидат технических наук, доцент, декан факультета «Информационные системы и технологии», ФГБОУ ВО «Донецкий национальный технический университет», tanechka.vasyaeva@yandex.ru.

Рябко Максим Алексеевич - магистрант кафедры автоматизированных систем управления, ФГБОУ ВО «Донецкий национальный технический университет», maxryabko2706@yandex.ru.

Применение генетических алгоритмов для разработки адаптивных веб-сайтов

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

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

Vasiaeva Tatiana Alexandrovna – Candidate of Technical Sciences, Associate Professor, Dean of the Faculty of Information Systems and Technologies, Associate Professor of the Department of Automated Control Systems, FSBEI OF HIGHER EDUCATION "DONETSK NATIONAL TECHNICAL UNIVERSITY", Donetsk, DPR, Russian Federation, tanechka.vasyaeva@yandex.ru

Riabko Maxim Alekseevich - Graduate student of the Department of Automated Control Systems, FSBEI OF HIGHER EDUCATION "DONETSK NATIONAL TECHNICAL UNIVERSITY", Donetsk, DPR, Russian Federation, maxryabko2706@yandex.ru

Using Genetic Algorithms to Develop Responsive Websites

Annotation: In this article, a method for applying a genetic algorithm for the development of adaptive websites is discussed. Genetic algorithms, as a technology within artificial intelligence, are used to optimize website parameters, such as the number of connected files. This article will provide an example of how a genetic algorithm works to help optimize the performance of a website on various devices in terms of adaptability and efficiency.

Key words: genetic algorithm, adaptivity, website, artificial intelligence, web design, optimization.

 

Введение

В современном мире все больше и больше людей используют свои мобильные устройства для доступа к сети интернет. Это создает значительные вызовы для веб-разработчиков, которые должны обеспечить оптимальное отображение своих веб-сайтов на различных устройствах (ПК, смартфоны, планшеты) под разными операционными системами (Windows, Android, IOS). Развитие технологий искусственного интеллекта способствует успешному решению этой проблемы. В области адаптивного дизайна веб-сайтов разработчики используют передовые технологии для улучшения поиска наилучших решений, основанных на заданных критериях, при нахождения наиболее эффективных и удовлетворительных макетов. В данной статье рассмотрено применение генетических алгоритмов для разработки адаптивного веб-сайта.

Цель исследования

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

Реализация генетического алгоритма

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

Первым шагом является определение критерия оптимизации (фитнесс-функции). В контексте разработки адаптивных веб-сайтов поставим цель – минимизировать время загрузки и улучшить производительность сайта на различных устройствах, таким образом, критерием оптимизации является минимизация времени загрузки страницы веб-сайта. Для подсчета времени загрузки веб-страницы используется функция языка JavaScript. Данный критерий был выбран из-за того, что скорость загрузки может зависеть от большого количества параметров [1].

Каждый индивид в популяции представляет собой набор параметров веб-сайта, которые используются для генерации конфигурации веб-страницы. Были выбраны следующие параметры оптимизации: макет страницы (grid, flexbox, float или block), количество подключенных CSS-файлов (от 1 до 10), количество подключенных JavaScript-файлов (от 1 до 10), количество изображений на странице (от 1 до 20), формат изображений (jpeg, png, webp), количество шрифтов на странице (от 1 до 5), размер шрифтов (от 10pt до 50pt), наличие кэширования. Таким образом, каждому индивиду соответствует веб-сайт, с параметрами, определенными его структурой.

Рассмотрим функцию скрещивания [2]. Отобранные индивиды оператором репродукции скрещиваются для получения потомков. Операция скрещивания происходит путём выбора значения для каждого параметра. Выбор значения осуществляется от первого или второго родителя (вероятность 0.5).

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

Отбор лучших индивидов производится на основе их функции приспособленности. Решается задача минимизация фитнесс-функции, чтобы минимизировать время загрузки сайта. На рисунке 1 представлена программная реализация функций скрещивания и мутации.

Рисунок 1 – Функции скрещивания и мутации

 

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

Работа данного генетического начинается с инициализации начальной популяции (веб-сайтов с разнообразными параметрами, влияющими на скорость загрузки веб-сайта [4]) случайным образом. В каждом поколении алгоритм программно оценивает время загрузки веб-страницы, отбирает лучшие конфигурации и использует их для создания нового поколения путём скрещивания и мутации. Этот процесс повторяется на протяжении заданного количества поколений, с целью поиска оптимального решения. Результатом работы генетического алгоритма является конфигурация сайта с наименьшим временем загрузки и лучшей производительностью, обеспечивая адаптивность сайта на различных устройствах.

Тестирование работы генетического алгоритма

Разработанный описанный выше генетический алгоритм, протестирован в реальных условиях. Лучший результат работы представлен в таблице 1. Было проведено более ста различных генераций, из которых были выбраны наилучшие результаты.

Таблица 1 – Лучшее решение, найденное генетическим алгоритмом

Параметр

Значение

Макет

Flexbox

Количество подключенных CSS-файлов

1

Количество подключенных JS-файлов

1

Количество изображений на странице

1

Формат изображения

.jpeg

Количество использованных шрифтов

1

Размер шрифта

12

Наличие кэширования

+

 

Реализован базовый веб-сайт с найденной генетическим алгоритмом конфигурацией.

Реализация и тестирование веб-сайта

Проанализировав результаты работы генетического алгоритма, был разработан веб-сайт с помощью языка HTML и таблиц стилей CSS. При разработке использовались все параметры, указанные в таблице 1. Также, были реализованы и другие варианты веб-страницы, по результатам работы генетического алгоритма. Экспериментальные исследования представлены в таблице 2.

Таблица 2 – Экспериментальные исследования по времени загрузки

Параметры оптимизации

Время загрузки

Flexbox, 1, 1, 1, .jpeg, 1, 12, +

24,56 миллисекунд

Grid, 5, 2, 4, .webp, 2, 14, +

43 миллисекунды

Flexbox, 2, 1, 2, .png, 1, 14, +

35,21 миллисекунд

Flexbox, 3, 3, 1, .png, 1, 13, -

31,54 миллисекунд

Grid, 1, 2, 2, .jpeg, 2, 12, +

29,43 миллисекунд

Проведены исследования по подсчету времени, необходимого для загрузки веб-страницы на устройствах с различным разрешением экрана. Проанализировав результат работы на различных устройствах, был сделан вывод, что среднее время загрузки приближается к 25-30 миллисекундам. Тестирование проводилось с помощью виртуальных средств тестирования. Результаты тестирования для сайта с конфигурацией в таблице 1 показаны в таблице 3.

Таблица 3 – Тестирование на устройствах с различным разрешением экрана

Устройство

Разрешение экрана

Время загрузки

iPad Pro

1024х1366

29,34 миллисекунд

Samsung Galaxy A51

412х914

36,41 миллисекунд

Google Nest Hub Max

1280х800

31,12 миллисекунд

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

Заключение

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

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

Список использованной литературы

1.                   Oliver A., Monmarché N., Venturini G. Interactive Design of Web Sites with a Genetic Algorithm //ICWI. – 2002. – С. 355-362.

2.                   Гладков Л., Курейчик В., Курейчик В. Генетические алгоритмы. – Litres, 2022.

3.                   Asllani A., Lari A. Using genetic algorithm for dynamic and multiple criteria web-site optimizations //European journal of operational research. – 2007. – Т. 176. – №. 3. – С. 1767-1777.

4.                   Modé E. Responsive Web Design and Optimizing Loading Times on Mobile Devices for Enhanced Web Presence. – 2014.

5.                   Gustafson A. Adaptive web design. – Peachpit Press, 2015.