Dlaczego nie widać zmian na stronie pomimo modyfikacji plików CSS/JS?

Bardzo często zdarza się, że wprowadziliśmy zmiany w kodzie CSS/JS naszej witryny, jednak po wejściu na stronę nadal ich nie widać. Winnym jest mechanizm pamięci podręcznej przeglądarki. Na szczęście można ten problem łatwo obejść.

Przeglądarki otwierając stronę umieszczają jej pliki w pamięci podręcznej – jest ona wykorzystywana przy kolejnych wizytach na tej samej stronie.

Dlatego też pomimo modyfikacji plików, zmiany często nie są widoczne na stronie od razu. Dodatkowo wszelkie poradniki traktujące o optymalizacji stron zalecają ustawienie dość długiego czasu „życia” plików w pamięci podręcznej przeglądarki – jeżeli nasza strona była optymalizowana to jest duża szansa, że pliki CSS/JS będą odświeżane raz na dzień lub rzadziej.

Rozwiązanie jest na szczęście bardzo proste – wystarczy dodać dowolny parametr do adresu pliku CSS/JS.

Dla pamięci podręcznej przeglądarki pliki o adresach:

http://domena.com/css/plik.css

oraz

http://domena.com/css/plik.css?ver=2

To dwa zupełnie różne pliki. Mało tego – WordPress stosuje sam taki mechanizm po to żeby po jego aktualizacji przeglądarki wczytały nowe pliki CSS i JS aby uniknąć niepotrzebnych (i de facto nieistniejących) błędów.

Najprostsze rozwiązanie dla początkujących miłośników WordPressa to zainstalować wtyczkę taką jak „WP Version in Query String Modifier” – brzmi tajemniczo, ale ta wtyczka pozwala nam po prostu zmieniać parametr ver dodawany do plików CSS i JS.

Po jej zainstalowaniu w sekcji ustawień znajdziemy nową sekcję:

Gdy do niej wejdziemy znajdziemy kilka prostych opcji:

Pierwsza domyślna opcja rozwiązuje nasz problem – po każdej zmianie w plikach CSS/JS klikamy przycisk „Increment” a później przycisk „Save Changes” co spowoduje zapisanie nowej wartości parametru ver i tym samym wymusi na przeglądarkach pobranie nowej wersji plików CSS/JS.

Druga opcja po prostu usunie parametr ver – dzięki temu utrudnimy atakującym poznanie wersji naszego WordPressa – choć tak naprawdę to samo robi domyślna opcja.

Trzecia opcja przywraca domyślne zachowanie WordPressa czyli ustawianie parametru ver na aktualnie używaną wersję WordPressa – choć ogólnie lepiej się nią nie chwalić 😉

Dodatkowo mamy też jeszcze jedną opcję o nazwie „Add time randomizer” – dodaje ona do wartości parametru ver ciąg znaków, który ulega zmianie wraz z upływem czasu – zatem przy każdym odświeżeniu strony wartość parametru ver będzie inna. Jest to świetne rozwiązanie gdy wciąż pracujemy nad stroną i wprowadzamy dużo zmian w plikach.

Jednak po zakończeniu prac polecam tę opcję wyłączyć dla zwiększenia szybkości wczytywania się naszej strony i pozostać przy opcji „Cache Buster” oraz zmieniać wartość parametru ver po każdej modyfikacji plików ręcznie.