Елемент продуктивності та одна сторінка, забагато вирішених CSS та JavaScript - HTMLCSS - Програмування -

[Вирішено] Елемент продуктивності та одна сторінка, занадто багато CSS та Javascript

Здравствуйте !

Я створив сайт Wordpress, заснований на темі Astra, з Elementor (+ деякі власні модифікації CSS через Astra), в режимі "одна сторінка", розміщений на o2switch. Він відображається на пристойній швидкості, однак сайти з тестуванням продуктивності дають мені погану оцінку - лише 60% для Google (гірше на мобільних 12%!), Що викликає у мене страх за SEO.

Дивно, але згідно з PageSpeedTest, це Google CDN/Maps/Fonts, які витрачають на мене багато секунд. Крім цього, Google заохочує мене вдосконалити таблиці стилів CSS та JavaScript. Через веб-інспектора ми бачимо, що їх у мене багато. Я також зауважую, що деякі таблиці стилів є "мінімальними", навіть незважаючи на те, що я видалив мої плагіни кешу/мініфікації (невтішні результати чи помилки). Нарешті я помічаю, що у мене є дублікати таблиць стилів.

=> Чи було б корисно очистити та/або об’єднати мої декілька таблиць стилів CSS ? Якщо так, то як (я самоучка.) ?
=> Що стосується Javascript, про що я абсолютно нічого не знаю, чи повинен я це якось торкатися ?
=> Чи бачите ви слабкі сторони або основні помилки при будівництві ділянки, це заважало б роботі ?

дуже тобі дякую

Більше 5 місяців файлів для завантаження на домашню сторінку, і це займає більше 6 секунд, поки я зв’язаний, зрозуміло, що на вашому сайті є pb

Ви розміщуєте все на одній сторінці, це зовсім не гарна ідея. Ті, хто відвідують ваш сайт із мобільним пристроєм, будуть вас проклинати. Ви можете завантажувати різні розділи за запитом залежно від положення вертикальної прокрутки (потрібно js) або сторінки, присвяченої кожному розділу.

Спробуйте також оптимізувати розмір ваших зображень, щоб зменшити вагу.

Редагувати: наприклад, ваше фонове зображення з повторюваними трикутниками. Зробіть менший малюнок, який ви дублюєте на x і, можливо, y за допомогою css.

Приклад просто дурний: ваш логотип у SVG дорівнює 429 кб, провівши обведення SVGO над ним, він переходить до 16 кб, я розділив його вагу на 26 без втрати якості.
є 4 виклики recaptcha_en.js, це має бути поганою інтеграцією.

Дякую вам обом

Я просто стиснув логотип, як було рекомендовано (17 кб), і взагалі видалив reCaptcha (це було для контактної форми, або WPforms включає медовий пакет, тому цього повинно бути достатньо), але мені довелося б перевірити, чи є більше запитів: я бачу це там, де ?

Інші зображення оптимізовані за допомогою Imagify. Фон трикутників залишається трохи важким, але це не просте множення тих самих трикутників. Тож я залишаю цю невелику тяжкість, або жертвую естетикою: я все ще думаю про це.

Дизайн "однієї сторінки", я його дотримуюсь (на даний момент): це досить поширене явище для сайту-вітрини, у мобільних навігаційних кодах/соціальних мережах, і у мене не так багато вмісту, тому я зберігаю його '. сподіваюся оптимізувати все це.

Ви нічого не сказали про декілька таблиць стилів CSS та JavaScript: проблема не в цьому ?

Я планую скопіювати та вставити вміст моїх різних аркушів в один файл. Я не знаю, чи варто мені переглядати дочірню тему, яку я досі не створював, оскільки не торкався файлів безпосередньо, я працював лише з Elementor.

Крім усього іншого, ви берете участь у всьому, що знаходиться на сторінці. Особисто я вважаю це жахливим і зовсім не ергономічним. Ця концепція на 1 сторінці - це вірш із динамічним завантаженням або нескінченною прокруткою

