Здравствуйте. Данный вопрос имеет ряд сложностей в реализации, т.к придется много чего переделать и не все удастся с легкостью переделать, да и на практике может не оправдаться.
Но принцип может быть след. для css:
1. убираете все лишние css, которые не используете
2. используете распределенные стили, т.е не в одном файле все стили, а для каждого модуля свои стили подгружаются при необходимости
3. минимизация кода css
4. убираете подключение стилей из head
5. в конце тега body ставите код, который подключит стиль только после того, как страница вся прогрузится.
|
1 2 3 |
$(document).ready(function() { $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />"); }) |
В итоге : при малой скорости вы увидите сначала белый экран с текстом, а потом уже стили .
С js — кодом почти тоже самое по пунктам, но немного все обстоит сложнее .
Вы подключили
|
1 |
<script src="/jquery.js" async></script>, |
но чтобы скрипт заработал, например
|
1 |
<script>$('body').addClass('red_green');</script> |
нужно сделать следующее
|
1 2 3 4 |
<script>function loader() { $('body').addClass('red_green'); }</script> <script src="/jquery.js" async onload="loader()"></script> |