[Решено] Елемент за изпълнение и една страница, твърде много CSS и Javascript

Здравейте !

Изградих сайт на Wordpress, базиран на темата Astra, с Elementor (+ някои персонализирани CSS модификации чрез Astra), в режим "една страница", хостван на o2switch. Показва се с прилична скорост, но сайтовете за тестване на производителността ми дават лоша оценка, до само 60% за Google (по-лошо за мобилни 12%!), Което ме кара да се страхувам от SEO.

Странното е, че според PageSpeedTest Google CDN/Maps/Fonts губи много секунди за мен. Освен това Google ме насърчава да подобря моите CSS таблици със стилове и JavaScript. Чрез уеб инспектор можем да видим, че имам много от тях. Също така отбелязвам, че някои таблици със стилове са "мин", въпреки че премахнах приставките за кеш/минификация (разочароващи резултати или грешки). Накрая забелязвам, че имам дублирани таблици със стилове.

=> Би ли било полезно да почистване и/или обединяване на моите множество CSS стилови листове ? Ако е така, как (аз съм самоук.) ?
=> Що се отнася до Javascript, че не знам абсолютно нищо, трябва ли да го докосна по някакъв начин ?
=> Виждате ли някакви слабости или големи грешки при изграждането на обекта, това би попречило на представянето ?

Благодаря ти много

Повече от 5 MB файлове за зареждане на началната страница и отнема повече от 6 секунди, докато съм в пакет, ясно е, че има pb с вашия сайт

Слагате всичко на една страница, изобщо не е добра идея. Тези, които посещават сайта ви с мобилен телефон, ще ви проклинат. Можете да заредите различните секции при поискване в зависимост от позицията на вертикалния скрол (изисква js) или страница, посветена на всяка секция.

Опитайте се също да оптимизирате размера на вашите изображения, за да намалите теглото.

Редактиране: например вашето фоново изображение с повтарящи се триъгълници. Направете по-малко изображение, което ще дублирате на x и вероятно y с css.

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

Благодаря и на двама ви

Току-що компресирах логото, както се препоръчва (17kb) и изтрих изцяло reCaptcha (беше за формата за контакт или WPforms включва меден съд, така че това би трябвало да е достатъчно), но трябваше да проверя дали има още заявки: Мога да видя това, където ?

Останалите изображения са оптимизирани с Imagify. Фонът на триъгълниците остава малко тежък, но не е просто умножение на същите триъгълници. Така че или оставям тази малка тежест, или жертвам естетиката: все още мисля за това.

Дизайнът на „една страница“, аз се придържам към него (за момента): той е доста често срещан за витринен сайт, в мобилни навигационни кодове/социални мрежи и нямам много съдържание, така че го пазя. “ надявам се да оптимизирам всичко това.

Не казахте нищо за многобройните CSS таблици със стилове и JavaScript: проблемът не е там ?

Смятам да копирам и поставя съдържанието на различните си листове в един и същ файл. Не знам дали да премина през детска тема, която досега не бях създавал, защото не бях пипал файловете директно, работих само с Elementor.

Освен всичко друго, идвате от всичко на една страница. Лично аз го намирам за ужасен и изобщо не ергономичен. Тази концепция на 1 страница е стих с динамично зареждане или безкрайно превъртане

също така настройте lazyloading за изображенията, зареждайте изображенията само когато се появят в прозореца за показване

Благодаря и на двама ви

Не казахте нищо за многобройните CSS таблици със стилове и JavaScript: проблемът не е там ?

Ако също, но на ръка е сложно да се оптимизира, ако не е ваша работа.
Така че можете да използвате приставка като https://wordpress.org/plugins/shins-pageload-magic/
Направете проучване в приставките, някои също плащат.
Вижте дали резултатът ви е по-добър и запазете този, който работи най-добре.

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

Пълните js сайтове са истинска болка за уеб достъпността, особено за хората със зрителни увреждания.
Имам впечатлението, че малко уеб разработчици са наясно с този проблем в обучението си. И все пак той представлява между 10 и 15% от френския поп. Следователно изобщо не е пренебрежимо от гледна точка на бизнеса.

или екранният четец се основава на DOM, така че ако сайтът е пълен JS, той може да отиде, това е промяната на страницата или нещо друго, което може да бъде наистина скучно

И все пак той представлява между 10 и 15% от френския поп. Следователно изобщо не е пренебрежимо от гледна точка на бизнеса.