також налаштуйте ліниве завантаження для зображень, завантажуйте зображення лише тоді, коли вони з'являються у вікні перегляду

Дякую вам обом

Ви нічого не сказали про декілька таблиць стилів CSS та JavaScript: проблема не в цьому ?

Якщо також, але вручну, це складно оптимізувати, якщо це не ваша робота.
Таким чином, ви можете використовувати плагін, такий як https://wordpress.org/plugins/shins-pageload-magic/
Проведіть дослідження в плагінах, деякі теж платять.
Подивіться, чи ваш результат кращий, і збережіть той, який найкраще працює.

+1 за те, що на одній сторінці все жахливо (але модно). А додавання ледачого завантаження - це додавання JS, чи не так? Ще гірше, але сайт, без якого не працюватиме.

Повні сайти js є справжньою проблемою для веб-доступності, особливо для людей із вадами зору.
У мене складається враження, що мало хто з веб-розробників знає про цю проблему під час свого навчання. Проте вона представляє від 10 до 15% французької поп-музики. Тому це зовсім не мізерно з точки зору бізнесу.

е-м, засіб зчитування з екрану базується на DOM, тому, якщо сайт заповненийJS, він може зайти, це зміна сторінки чи іншого, що може бути справді нудним

Проте вона представляє від 10 до 15% французької поп-музики. Тому це зовсім не мізерно з точки зору бізнесу.

[HS] Я хотів би отримати більше деталей щодо цих цифр, оскільки, якщо не рахувати людей, які носять пристрої для корекції зору (окуляри чи лінзи), я не бачу, як ми можемо досягти такої великої кількості. І очевидно, що не має сенсу використовувати цю статистику, якщо вона враховує цих людей там, оскільки вони вже мають рішення, яке застаріває проблему використання JS.
Після цього я не кажу, що вам не слід докладати зусиль, просто цифра здається мені оманливою. [/ HS]

---------------
Написавши що-небудь, ти стаєш кимось.

Pb - це зміна вмісту після завантаження сторінки. NVDA, один з найпопулярніших та безкоштовних зчитувачів екрану, не справляється.

Один із учнів школи моєї дочки сліпий на 85-90%. Час від часу вона розповідає мені про те, на які сторінки вона стикається під час серфінгу на сайтах. Зокрема, вона сказала мені, що багато веб-сайтів електронної комерції не підходять для неї. У певний момент у процесі покупки є щось, що означає, що вона не може пройти весь шлях самостійно.

Що стосується мене, я змішав статистику візуальних обмежень з усіма людьми з обмеженими можливостями, які стикаються з pbs для доступу до веб-сайтів (і в цьому випадку моя статистика була занижена):
https://ircf.fr/actualites/accessib [. ] -Інтернет/
https://www.aveuglesdefrance.org/qu [. ] електронний візуальний

Зорові вади становлять трохи менше 3% популярності у Франції (1,7 мільйона), вибачте.

Ледаче навантаження для поточного зображення полягає в додаванні атрибута load = "lazy"
І рішення в JS лише для браузерів, які не підтримують цей атрибут

Можна зазначити, що це за замовчуванням реалізовано в Wordpress 5-4 https://www.searchenginejournal.com [. ] нг/346006 /

Візуальні вади становлять трохи менше 3% популярності у Франції (1,7 мільйона), вибачте.

Я збираюся знову здути ваші номери.

18% населення (у Франції) страждає від інвалідності, що не означає, що JS робить сайти недоступними для 18% населення. Досить взяти за приклад куліка, він інвалід, але використання JS не змінить його досвіду роботи на сайті порівняно з дійсним.
Що стосується проблем із зором, аналогічним чином, найбільш репрезентативна цифра, швидше за все, є у сліпих [207 000] + людей із вадами зору (важкі порушення зору: при зорі на відстань вони не можуть розрізнити обличчя на відстані 4 метрів; при зорі від близького читання неможливе ) [932 000] за вашим посиланням.

