Slow page speed in speed test
I tested my website which is deployed on Heroku Hobby dyno.
I received page speed score of 40 for the mobile and 88 for the desktop.
Lab data:
- First contentful Paint 5.3 s
- Speed index 5.3 s
- Time to Interactive 8.0 s
- First Meaningful Paint 5.5 s
- First CPU Idle 8.3 s
- Max Potential First Input Delay 200 ms
Opportunities:
Serve images in next-gen formats estimated saving: 12.9 s
(My bg image size: 2909 KB)
Enable text compression estimated saving: 2.25 s
and few more ...
I did the test on:
https://developers.google.com/speed/pagespeed/insights/
Any suggestion what should I do to get a better score?
It's interesting desktop is so much faster than mobile.
Questions:
Just my 2 cents.
This particular testing tool simulates a reasonably slow mobile connection, so things like large images have a much bigger effect.
For SEO you want to really be above 80 on mobile. Low hanging fruit: if my math is correct your image is 2909 KB, or almost 3MB. This is pretty normal working in Photoshop, but is completely unacceptable for web & mobile web. For starters, you can pretty much get away with a 1200px width on your original main header background image (I use sketch to resize, Photoshop works, Figma, etc). Use Jpg unless you need transparency (then use .png). Then go to:
https://compressor.io/
and download your compressed image. All images on your website should be compressed, really.
If you follow this process you should not have any perceptible image degradation.
Bootstrap itself won't ding you on SEO scores, but any type of "free" theme might. Wordpress is full of them. Categorically this is called "bloatware" and can cause these types of problems.
Sync (a.k.a. the opposite of asynchronous javascript) is basically anything loaded in the <head> before the page loads (for example CSS does this). This is called page render blocking as the page cannot load yet until these instructions have been completed. Putting an "async" and / or "defer" attribute on scripts in this area, or moving them to below the </body> tag will not block page load, but be careful the script still works as intended before you do this. Past that it is an accumulation of subtleties. You can follow a list of instructions and get to perfect 100 once you get the hang of it.
https://www.keycdn.com/blog/google-pagespeed-insights-wordpress
Sorry this is aimed at Wordpress but the concepts are the same. Some "gotchas" include the ironic fact that Google speed test dings you for including a Google tracking script. Yep. Solution: self host the script and manually (or create an auto task) to update it periodically. Lol. But honestly just stay above 80 on mobile and give yourself a pat on the back. Cheers!
O nosso site foi promovido pela empresa https://sitechecker.pro/pt/speed-test/. Promoveu 7 pedidos, que "caíram" constantemente do topo. E havia problemas constantes em geral. Quando começámos a cooperar, o nosso site estava no topo de quase 30 pedidos! E o dinheiro não foi gasto muito mais. E em geral, os rapazes cumprem a sua palavra e alcançam os resultados prometidos. Respostas disponíveis e informativas a todas as questões que se coloquem. Neste momento, para além da promoção e ajuda com a análise, pelo que lhe agradecem separadamente! Tencionamos continuar a trabalhar com uma equipa de profissionais.
Sorry to hear about your page speed issues. What’s the URL of your site? I’ve got a lot of experience boosting website performance. Maybe I could help you out
Definitely try to load script asynchronously. Also you can load only the necessary CSS (above the fold) within
<style></style>tags in the header and make Javascript load the rest of the styles in an<script async src=""></script>tag, right before the closing</body>tag.One other thing that also might contribute is getting rid of excessive stylesheets on the page.
You can use a technique of code splitting to reduce the stylesheets sent to the browser.
I happen to be working on a project that will do this as an API and let developers serve only the needed CSS. Let me know if you are interested.
Heroku is slow for a lot of reasons, partially because their infrastructure is 10 years old. You can speed it up by putting something more modern in front of it. CDNs add a layer of complexity but solve some of this problem.
The next-gen format thing can be done by most CDNs, or you can run something like imgproxy (https://github.com/imgproxy/imgproxy) to handle image conversion, or you can just generate webp images at build time if you don't have that many.
Shameless plug: we actually built a thing specifically to make Heroku apps faster. It takes care of text compression, speeding up ssl, and runs the dyno on better hardware: https://fly.io/heroku
Too much sync js? No item is put into defer system?... No image sizes attributes?...
Are you writing stuff from scratch? What stack?..
Laravel, Bootstrap free theme (from https://startbootstrap.com/themes/ which works and looks great for mobile and desktop). Not writing anything from scratch.
Can you clear the first questions for me? I didn't quite understand.