[HS] Бих искал да имам повече подробности за тези цифри, защото освен ако не броим хората, които носят устройства за корекция на зрението (очила или лещи), не виждам как можем да достигнем толкова голям брой. И очевидно няма смисъл да се използва тази статистика, ако брои тези хора там, тъй като те вече имат решение, което остарява проблема с използването на JS.
След това не казвам, че не трябва да полагате усилия, просто числото ми изглежда подвеждащо. [/ HS]

---------------
Чрез писането на каквото и да е, вие ставате някой.

ъъъ, четецът на екрана се основава на DOM, така че ако сайтът е пълен JS може да отиде, това е промяната на страницата или друго, което може да бъде наистина скучно

Това, което поставя pb, е промяната на съдържанието, след като страницата се зареди. NVDA, един от най-популярните и безплатни екранни четци, не може да се справи.

Един от членовете на училището на дъщеря ми е 85-90% сляп. Тя ми казва от време на време pbs, които среща, докато сърфира в сайтове. Тя ми каза по-специално, че много сайтове за електронна търговия не са подходящи за нея. В един момент, в процеса на покупка, има нещо, което означава, че тя не може да премине сама докрай.

Що се отнася до мен, аз смесих статистиката на зрителните недостатъци с всички хора с увреждания, срещащи pbs за достъп до уебсайтовете (и в този случай моите статистически данни бяха подценени):
https://ircf.fr/actualites/accessib [. ] -Интернет/
https://www.aveuglesdefrance.org/qu [. ] e-visual

Зрителният недостатък е малко по-малко от 3% от популярността във Франция (1,7 милиона), съжалявам.

Мързеливото натоварване за текущото изображение е да добавите атрибут load = "lazy"
И решение в JS само за браузъри, които не поддържат този атрибут

Имайте предвид, че това се прилага по подразбиране в Wordpress 5-4 https://www.searchenginejournal.com [. ] ng/346006 /

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

Зрителният недостатък е малко по-малко от 3% от популярността във Франция (1,7 милиона), съжалявам.

Пак ще дефлирам номерата ви.

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

Но това по никакъв начин не им пречи да бъдат взети под внимание, това, което би било най-ефективно, е, че инструментите (които аз абсолютно не знам), позволяващи да се улесни навигацията при неблагоприятни ситуации, могат особено да се адаптират към JS и че само редките случаи което не може да бъде решено, бъде предмет на комуникация. Защото, както каза Гацу, модификацията на DOM от JS дава само DOM, който остава интерпретируем по същия начин като предишния DOM.

Благодаря, отбелязвам, придържах се към JS решението.

---------------
Чрез писането на каквото и да е, вие ставате някой.

Pb на DOM, модифициран след зареждане на страницата, е, че той принуждава човека да препрочете цялата страница.
Всъщност CSS, позволяващ промяна на реда на показване на информация на страницата в сравнение с нейната позиция в DOM, означава, че екранният четец няма да знае как да интегрира новото съдържание в това, което потребителят вече е прочел. Впоследствие не съм специалист в този вид инструменти, но го инсталирах, за да тествам промените, които имам в инструмента си Canteen Calandreta (слепият, когото споменах, го използва).

Но опитайте NVDA и затворете очи, след което отидете на любимите си сайтове. Бързо ще осъзнаете колко е трудно. Много е поучително този вид "да живееш живота ми"

В последното си изречение просто искам да кажа, че JS не е непременно правилният виновник. JS вече е част от околната среда, но има две решения за преодоляване на недостатъка:
- промяна на средата,
- или използвайте инструменти, позволяващи да се развивате в околната среда.

Какво трябва да предпочетете? Аз лично нямам ясно мнение и възприемам тази гледна точка в широкия смисъл на използваните от мен термини. Околната среда е такава, каквато е, но независимо дали сме инвалиди или не, ние я оформяме, за да отговори на нашите нужди, така че защо да не го направим за инвалид? От друга страна, околната среда не е причина за неблагоприятното положение, защо трябва да се адаптира към нея? Ако премахнем човешкия аспект, вторият отговор изглежда очевиден, но в същото време, ако премахнем човешкия, няма повече увреждания.
Накратко, проблемът не ми се струва толкова прост, колкото по вина на JS.

Междувременно, току-що направих тест като този отново на PageSpeed Insights и имам най-лошия си мобилен рейтинг досега: 8 !

В тържествата:
Оценка на скоростта
12,2 сек
Най-голямата съдържателна боя
12,8 сек
Забавяне преди интерактивност
23.4 s
Общо време за блокиране
11 080 ms

В диагнозата:

Намалете работата на основната нишка до 38,5 s (!)
Оценка на скриптове
14 962 мс
Предаване
8 996 мс
Стил и оформление
7,580 ms
Други
4,674 мс
Анализирайте HTML и CSS
1092 мс

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

Вашата страница може да бъде разделена на 5 страници. Това глобално ще раздели времето за зареждане на 5.
Ред 53:
Имате много css на вашата страница. И така, този css се презарежда всеки път, защото не е кеширан.

Има много div-ове, които са празни или вложени един в друг, независимо от какво (L519 до L722).

Накратко, глупав html код. Изглежда, че е направен с инструмент wysiwyg като dreamweaver или frontpage. Така че, че Перфовете са мухлясали, няма нищо изненадващо.

Забелязах, че страницата ви е преминала от 5MB на 3.3MB: по-добре е да се зареди 3.2s.

Какво трябва да предпочетете? Аз лично нямам ясно мнение и възприемам тази гледна точка в широкия смисъл на използваните от мен термини. Околната среда е такава, каквато е, но независимо дали сме инвалиди или не, ние я оформяме така, че да отговаря на нашите нужди, така че защо да не го направим за инвалиди? От друга страна, средата не е причина за неблагоприятното положение, защо трябва да се адаптира към нея? Ако премахнем човешкия аспект, вторият отговор изглежда очевиден, но в същото време, ако премахнем човешкия, няма повече увреждания.
Накратко, проблемът не ми се струва толкова прост, колкото по вина на JS.

Завършвам на тази ХС (съжалявам за автора на тази тема): по мое мнение (но не съм единственият, който мисли така, Рафаел Готер, който прави сайта на Алсакреация, е на подобен ред според книгата му на CSS 2.1 ), ние изграждаме уебсайт с възможно най-малко HTML и използваме тагове само според тяхната семантика. Идеята е, че дори без CSS, виждайки сайт само с HTML, можете да забележите различните секции, заглавия и информация.

След това добавяме CSS за приятно и използваемо визуално изобразяване.

На този етап основните функции на сайта трябва да работят (формуляри, странични таблици.) Само с езика от страна на сървъра.

И накрая, добавяме JS за подобряване на ергономичността и потребителското изживяване. Правейки това плюс няколко неща, на които да обърнете внимание, имате уебсайт, достъпен за възможно най-много хора, поне ниво АА.
И все пак ви позволява да маркирате страници на даден сайт. На някои сайтове с пълен js отметките вече не се придържат, защото всъщност се озовавате на началната страница, частта, до която сте пристигнали в резултат на поредица от действия, управлявани от JS, така че не може да се маркира

След това добавяме CSS за приятно и използваемо визуално изобразяване.

И накрая, добавяме JS за подобряване на ергономичността и потребителското изживяване. Правейки това плюс няколко неща, на които трябва да обърнете внимание, имате уебсайт, достъпен за възможно най-много хора, поне ниво АА.
И все пак ви позволява да маркирате страници на даден сайт. На някои сайтове с пълен js отметките вече не се придържат, защото всъщност се озовавате на началната страница, частта, до която сте пристигнали в резултат на поредица от действия, управлявани от JS, така че не може да се маркира

Книгата CSS 2.1 от Рафаел Гьотер датира от 2003 г., тъй като от 2003 г. нещата са с коса (голяма коса, МНОГО ГОЛЯМА) променена

Но в направляващите редове като цяло сте прав и бих искал да мога да продължа в този глас, но е ясно, че реагират и други са поели

Да, разбира се, нещата се развиват бързо в ИТ, но трябва да призная, че не винаги е за най-добро Впоследствие, няма да играя стария си глупак с "беше по-добре преди" (очевидно не, тези, които са имали опит css 2 и радостта от NS срещу тагове

от MS знам за какво говоря)
Имах стаж през миналата година: за да ми направите наистина просто меню с малка икона отляво на всеки елемент, продължете и поставете Font Awesome за вас. Дори нямах идеята да сложа такъв, който след това ще бъде поставен в кеша и който избягва зависимост от рамка И всичко беше така: само за да мога да направя $ (), продължете и ви поставете jQuery . Не, document.getElementById (), това беше твърде сложно. И дори не говоря за техниката на битово маскиране, за да кодирам опции и да разбера дали такива и такива са активирани: дори не се вижда в ход.

Чрез подреждане на слоеве от библиотеки/рамки от всякакъв вид, за да улеснят живота на разработчиците, те понякога вече не докосват земята и едва познават основните функции на езика. Пюре, далеч не сме от времето на демомекерите, които се стремяха да оптимизират всеки байт.

Но някои техники или инструменти са наистина добри. Css 3 донесе много страхотни неща, като HTML5 например.