Как облегчить страницу
 

Всем добрый день!

Обращаюсь к вам за советом.
Заранее прошу прощения за длинный текст.

Делаю опросник в специальном программном обеспечении.
Данное ПО - своеобразный конструктор, в который я запихиваю тексты вопросов и варианты ответов. На выходе программа выдает набор файликов .pl, в которых формируется страничка.
По условиям задачи, необходимо было сделать так, чтобы все вопросы анкеты были размещены на одной странице.
Плюс, в анкете есть логика (напр. При ответе на один вопрос показать / скрыть другие вопросы, или отфильтровать список чекбоксов по выбранным и т.д.). Все эти скрипты я писала в head.

В итоге: в анкете получилось более 600 вопросов, страница весит 1.7 Мб.:blink:

Заполнять ее будут с планшетов, я проверяла работоспособность на телефоне.
На компе анкета грузится от 2 до 5 секунд, в процессе заполнения, замечаний никаких нет, все работает быстро.
Но вот на телефоне, страница грузится около минуты((:cray:
Помимо этого, подвисает обработка кликов и ввода текста (клик срабатывает чуть меньше чем через секунду).

Что я перепробовала:
1) Сжала все скрипты и стили. По возможности выкинула все ненужное, выцепив необходимые куски кода (запихала в head).
На компе, разница в загрузке в нескольких мс. На телефоне не ощутила разницы (ну может она и была в пару секунд, но по сравнению с загрузкой в минуту, меня это не особо радует).
2) В файле .htaccess закэшировала все и вся. Разницы не ощутила…
3) В качестве эксперимента, удалила все скрипты (и самописные с ссылки на jquery), удалила все стили. Картинок у меня толком нет, только маленький логотип внизу страницы весов в 7 кб и иконка на вкладке – 1 кб.
Т.е. остался только чистый html. Разницы никакой, страница грузится минуту.

Что НЕ пробовала:
Знаю, что было бы не плохо подгружать контент динамически. Не рассматриваю такой вариант по двум причинам:
1. Понятия не имею, как объяснить программе, в которой я работаю, что не нужно загружать всю страницу (там ведь и сбор данных и их отправка прописываются, я не могу просто удалить часть вопросов).
2. Еще одно условия задачи – после открытия ссылки, должна быть возможность заполнять весь этот кошмар в отсутствии интернета. Если что-то погружать динамически, то понадобится интернет.

Прошу совета, можно ли как-то ускорить загрузку страницы и убрать тормоза при кликах?

Что так, что эдак он нужен :)
Если вы в первый раз зашли на вашу страничку, то без подключения к сети вы ничего не увидите, кроме уведомления об отсутствии соединения с Интернет.
Можно загрузить разметку странички, подгрузить первоначальные вопросы, закинуть их в какое-нибудь клиентское хранилище, после подгрузить в этот кеш остальные 1.5 мб вопросов.
Нужно, чтобы приложение изначально обращалось за данными к хранилищу, только после фейла к удаленному серверу.

ps. если сервер возвращает не сжатые данные, то лучше сжатие включить.
pps. стили и скрипты лучше вынести в отдельные файлы, браузеры их кешировать умеют + страничка приложения станет легче.

ссылку в студию

Да, но сейчас я могу загрузить страницу с включенным интернетом, когда все прогрузится уйти в подвал, где нет жизни, и прекрасно заполнять сию анкету без инета))
Спустя 2 часа мучений, когда все заполнено, я выползаю из подвала и нажимаю кнопку Отправить. Такая система сейчас работает.

Вот я и не знаю, как это сделать в рамках моего ПО(( По умолчанию загружается сразу все.

Вот пример ссылки (немножко подчистила):
http://www.maronline.ru/marina_test/...ame& visit=15
Пожалуйста, сильно не ругайте за кривизну, времени было катастрофически мало((

Может нужно выложить папку, которую генерит программа?
Прикладываю на всякий случай.

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

Лиса моментом грузит и отрисовывает, а вот на базе хрома - Опера ковыряет и что плохо долго отрисовывает, Хром вообще загрузил, а на экране пусто.

Зачем такой простой по дизайну страницы подгружаемые шрифты, query UI и т.п.?

Зачем каждый вариант ответа на вопрос записывается в отдельную таблицу?

Вообще - непонятно чем объяснимая вложенность таблиц. Вот всего один вопрос (более чем наполовину сокращенный, целиком сюда не влез)

<div class="question" id="INFOx2">
    <table class="outer_table" cellspacing="0" cellpadding="3" border="0" width="100%">
        <tbody>
            <tr>
                <td align="left">
                    <div class="nQues">
                        Вопрос №1 (на странице)</div>
                    <div class="header1">
                        Специальность врача (выбрать из списка ниже)</div>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <div class="question_body">
                        <table class="inner_table" cellspacing="0" cellpadding="0" border="0">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <table cellspacing="0" cellpadding="2" border="0">
                                            <tbody>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="1" id="INFOx2_1" onclick="SSI_ClearRadioOtherText_INFOx2(1);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_1">
                                                                                <font color="navy">Кардиолог амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="2" id="INFOx2_2" onclick="SSI_ClearRadioOtherText_INFOx2(2);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_2">
                                                                                <font color="navy">Терапевт высокопотенциальный амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="3" id="INFOx2_3" onclick="SSI_ClearRadioOtherText_INFOx2(3);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_3">
                                                                                <font color="navy">ВОП высокопотенциальный амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="4" id="INFOx2_4" onclick="SSI_ClearRadioOtherText_INFOx2(4);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_4">
                                                                                <font color="navy">Терапевт непрофилированный амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

И в каждом инпуте прописан онклик
(Хром у меня вполне загрузил - но не очень быстро)

У меня тоже, но кроме серости на экране ничего нет, хотя весь DOM на месте.

Напишите, пожалуйста, Вы на компе проверяли или на телефоне/планшете?
стиль по умолчанию, так исторически сложилось)).
А query UI - будет менюшка в виде всплывающего окна, делаю через dialog().

Можно все это удалить, но как я писала в 1-м сообщении, на загрузке это почти не сказалось. Проверила сейчас, в хроме на стили и jqury-ui ушло 12ms.

Так программа по умолчанию делает, я не могу это изменить. :(

Странно, ошибок нет в консоли?
Сейчас уберу серость (она в стилях).

Убрала, ссылки на query UI тоже удалила.