Sticher78

Рекомендации в Google PageSpeed не дают полной картины. Это всего лишь рекомендации.
Нет смысла выносить весь css прямо на страницу, достаточно объединить все файлы в один и подключить этот файл.

Я как-то проводил тест, вставлял все стили в html, в итоге Google PageSpeed значительно повышал оценку, но скорость загрузки сайта ничуть не поменялась, я не увидел никаких изменений.

Готовая библиотечка есть:
https://github.com/artpolikarpov/scrollyeah

Пример работы у Манн Иванов Фербер:

Простой способ https://codepen.io/Symphony/pen/aLvBbp
В отличие от других способов поддерживается: Edge, Webkit, Firefox и т.д.
Длина текст не имеет значения.

И ~, и + ищут по уровню вложенности.

<a>
    <b></b>
</a>
<c></c>

a ~ c {} /* находит */
b ~ c {} /* не находит */

Еще раз, ищет не как "следующие потом в HTML", а "следующие потом UPD сестринские элементы".

+ ищет как ~, но только соседние:

<a></a>
<b></b>
<c></c>

a + b {} /* работает */
b + c {} /* работает */
a + c {} /* не работает */