Маленькие хитрости ускорения страниц

[Dimitri Yelquin]

Вы знаете, как нервируют задержки и спотыкания на сайте. С ними борются, облегчая вес страниц, с помощью специальных програмок, ускоряющих работу сайта... Но есть и простые средства, подумать о которых не часто приходит в голову. Вот, такой случай -- таблица. У таблицы есть свойство объявляться на странице только, лишь, после полной её загрузки. И если таблица осложнена стилями -- как та, что на скриншоте, например, то ждать она себя заставит долго. Но моя табличка не заставит клиента нервничать! Фокус весь в том, что это, лишь, визуально -- одна таблица. В коде -- это десяток (или сколько их там, точнее?) однострочных таблиц одна над другой.

Однострочная таблица, естественно, открывается в 10 раз быстрее десятистрочной. Клиент не ждёт, глядя на белое пятно, когда откроется вся таблица, но сразу начинает читать выпадающие одна за другой строчки. Единственное неудобство такой вёрстки заключается в том, что ячейкам таблицы нельзя задать ширину "auto"; во всех строчках получатся неодинаковые. Приходится заранее вымерять, в каком столбце, какую ширину задать.

Если такая "сборная" таблица не во всю ширину колонки, то её лучше поместить в блок с шириной, как у таблицы.

Порядок изготовления таких таблиц прост. Делаем однострочную табличку, получаем такой код:

 

<table>
  <tr>
	   <td></td>
	   <td></td>
	   <td></td>
	   <td></td>
	   <td></td>
   </tr>
</table>

 

И в редакторе HTML повторяем его столько раз, сколько собираемся делать строчек в таблице.

[Dimitri Yelquin]

Такая поправка! У меня таблица шириной 556 видна вся, но у меня и стили центральной колонки изменены. Если же у Вас стандартная колонка, то правый край таблицы немного срежется. Поэтому нужно вписать ширину 554 или 552... При какой-то из них таблица видна уже целиком.

[Anisa2011]

Такая поправка! У меня таблица шириной 556 видна вся, но у меня и стили центральной колонки изменены. Если же у Вас стандартная колонка, то правый край таблицы немного срежется. Поэтому нужно вписать ширину 554 или 552... При какой-то из них таблица видна уже целиком.

рассчитано для 2х-колоночного сайта?

[Prestapro Agency]

А я вообще предлагаю выводить все стили в globall.css и мелкие и большие.
Вы представляете смену дизайна для каждого шаблона в отдельности?=)
Их чуть больше 50
В общем в плане оптимизации хочу отметить лучше кэширования и сжатия, сокращения числа запросов к БД ничего пока не придумано
Кстати оцените проект: может какие ошибки, баги, советы в том числе по коду http://zolotoy-rog.com

[RAGE]

категорически не согласен разбивать одну таблицу на несколько.......

сейчас не буду приводить аргементы, но однозначно заявляю - это неправильно

 

Dimitri Yelquin - я уже давно зависаю тут на форуме, успел заметить что Вы автортетный знаток своего дела... не сочтите мое высказывание как агрессию...

[Dimitri Yelquin]

@sors, @ssssaerty

 

Правильно, базар не по теме нужно было убрать. Но почему 6-й пост в удалённое попал!? Он-то по теме! И я там отвечаю на возражение по теме же. Возражение мне, поскольку тема моя. И я не могу не ответить. Что, мне больше нечего делать, чтобы по два раза один пост писать!?

[Ronaldo Perez]

Ок, пишу без личностной привязки)

 

Делать вместо 1 таблицы несколько - глупо, это если кратко.

[Dimitri Yelquin]

Пусть, даже, так. Глупо. Но узнает ли об этом посетитель магазина?

 

Ему-то, наверное, важней, чтобы всё в этом магазине было пронизано дружелюбием к нему! А о каком «дружелюбии» тут может быть речь, если ему приходиться пялиться в белое пятно. Понятно, что дизайнеру до него не было дела. Дизайнер плюнул на то, что кому-то это может быть очень неприятно. Ну, а трогает ли это хозяина магазина, то что кому-то здесь может быть неприятно? Догадаться нетрудно. Так что важнее, моё самолюбие, которое «страдает» прямо от того, что кто-то может назвать сделанное мною глупостью, или расположение клиента?

[Dimitri Yelquin]

Не помню, где тут обронил мыслю, но писал я и о другом способе ускорения загрузки таблиц.

 

Суть способа в построении таблицы не на табличных тэгах, а на блочных. То есть создаём блоки (дивы) классов:

.table,

.row (вместо tr)

.cell (вместо td) и строим на этих блоках таблицу. Открывается несравненно быстрей!

[Ronaldo Perez]

интересующимся я все же кроме домыслов рекомендую изучить

- чем таблица отличается от дива (станет понятно почему быстрее "открывается")

- влияние кол-ва DOM элементов на скорость рендеринга страницы (на языке текущей темы опять же "красивенько"/"быстренько")

- а также почему она (скорость) важна владельцу магазина также как и посетителю и ПС.

 

на этом в данной теме все, имеющий уши да услышит.

[Dimitri Yelquin]

Вот, только пафоса Вашего здесь не хватало! «имеющий уши да услышит»! Треск, искры, а дым рассеялся — на земле только рваная «шкурка» от петарды.

 

Где это у меня речь о «красивенько/быстренько»? Плохое зрение или тенденциозное восприятие чужой речи? Я говорю о «приятном» и о том, что какие-то вещи могут быть вовсе неприятными. И даже раздражающими. Должны мы эти неудобства устранять? Вы считаете, что нет. Потому что, видишь ли, рендеринг, Dom. Интересно, Вы и простой текст с думой о рендеринге вбиваете? Сочувствую...

 

На любой странице самое главное — это её содержание. Причём, главное содержание концентрируется в текстах и таблицах, а не в иллюстрациях к ним. Да и не вся графика на странице — иллюстрации. Значительная часть графики приходится на фоны, кнопочки, микрографику... И что с того, что не сразу все декорации проявляются на вновь открытой странице! Мы должны заботиться о том, чтобы тексты и таблицы открывались моментально. Именно, запаздывание тексов и таблиц может раздражать посетителя. К остальному-то большинство из нас относиться спокойно. Причём же тут рендеринг, не понимаю?