{"id":18270679,"url":"https://github.com/ruslanxdev/yandex-shri-2018-homework-7","last_synced_at":"2026-02-03T20:09:09.546Z","repository":{"id":143848850,"uuid":"128158430","full_name":"ruslanxdev/yandex-shri-2018-homework-7","owner":"ruslanxdev","description":"Домашнее задание #7 \"Performance\" в ШРИ Яндекса 2018.","archived":false,"fork":false,"pushed_at":"2018-04-05T23:45:00.000Z","size":84663,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-12T03:48:41.707Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ruslankhh.com/yandex-shri-2018-homework-7/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruslanxdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-05T04:20:20.000Z","updated_at":"2018-04-07T21:51:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"a46897cb-c244-46f7-b9ae-ec07d1390397","html_url":"https://github.com/ruslanxdev/yandex-shri-2018-homework-7","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ruslanxdev/yandex-shri-2018-homework-7","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-7","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-7/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-7/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-7/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruslanxdev","download_url":"https://codeload.github.com/ruslanxdev/yandex-shri-2018-homework-7/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-7/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29055711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T15:43:47.601Z","status":"ssl_error","status_checked_at":"2026-02-03T15:43:46.709Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T11:38:48.232Z","updated_at":"2026-02-03T20:09:09.510Z","avatar_url":"https://github.com/ruslanxdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Домашнее задание \"Performance\"\n\nДомашнее задание #7 в ШРИ Яндекса 2018.\n\n## Задание\n\n![Лайфхакер](reports/screenshot.png)\n\n- [x] Найти проблемы со скоростью загрузки сайта [Лайфхакер](https://lifehacker.ru) и предложить способы их решения.\n\n## Запуск\n\n```bash\n$ npm i\n```\n\nПосмотреть архив отчётов (только lighthouse, psi — выводится в cli):\n\n```bash\nnpm start\n```\n\nПровести аудит сайта:\n\n```bash\nnpm run audit\n```\n\n## Выполнение задания\n\n- Сохранил страницу в репозиторий для истории, весь аудит проводился на реальном сайте.\n- Добавил `\u003cmeta name=\"robots\" content=\"noindex\"\u003e` в сохранённый сайт.\n- Для аудита использовал:\n  - [lighthouse](https://github.com/GoogleChrome/lighthouse)\n  - [psi](https://github.com/addyosmani/psi) (PageSpeed Insights)\n- Сгенерировал несколько отчётов.\n\n### Отчёт\n\n#### Lighthouse Performance Mobile\n\nОбщая оценка: **6/100**.\n\n- Первая отрисовка (First Paint): **неизвестно**\n- Первая значимая отрисовка (First Meaningful Paint): **6 870 мс**\n- Первая интерактивность (First Interactive): **34 910 мс**\n- Последовательная интерактивность (Consistently Interactive): **слишком долго**\n- Индекс перцептивной скорости (Perceptual Speed Index): **15 655**\n- Предполагаемое время задержки ввода (Estimated Input Latency): **401 мс**\n\n#### Lighthouse Performance Desktop\n\nОбщая оценка: **22/100**.\n\n- Первая отрисовка (First Paint): **неизвестно**\n- Первая значимая отрисовка (First Meaningful Paint): **4 040 мс**\n- Первая интерактивность (First Interactive): **25 580 мс**\n- Последовательная интерактивность (Consistently Interactive): **25 580 мс**\n- Индекс перцептивной скорости (Perceptual Speed Index): **25 898**\n- Предполагаемое время задержки ввода (Estimated Input Latency): **384 мс**\n\n#### PageSpeed Insights Mobile\n\n```bash\nURL:       lifehacker.ru\nStrategy:  mobile\nSpeed:     63\nUsability: 99\n\nCSS size                                   | 401 kB\nHTML size                                  | 497 kB\nImage size                                 | 1.06 MB\nJavaScript size                            | 3.2 MB\nCSS resources                              | 18\nHosts                                      | 45\nJS resources                               | 73\nResources                                  | 184\nStatic resources                           | 94\nOther size                                 | 126 kB\nTotal size of request bytes sent           | 60.8 kB\n\nEnable GZIP compression                    | 1.12\nLeverage browser caching                   | 17.13\nMinify CSS                                 | 0.06\nMinify HTML                                | 0.44\nMinify JavaScript                          | 0.24\nMinimize render blocking resources         | 40\nOptimize images                            | 2\nSize tap targets appropriately             | 0.15\n```\n\n#### PageSpeed Insights Desktop\n\n```bash\nURL:       lifehacker.ru\nStrategy:  desktop\nSpeed:     78\n\nCSS size                                   | 416 kB\nHTML size                                  | 680 kB\nImage size                                 | 5.51 MB\nJavaScript size                            | 3.4 MB\nCSS resources                              | 24\nHosts                                      | 44\nJS resources                               | 81\nResources                                  | 218\nStatic resources                           | 124\nOther size                                 | 195 kB\nTotal size of request bytes sent           | 62 kB\n\nEnable GZIP compression                    | 1.09\nLeverage browser caching                   | 11.42\nMinify CSS                                 | 0.06\nMinify HTML                                | 0.53\nMinify JavaScript                          | 0.24\nMinimize render blocking resources         | 10\nOptimize images                            | 2.52\n```\n\n### Проблемы и способы их решения\n\n- Блокировка основного потока скриптами.\n    - Для критических сценариев можно вложить скрипты в HTML.\n    - Для некритических можно использовать специальные атрибуты: `async` или `defer`.\n- Блокировка основного потока стилями.\n    - Стили можно разбить на разные файлы и добавить атрибут `media`.\n    - Можно вставить поблочно стили перед теми блоками где они необходимы в HTML.\n- Несовременные форматы изображений (Там даже есть GIF, размером в 3 748 Кб).\n    - Можно использовать форматы изображений следующего поколения (JPEG 2000, JPEG XR, and WebP).\n- Неоптимизированный порядок доставки ресурсов.\n    - Можно использовать `\u003clink rel=\"preload\"\u003e` для определения приоритетности получения ресурсов.\n- Неэффективная загрузка изображений.\n    - Можно использовать ленивую подгрузку в фоне. Загружать сначала только те изображения, которые видны, а после в фоне скрытые (вне поля видимости пользователя) изображения.\n- Лишние стили.\n    - Можно оставить только те стили CSS, которые используются на странице.\n- Неотзывчивые изображения.\n    - Можно добавить отзывчивые изображения. Чтобы для конкретных размеров блоков/эканов загружались изображения оптимального размера.\n- Неоптимизированные изображения.\n    - Необходимо оптимизировать изображения, уменьшив их размер.\n    - Элементы интерфейса можно объединить в спрайты.\n- Нет сжатия текста.\n    - Добавить сжатие текста с помощью gzip, deflate или brotli.\n- Большая сетевая награзка.\n    - Слишком много грузится данных. Нужно меньше загружать данных или делать это по запросу пользователя.\n- Неэффективная политика кэша.\n    - Можно более оптимально разбить скрипты и стили на разные файлы и кэшировать на больший период те, которые реже меняются.\n- Избыточный размер DOM: 2 449 узла.\n    - Нужно уменьшить количество элементов в DOM-е. Упростить вёрстку, избавиться от излишней вложенности, использовать современные способы вёрстки.\n- Слишком много критических запросов: 47.\n    - Объединить скрипты в несколько файлов.\n    - Объединить стили в несколько файлов.\n    - Удалить неиспользуемые модули в файлах сторонных библиотек (jQuery, Font Awesome). Там даже в коде есть такой комментарий:\n        ```html\n        \u003c!-- TODO: remove --\u003e\n        \u003clink rel=\"stylesheet\" href=\"index_files/font-awesome.css\"\u003e\n        ```\n- Время загрузки скриптов слишком большое: 13 620 мс.\n    - Возможно стоит отказаться от такого количества скриптов статистики и рекламы\u003cbr\u003e (оставить только Яндекс ;)\n- Время работы основного потока слишком велико: 22 090 мс.\n    - Возможно стоит писать меньше кода и делать его проще, что его обработка и выполнение происходили быстрее.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruslanxdev%2Fyandex-shri-2018-homework-7","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruslanxdev%2Fyandex-shri-2018-homework-7","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruslanxdev%2Fyandex-shri-2018-homework-7/lists"}