问题
First of all i'm not a dev at any point ; I'll do my best to make me understood.
I've created myself (a long time ago now) a portfolio, using tumblr platform. It may or may not be the greatest paltform, I know, but I like it this way and want to keep it, because it is easy for me to update it.
I'm struggling right now, because since 1 or 2 months, my page is extremly slow to load. It can take frome 5 to 30sec ! I think there is an optimization problem, because even though it is displaying a Youtube video (that may be affecting the speed), the video start playing (you can heard the sound) before the loading of the page is complete (making the video more an annoying thing than a nice feature)
you can check for yourself : https://greatorex.fr
I've used the inspector in firefox to see what's happening when loading. there are a couple of errors, but I don't know how to interpret them.
La ressource à l’adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)
While loading, i can see in the bottom left of Firefox that it stay a long time on this resource. I've changed the font used in it, but it doesn't affect this step.
Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à inline (« script-src »). Un rapport CSP est en cours d’envoi.
(sorry for the french, can't translate that)
I have made some little editings in the source code of the template, but just HTML and (a very little bit) of css modifying, so I'm not sure why this will be affecting the loading of the page.
Thanks for your input, i'll be very grateful.
Have a nice day.
回答1:
I've used the inspector in firefox to see what's happening when loading. there are a couple of errors, but I don't know how to interpret them.
La ressource à l’adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)
Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à inline (« script-src »). Un rapport CSP est en cours d’envoi.
You can completely ignore above errors, these does not affect loads page speed:
- Content Security Policy do nothing as it published by tumblr platform in report-only mode
- fonts.googleapis.com (X-Content-Type-Options: nosniff) error in common explained here. Anyway you can not interfere Google's font server, just check that font exists there.
At first glance, you have overloaded the page with animated GIF images (GIFV from https://64.media.tumblr.com/....gifv) or something like that, see Google's test. When you use <img src='animated.GIF'>, browser does not show page until completely loads all such images.
It's recommended convert such animation to video format and use < video > tag instead of <img>.<video> tag begans to show content at once, while a rest part of video is loading.
You can check which elements slow down loading you can use some 3rd party services and then take a decision how and what to optimise:
https://developers.google.com/speed/pagespeed/insights/ - the service not only measures the speed of loading pages from computers and mobile devices, but also gives detailed recommendations for speeding up the site, pointing out weaknesses.
https://www.pingdom.com/ - powerful tool, paid, but there is a trial version for 14 days
https://developers.google.com/web/tools/chrome-devtools#network and https://developers.google.com/web/tools/chrome-devtools#performance (since you are already familiar with the Firefox developer console, welcome to the Google's one) - you can quickly measure the download speed right in the Google Chrome browser. Just press the F12 key, go to the Network tab and refresh the page.
https://www.dareboost.com/fr - analyzes many parameters and gives practical recommendations
https://tools.keycdn.com/speed - shows how many requests were made during page load and what size each of them has.
https://performance.sucuri.net/ - the test measures how long it takes to connect to a website or one page. What is important is the "time to first byte", which gives us information about how long it took for the content to be sent to your browser to get started with the page
https://www.site24x7.com/ - Shows a summary of charts with breakdown of content by query and breakdown of content by size.
An additional tools to check accessibility of page:
https://gtmetrix.com/ - you can select the server region to check the page loads speed in different parts of the planet
https://www.dotcom-tools.com/website-speed-test.aspx - will check the speed of your website in real browsers from 25 locations around the world.
https://www.webpagetest.org/ - loads the page twice, thereby allowing you to test the caching
来源：https://stackoverflow.com/questions/64919304/tumblr-portfolio-is-very-slow