Але це жодним чином не заважає їх брати до уваги, найефективнішим було б те, що інструменти (яких я абсолютно не знаю), що дозволяють полегшити навігацію в ситуаціях з обмеженими можливостями, можуть особливо адаптуватися до СП і що лише в рідкісних випадках що неможливо вирішити, бути предметом спілкування. Оскільки, як сказав Гацу, модифікація DOM JS дає лише DOM, який залишається інтерпретованим так само, як і попередній DOM.

Дякую, зауважу, я дотримувався рішення JS.

---------------
Написавши що-небудь, ти стаєш кимось.

Pb DOM, змінений після завантаження сторінки, полягає в тому, що він змушує людину перечитати цілу сторінку.
Дійсно, CSS, що дозволяє змінити порядок відображення інформації на сторінці порівняно з її положенням у DOM, означає, що програма зчитування з екрана не знатиме, як інтегрувати новий вміст у те, що користувач вже прочитав. Згодом я не фахівець із такого роду інструментів, але встановив його для перевірки змін, які я вніс у свій інструмент «Їдальня Каландрета» (сліпий, про кого я згадав, використовує його).

Але спробуйте NVDA і закрийте очі, а потім перейдіть до своїх улюблених сайтів. Ви швидко зрозумієте, наскільки це складно. Дуже повчальний такий вид "живи моє життя"

У своєму останньому реченні я просто хочу сказати, що СВ не обов'язково є правильним винуватцем. JS зараз є частиною навколишнього середовища, але є два шляхи подолання нестачі:
- модифікувати середовище,
- або використовувати інструменти, що дозволяють розвиватися в навколишньому середовищі.

Що слід віддати перевагу? Я особисто не маю чіткої думки, і я приймаю цю точку зору в широкому розумінні термінів, якими я користувався. Навколишнє середовище є таким, яке воно є, але незалежно від того, чи є ми інвалідом чи ні, ми формуємо його відповідно до своїх потреб, то чому б не зробити це для інваліда? З іншого боку, навколишнє середовище не є причиною порушення, чому воно має до нього пристосовуватися? Якщо ми усунемо людський аспект, друга відповідь здається очевидною, але в той же час, якщо ми усунемо людський, то не матиме більших вад.
Коротше кажучи, проблема не здається мені такою простою, як у цьому винна JS.

Тим часом, я щойно знову пройшов подібний тест на PageSpeed Insights і маю найгірший мобільний рейтинг: 8 !

У урочистостях:
Рейтинг швидкості
12,2 с
Найбільша змістовна фарба
12,8 с
Затримка перед інтерактивністю
23,4 с
Загальний час блокування
11080 мс

У діагнозі:

Зменшіть роботу основної нитки до 38,5 с (!)
Оцінка сценарію
14 962 мс
Візуалізація
8996 мс
Стиль та макет
7580 мс
Інший
4674 мс
Проаналізуйте HTML і CSS
1092 мс

Одна сторінка чи ні, я припускаю, що на моєму сайті обов’язково будуть величезні помилки. Ваша допомога завжди вітається

Вашу сторінку можна розділити на 5 сторінок. Це загалом поділить час завантаження на 5.
Рядок 53:
У вас багато css на вашій сторінці. Отже, цей css щоразу перезавантажується, оскільки не кешований.

Існує безліч div, які є порожніми або вкладеними один в одного, незважаючи ні на що (L519 - L722).

Коротше кажучи, дерьмовий HTML-код. Схоже, це було зроблено за допомогою інструменту wysiwyg, як Dreamweaver чи Frontpage. Тож, що Перфи запліснявіли, немає нічого дивного.

Я помітив, що ваша сторінка перейшла з 5 МБ на 3,3 МБ: краще завантажити 3,2 с.

