Оптимізація швидкості завантаження сайту

Прискорюємо завантаження сайту на прикладі одного лендінга

Вперед!

І так, що ми маємо

Ось і добрався нарешті до цієї теми, що оголошена була ще в десяток постів назад. Так ось, повернувся я до сайту - однієї з моїх перших робіт, особистої сторінки екскурсовода. По задумці - односторінковий сайт, промо-сайт, або як тепер називається лендінг - продає послугу екскурсовода містом Львів.

З самого початку була повна свобода в засобах реалізації, дизайні і тд. Але в свою чергу побажання замовника - початкове розміщення на безкоштовному хостингу. З одного боку щось в цьому є - при незначному відвідуванні платити немає сенсу, а при замовленнях через веб можна і докупити потім. З іншого боку безкоштовний хостинг накладає ряд обмежень, а саме досить задумливі сервери, які до того розміщені в Британії, що "радує" швидкістю з'єднання.

Ну що ж, нас не злякати такими дрібницями, тож приймаємось за діло. Опустимо процес розробки - про це колись більш детально, лише уточню - сайт статика, використовує html, css, jquery і трохи самописного javascript, ось так нехитро. Зате, за дизайнерською задумкою має горизонтальну прокрутку, відкриття контенту, а це описи турів, деякі цікаві факти міста і збільшені фотки з галереї в модальних вікнах. Щоб забезпечити єдину сторінку сайту контентом і не виглядати в очах пошукових машин пусткою, а також відмовитись від налаштувань індексації підгружаємого аяксом контенту вирішено було - відмовитись від аяксу вцілому і все тримати в тілі документу, і показувати в модальних вікнах. Такий собі хитрий спосіб реалізації модальних ікон на чистому цсс.

Перші тести швидкості завантаження

В результаті вийшло, що єдина сторінка отримала 136 елементів, при загальному розмірі 2.4 мегабайти. в деяких місцях спрайтами також було знехтувано, тож вкінці на тестах отримав швидкість завантаження - 4 секунди, що досить таки жахливо для такого простого сайту.
Власне "водоспад" завантаження виглядав десь так:

Зразу видно що тут негаразд, попри конкатенацію скриптів і стилів і їх мініфікацію завантаження йде неахті як через те що файли грузяться по черзі і їх ну дууже багато. На саме завантаження йдуть долі секунди, а на запити, очікування та інше - вічність ...

І так ми підійшли до рішень. Проаналізувавши зробив висновок, що дріб'язок, такий як іконки мов, генерований контент перед соц. посиланнями, аватарки і тд хоч і просяться стати спрайтами, але в пору юності розробника такими не стали:) Далі звертаємо увагу, що грузяться часто картинки "не свого" розміру і вже в браузері підганяються - збільшує розмір сторінки. І головне - завантажуються картинки, які користувач в принципі може і не проглянути, як-то в модальних вікнах.

Фронт робіт позначений - працюємо

  1. робимо спрайти з авок, іконок і іншого. Використовував онлайн генератор спрайтів, хоча попередньо прочитав декілька статей на цю тему. і того мінус 6в1, 5в1 і 20в1, економія - 28 файлів випали з черги.
  2. далі вирішив все ж реалізувати підгрузку контенту - до текстів питань не було, а от до картинок, яких там було в загальній кількості 30 штук - питання були.
    Виходом став паттерн "лінива загрузка" - lazyload, реалізований в технології jQuery. Норм, качаємо, налаштовуємо коробочне рішення, робимо картинку-рибу - тестуємо... Ось тут і вийшов певний затик. В двух словах - горизонтальний скролінг був реалізований скриптом mousewheel.js, що ловив скролл евент, а при відкритті модального вікна спрацьовував анбінд цього евента. При цьому "лінива загрузка" по замовчуванню була налаштована саме на скролл евент: прокручуєш - підгружається. Рішення - змінити евент в самому скрипті на інший ( в даному випадку "лоад") і по всьому.
    окей, що в результаті - при старті завантаження сторінки грузить ще на 30 картинок менше - 20 з модальних вікон галереї(збільшені копії) і 10 з модальних вікон. Щоправда ті 20 з галереї були замінені на мініатюрки. зменшили розмір сторінки - ураа!
  3. Винесення деяких елементів зображень в цсс - а саме посилання на цікаві факти, що мали вигляд картинок тепер являють собою ссилки з фоном у вигляді картинок.
  4. На останок всі мануали і оптимізатори радили виносити статик на домен без кукі, але за відсутністю такого, але для завантаження в додатковий потік частина картинок грузилась з піддомену сайту www - і о чудо, це спрацювало:)
  5. Було налаштовано через кешування через конфігураційний файл апача .htaccess Вибір пав на звернення до сервера і якщо файли не змінились - не качати їх. Час хоч і затрачується, зате дозволяє змінювати щось. А в даному випадку це корисно - не потрібно користуватись версіями файлів, хоча і плата за це - швидкість... Ну це стане наступним кроком - версійність файлів.

Тести і висновок

В результаті, після тестів було отримано наступні дані: 2.3 секунд при першому завантаженні і 700 мілісекунд при наступних ,коли добро бралось з кешу браузера. Розмір сторінки - 1.7мб, що для масштабів сайту майже третина.
Оскільки я маю відключений кеш і кукі в браузерах для простішої розробки, мої результати не показові, але по відгукам користувачів і тестам стало відчутно швидше, а значить завдання успішно виконано.

Думки вголос

Наостанок скажу, що оскільки сайт з цікавості був зроблений резиновим, причому в залежності від висоти екрану пристрою, а не ширини, то всі його блоки мали б відповідно пропорційно зменшуватись і по ширині і по висоті. Блискуче рішення від засобів цсс3 - відносні одиниці виміру. Висота - 100%, ширина - стільки-то vh (viewport height - 1% висоти вікна перегляду). Але умова кросбраузерності ніяк не задовольнялась - чудна опера ігнорувала одиниці виміру vh. не біда, з самого початку все будувалось на медіа запитах, тож і працювало відносно нормально.

Але ближче до суті - в одному місці не дозволив такий хід для 20 елементів використати спрайти.хоч і їх розміри були у відсотках батьківського блока і позиціонування фону background-position також давалось у відсотках, причому досить точних - а дудки, властивість background-size: cover; спрацьовувало добросовісно і захоплювало лишні куски фону в ті моменти, коли батьківський блок був непропорційний(поміж розмірами медіа запитів).

Ну, коли рак на горі свисне більшість браузерів декількох останніх версій отримають повну і осмислену підтримку специфікації цсс3, а вчасності одиниць виміру vh - тоді заради задоволення амбіцій реалізую ту штуку так як і мало бути спочатку.

Уже реалізовано, в оновленій версії сайту, яка станом 06.12.2014 знаходиться на стадії тестів і готується до запуску. Там допиляні скрипти, які відстежують розмір \ орієнтацію екрану і оновлюють сторінку, таким чином все залишається на своїх місцях. Впроваджені одиниці виміру vh, а для нерозуміючих браузерів — фолбек у вигляді тих же відсотків.


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям