Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Mini-optymalizacja - buforowanie styli CSS

Założony przez Łukasz Tkacz.

Ostatnio obserwując żądania do serwera przy ładowaniu kilku forów na MyBB zauważyłem, że style CSS są ładowane za każdym razem. Oczywiście, to nic złego, a przy zmianach przez administrację nawet zaleta, bo nie trzeba pisać użytkownikom rzeczy typu "zróbcie CTRL+R/CTRL+F5", no ale czy zawsze to jest potrzebne? Nie wydaje mi się, dlatego chciałbym przedstawić mini-zabieg, który pozwala te dane buforować w przeglądarce użytkownika.

W ogóle pytanie brzmi: po co to robić? Na przykładzie MyBBoard mogę powiedzieć, że ładowane są tu 3 pliki zawierające style. Pobranie każdego z nich wymaga oddzielnego połączenia z bazą, wstępnej inicjalizacji całego MyBB itd. To zawsze nieco pracy, którą można by zaoszczędzić. Można łączyć style w jeden plik, ale nie zawsze jest to pożądane, stąd wybór buforowania.

1 Edycja css.php


Edytujemy plik css.php, znajdujemy:
header("Content-type: text/css"); 

przed tym dodajemy:
$expires 3600;
header("Pragma: public");
header("Cache-Control: maxage=".$expires);
header('Expires: ' gmdate('D, d M Y H:i:s'time()+$expires) . ' GMT'); 

I to wszystko.
W zmiennej expires mamy czas w sekundach, na jaki przeglądarka powinna to buforować. Godzina to niewiele, ale przy przeglądaniu forum przez wielu stałych użytkowników, już powinno dać pewną różnicę, a zarazem na tyle krótki, że jeżeli administracja zmieni coś w stylach, względnie szybko będzie i u użytkowników. Oczywiście jeżeli na swoich forach nie zmieniacie styli zbyt często, można tam ustawić również czas równoważny tygodniowi czy miesiącowi, to już wasza decyzja.

Dlaczego nie plugin? Chciałem, ale w pliku init niestety nie ma dla nich żadnego wpięcia (pomimo, że nawet w wypadku styli css wszystkie ich pliki są załączane).
Plik css.php nie ma prawa bytu w kodzie..

Twoja poprawka - jest dobra, ale w małej części.

Szablony zapisywane w PA powinny być:
- zapisane w bazie ( jak to jest w chwili obecnej - by móc edytować z poziomu PA),
- zapisywanie stylu do pliku tymczasowego typu: cache_style.css ( gdzie plik będzie nadpisywany z każdą zmianą )

W ten sposób nie łączymy się z bazą, a mamy to samo - tylko mniej obciąża serwer.

Ponadto:
<link type="text/css" rel="stylesheet" href="https://webboard.pl/cache/themes/theme17/global.css" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/cache/themes/theme17/mybbpl.css" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/css.php?stylesheet=146" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/css.php?stylesheet=94" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/css.php?stylesheet=130" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/css.php?stylesheet=162" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/cache/themes/theme15/star_ratings.css" />
<link type="text/css" rel="stylesheet" href="https://webboard.pl/css.php?stylesheet=167" />

Można zastąpić jednym wywołaniem takiego pliku:
<link type="text/css" rel="stylesheet" href="https://webboard.pl/css2.php?css=cache/themes/theme17/global.css,cache/themes/theme17/mybbpl.css,css.php?stylesheet=146,css.php?stylesheet=94,css.php?stylesheet=130,css.php?stylesheet=162,cache/themes/theme15/star_ratings.css,css.php?stylesheet=167" />

Gdzie plik css2.php będzie ładował php'em całą grupę plików - dodatkowo ustawi cache ( expire time ) + z 7 requestów do serwera byłby tylko jeden a ponadto można usunąć z takich plików białe znaki co zoptymalizowało wagę tych plików przynajmniej o 20-30%.

Optymalizowałem sporo stron średnio każda ( 8 js'ów + 4 css`y ) z 12 requestów do serwera robiło się tylko 2, expire time ustawiało się na bardzo mocnego, a waga spadała o 400-1200kb ( a jest to bardzo dużo jak dla strony, a tym bardziej dla gier online czy for ).
To nieprawda ze css.php nie ma prawa występować na witrynie. MyBB używa go automatycznie w wypadku styli które są dziedziczone.
Head - decyduje który plik, powinien być tak?

Z tego co tam widzę, jest jakiś prosty query do bazy - stąd nawet pliki mogłyby się nazywać automatycznie:
css_162.css zamiast css.php?stylesheet=162


Dziwne, że nikt z MyBB na to nie wpadł.. Szukają nie wiadomo czego by zoptymalizować silnik a tutaj taka wpada..

Tutaj byłoby przynajmniej 5 głupich requestów do php i bazy mniej. Po co inicjalizować cały silnik do wczytania głupiego css z 15 regułkami ? A jeżeli faktycznie chcą to mieć, to niech zrobią to już w arrayu - ale w jednym pliku:

css.php?id=12,16,160,250
gynio, zawsze możesz sforkować MyBB na githubie i wprowadzić swoją poprawkę. Chętnie skorzystam.
(12.07.2013, 00:07)Victor napisał(a): gynio, zawsze możesz sforkować MyBB na githubie i wprowadzić swoją poprawkę. Chętnie skorzystam.

Dodatkowo zapraszam do rekrutacji do teamu MyBB PL jako Dev :) Przydałaby się pomocna i doświadczona dłoń.
A ja powiem tak. Przeanalizowałem CodeOut na GH i mają rację Ci którzy twierdzą że umieszczanie css'ów w dystrybucji jest zbędne. Bez CSSa forum przyjmie domyślny wygląd i tyle.

Pomijam to iż plik CSS zajmuje 0,001 MB.



Użytkownicy przeglądający ten wątek:

1 gości