Що слід віддати перевагу? Я особисто не маю чіткої думки, і я приймаю цю точку зору в широкому розумінні термінів, якими я користувався. Навколишнє середовище є таким, яке воно є, але незалежно від того, чи є ми інвалідом чи ні, ми формуємо його відповідно до своїх потреб, то чому б не зробити це для інваліда? З іншого боку, навколишнє середовище не є причиною порушення, чому воно має до нього пристосовуватися? Якщо ми усунемо людський аспект, друга відповідь здається очевидною, але в той же час, якщо ми вилучаємо людського, у нас немає більших вад.
Коротше кажучи, проблема не здається мені такою простою, як у цьому винна JS.

Я закінчую на цій ГС (вибачте автора цієї теми): на мій погляд (але я не єдиний, хто так думає, Рафаель Готтер, який робить сайт Alsacreation, стоїть аналогічним чином згідно з його книгою на CSS 2.1 ), ми створюємо веб-сайт із якомога меншою кількістю HTML і використовуючи теги лише відповідно до їх семантики. Ідея полягає в тому, що навіть без CSS, переглядаючи сайт лише з HTML, ви можете помітити різні розділи, заголовки та інформацію.

Потім ми додаємо CSS для приємного та корисного візуального візуалізації.

На цьому етапі основні функції веб-сайту повинні бути оперативними (форми, таблиці з паггінацією.) Маючи лише мову на стороні сервера.

Нарешті, ми додаємо JS для покращення ергономіки та зручності користування. Роблячи це, а також кілька речей, на які слід звернути увагу, у вас є веб-сайт, доступний якомога більшій кількості людей, принаймні рівня АА.
І це все ще дозволяє робити закладки сторінок на сайті. На деяких повних js-сайтах закладки більше не прилипають, оскільки ви насправді опиняєтесь на домашній сторінці, та частина, до якої ви потрапили в результаті послідовності дій, керованих JS, тому не можна зробити закладки

Я закінчую на цій ГС (вибачте автора цієї теми): на мій погляд (але я не єдиний, хто так думає, Рафаель Готтер, який робить сайт Alsacreation, стоїть на тому ж напрямку, згідно з його книгою на CSS 2.1 ), ми створюємо веб-сайт із якомога меншою кількістю HTML і використовуючи теги лише відповідно до їх семантики. Ідея полягає в тому, що навіть без CSS, переглядаючи сайт лише з HTML, ви можете помітити різні розділи, заголовки та інформацію.

Потім ми додаємо CSS для приємного та корисного візуального візуалізації.

На цьому етапі основні функції сайту повинні бути функціональними (форми, таблиці з паггінацією.) Маючи лише мову на стороні сервера.

Книга CSS 2.1 від Рафаеля Геттера датується 2003 роком, з 2003 року все змінилося (волосся велике, ДУЖЕ ВЕЛИКИЙ)

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

Книга CSS 2.1 від Рафаеля Геттера датується 2003 роком, з 2003 року все змінилося (волосся велике, ДУЖЕ ВЕЛИКИЙ)

Так, звичайно, в ІТ справи йдуть швидко, але я повинен визнати, що це не завжди найкраще. Зрештою, я не збираюся зіграти свого старого дурня з "раніше було краще" (явно ні, ті, хто досвідчив css 2 і радість NS проти тегів

від MS знають, про що я кажу)
Минулого року я проходив практику: щоб скласти по-справжньому просте меню з маленьким значком ліворуч від кожного пункту, продовжуйте і поставте для вас Font Awesome. У мене навіть не було ідеї поставити таку, яка потім буде поміщена в кеш і яка дозволяє уникнути залежності від фреймворку. І все було так: просто щоб мати можливість зробити $ (), продовжуй і клади собі jQuery . Ні, document.getElementById (), це було занадто складно. І я навіть не кажу про техніку бітового маскування для кодування параметрів та з'ясування, чи активовано те чи інше: навіть не бачиться в процесі.

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

Але деякі техніки чи інструменти дійсно хороші. Css 3 приніс багато цікавого, як, наприклад, HTML5.