Manofmany.com to australijski magazyn poświęcony mężczyznom.
Codziennie zespół publikuje fajne rzeczy w stylu, gadżety, technologie itp.
Po rozmowie z nimi w Google+ daliśmy im ten prosty raport z optymalizacji.
Czas ładowania
Różne narzędzia pokazują różne dane:
- Pasek narzędzi SEO Chrome – 7,43 sek
- Narzędzia Pingdom – 12,62 grudnia
- GTMetrix – 9,86 sek
- Webpagetest.org – 24,14 sek
Rozmiar strony
Różne narzędzia pokazują różne dane:
- YSlow: 3096,5 bajtów
- Narzędzia Pingdom: 4,0 MB
- GTMetrix: 3,88 MB
- Webpagetestst.org: 3,816 KB
Będę dalej używać tylko jednego narzędzia, YSlow.
Komponenty
Zbyt wiele żądań http: 51. 51 nie jest zbyt duże, ale można je poprawić.
JavaScript
Jest 15 plików js, całkowity rozmiar 627,1 KB:
- https://apis.google.com/js/plusone.js – 22,9 tys
- http://platform.twitter.com/widgets.js – 80,7 tys
- http://www.google-analytics.com/ga.js – 37,3 tys
- http://edge.quantserve.com/quant.js – 5,8 tys
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 tys.
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 tys.
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1 tys.
- http://s3.buysellads.com/ac/bsa.js – 16,1 tys.
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1 tys.
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 tys.
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 tys.
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 tys.
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 tys.
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 tys.
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 tys.
JQuery.js można załadować z Biblioteki Google, aby uzyskać większą prędkość.
Największy problem dotyczy plików JS mediów społecznościowych; zdecydowanie nie używają najlepszej wtyczki do udostępniania w mediach społecznościowych. Można to zrobić za pomocą pojedynczego JS 38,5 k lub nawet bez skryptu.
Spowoduje to zmniejszenie 249,6 KB i pozostawienie numeru JS na poziomie 11. To znaczna poprawa rozmiaru strony.
CSS
Istnieje 12 plików CSS o całkowitym rozmiarze 63,7 KB.
Rozmiar nie jest zbyt duży, ale liczba jest dość wysoka.
3 pliki można połączyć w jeden: motyw stylów.css oraz wtyczki Easy Columns i Contact Form.
Reszta to czcionki pobrane z Biblioteki Google, więc pytanie brzmi: czy naprawdę potrzebujesz 9 czcionek?
Zwykle powinieneś używać 2 czcionek: jednej do nagłówków i drugiej do tekstu podstawowego.
PT Sans i Open Sans nie różnią się zbytnio, więc możesz używać tylko jednego z 2.
Lora i PT Serif – tak jak powyżej, użyj tylko jednego lub po prostu użyj Gruzji (to piękna, bezpieczna czcionka).
Nixie One – nie widzę go w użyciu na stronie.
W przypadku rzadko używanych czcionek nie ma sensu wczytywać ich za każdym razem, wystarczy użyć czcionek systemowych: Georgia, Arial, Courier.
To poprawi liczbę żądań z 12 do zaledwie 3-4. Poprawa rozmiaru nie jest aż tak duża, ale to się sumuje.
Obrazy
To największy problem serwisu mający największy wpływ na szybkość działania: 18 obrazów, łączny rozmiar 2597,5 K.
To jest ogromne; muszą zoptymalizować zdjęcia przed ich przesłaniem.
Największy obraz na stronie ma 420 tys., a prosty smush.it pokazuje, że można go poprawić o 27,6%, czyli 104 tys.
Jeśli uda nam się poprawić wszystko o 25%, to będzie to ponad 600 tys. utraty wagi.
Rozwiązania:
1. Optymalizacja obrazów
Użyj Photoshopa i Zapisz dla Internetu w trybie 60% i zaznaczonym progresywnie. Jeśli Twoi goście korzystają z progresywnych plików jpg w przeglądarce Chrome, Firefox lub IE9, ładują się superszybko. W pozostałej części będzie nieco wolniejszy niż zwykłe pliki jpg.
W przeciwnym razie po prostu Zapisz dla Internetu przy 60% -80% i zoptymalizowanym sprawdzeniu. Spowoduje to zapisanie normalnych plików jpg.
Następnie kontynuuj przesyłanie obrazów do WordPress.
Nie masz Photoshopa?
Użyj jpegmini.com, aby zoptymalizować obrazy przed przesłaniem lub po prostu użyj wtyczki WP, aby zrobić to automatycznie po przesłaniu.
2. Serwowanie obrazów
Udostępniaj statyczną zawartość z domeny bez plików cookie i zrównoleglaj pobieranie między nazwami hostów.
Te dwie rzeczy można osiągnąć, ładując obrazy z subdomeny bez plików cookie, takiej jak obrazy.manofmany.com.
Teraz przeglądarka może pobierać wiele elementów jednocześnie, co poprawia szybkość działania witryny.
Leniwe ładowanie
Oznacza to, że obrazy będą ładowane jeden po drugim i widoczne dla użytkowników tylko wtedy, gdy jest to konieczne.
Są ładowane, gdy są widoczne tylko w widoku przeglądarki.
Ładując tylko obrazy powyżej części strony, przyrost prędkości jest znaczny.
Inne rzeczy, które możesz zrobić
– buforowanie przeglądarki
– połącz js (jeśli to możliwe)
– dodaj nagłówek wygaśnięcia
– skompresuj za pomocą gzipa
– używając etagów
– Wtyczki profilujące, aby zobaczyć, które mają wpływ na czas ładowania i zastąp je lepszymi wtyczkami
– Używaj kodu wfunctions.php zamiast wtyczek do prostych rzeczy, takich jak ładowanie czcionek Google
– rozwiąż błędy 404
– zminimalizuj przekierowania
– załaduj JavaScript na dół strony
– możesz użyć tylko 5 postów na stronę zamiast 10
– możesz użyć mniejszych obrazków, np. miniatur, ale to oznacza ingerencję w projekt
Wniosek
W większości są to proste rzeczy, które mogą mieć ogromny wpływ.
Aby przeprowadzić bardziej zaawansowaną optymalizację, powinniśmy przyjrzeć się motywowi i wtyczkom i sprawdzić, czy występują problemy z wydajnością.
Zostaw odpowiedź