In Google Chrome Lighthouse my Best practices score is 75 and SEO score is 90 but my Performance score is 0.
I keep getting notifications that my "First Meaningful Paint" takes up to 43 seconds!
I've been reading here and here.
And tried to deconstruct what is causing this. I've done almost everything that is recommended by the report and I can think of to increase performance:
minify JS/CSS
bundle JS
lazy load images
exclude 3rd party social scripts
gzip the page
reduce render blocking CSS/JS
I run the test in an anonymous browsing session with no extensions active. But still my performance is 0 in this report!
The page I'm testing is here.
What else can I do to fix this?
After analysing your page, here are the steps I would take.
Add a rel=preload attribute onto the font CSS links (https://developers.google.com/web/updates/2016/03/link-rel-preload)
Use next generation image formats, such as webp and jpeg-xr (You could try https://cloudinary.com/ if you don't want to roll your own server)
Inline above the fold CSS into the head and defer the loading of external CSS files (https://jonassebastianohlsson.com/criticalpathcssgenerator/)
Increase the CacheControl TTL for images resources to 30 days (currently you have 7 days) (https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)
You score and perceived page load speed will be dramatically increased by doing so.
Related
I need help with optimizing speed for my shopify store. It loads fine but if I check in Google Pagespeed the stats are 64 / 100 for mobile and 79 / 100 for desktop. I compressed some images, uploaded them to assets but it still picks up the cached version. I tried minifying CSS but no luck. Store link is https://crown-and-clutch.myshopify.com/
1) How can I flush shopify cache to get latest changes?
2) What can I exactly do to increase google page speed score?
Thanks.
Your scores are too generous. 79 for desktop, way too high considering how poorly the page is designed.
Total of 145 files to create one page.
It takes the Browser 9 seconds to render all that crap.
Your biggest issue is 1,114,524 bytes of JavaScript in 45 files.
And the JavaScript is compressed meaning there is likely more then twice as many bytes. FireFox says 3,700,000+ bytes of JS
Probably none of the JavaScript is needed. For example google maps JS is loading. Yet no maps on the page.
The transmission speed and configuration of your server is okay.
It's just a horrific design.
Just don't let that 79% lead you to believe your site speed is passable.
You are losing a good percentage of visitors due to slow and jumbled page loads. If you are losing only 10% you'd be lucky.
I could go on but this is an old post and I'm not sure you will even see this.
There is no technical reason this page cannot be designed to load in less than a second and score 99%.
CSS not good, 70,228 bytes in 10 files. Most not used. And 669 Errors
I agree with you #Misunderstood on remove unused CSS and JS Cod and it's will improve the loading but you may also implement some others to improve your loading and specially on mobile drives like:
Make responsive images
Compress Images
Preload Web Fonts, JS and CSS
Make Render-blocking resources load asynchronously
Combine all JS in one file and minify it to reduce the number of request and page size
Load only visible by implementing lazy loading technique
I wrote a guide on how to implement this technique in your Shopify theme
Shopify Speed Optimization — Step-by-Step Guide
I'm trying many problems with the time loading of my web page:
www.alvaromillan.es.
I've tried to minify the js and the images but the problem is, as you can see, that my web site is only this page so every image and js is on this document...
The loading time is really high and even the smooth scrolling movement lasts a lot and the first time you use it it doesn´t go fine...
Please may any of you help me??
I took a quick look at the page just using the chrome developer tools and while there are probably several things you can do which YSlow would suggest, I think the biggest gain would come from optimizing and spriting your images. 131 of the 156 requests on your page are for images. Thats alot of images and many are fairly small. Also alot of the images seem quite large in bytes for their size. Here is what I would do:
Combine the images using several sprite sheets about 50k-100k per sheet.
Use the PNG format.
Quantize the sprite sheets to 8bit PNGs. My guess is that you will not experience perceptible quality loss by doing this. You could use spmething like pngquant to do this.
Use something like optipng to apply lossless compression on the quantized image.
I think this will yield dramatic improvements.
As skaffman suggests, do run yslow and/or google page speed test for more thorough suggestions. I also like using webpagetest.org which provides great metrics for optimizing pages.
Give the YSlow Firefox plugin a try. It will analyze the load times of your site and advise you the best course of action to take to fix it.
OK, here's some quick initial thoughts...
Flush the page after the head so that the browser can start downloading those resources sooner.
Remove the iframe
jquery appears to be loaded twice - once directly and once via google.load
Can you defer the loading of the javascript until later e.g. put it at the bottom of the page or load it asynchronously?
Rather than preloading the slideshow images - why not load them on demand when clicked on, or lazy load them after the page has finished load?
Also do you really want IE to emulate IE6???
I'm working on a clients existing Wordpress Blog and the layout is image heavy. I did a speed test with Pingdom Tools and it is SLOW! Here were the results:
Total loading time:
29.9 seconds
Total objects:
172 (1631.5 KB)
External objects:
24 (536.2 KB)
HTML (X)HTML:
3 (39.8KB)
RSS RSS/XML:
0
CSS CSS:
25 (206.4KB)
Scripts Scripts:
43 (754KB)
Images Images:
95 (346KB)
Plugins Plugins:
0
Other Other:
6 (285.3KB)
Redirected Redirected:
1
Almost 30 seconds! What are some things I can do besides caching the page? would using CDN be a good idea? I tried using minify plugins, but they keep breaking the pages. The website is on a shared server (Bluehost).
First you should use Web Page Analyzer to test the website and the results will give you several solutions to speed up the site. Your overall goal should be to get every recommendation green.
Start by reducing the number of HTTP requests which can be done by suing a minification, this combines the number of output files and groups them into a single file e.g. 10 .js files become 1 js file. I suggest using the W3Total Cache Plugin to do this.
If the site has a ton of images you'll also want to make sure each image has been optimized using Photoshop's Save For Web option this can dramatically decrease the image loading times. You'll want to create a batch to do this so you can optimize all the images in one swoop.
I've also installed the WordPress plugin jQuery Image Lazy Load WP and this works well to speed up users perception of the site.
Google's PageSpeed Insights, as well as GTMetrix, both analyze and suggest compression needed for already published images. Following the recommendation obtained from either one of the tool, navigate over to TinyPNG to resize those images and then re-upload. It uses smart lossy compression to reduce file size for PNG and JPG images while preserving full alpha transparency. Output provided is much smaller in size and better in quality than Photoshop's.
I am trying to optimize my site to accomplish at least 90 on YSlow and PageSpeed.
I am doing pretty well. But in the following result, there are 4 images that show that take 9-10 seconds to load. If you see the detail, it actually shows that of those 10 seconds, mostluy 99% is while connecting only.
This is a magento store, and I am not sure what I should do to fix this problem because the images are not really big.
http://gtmetrix.com/reports/www.theprinterdepo.com/FyZjLbUX
Thank you
Interesting, even WebPageTest.org shows the same issues, but there's nothing obvious as to why this occuring (at least to me), but I can make some guesses:
you're calling an image from within the .css file on www.printerdepot.net to an image on www.printerdepot.com? (additional DNS lookup)? Sharding issue?
but then why does it only affect some images?
a bunch of other possibly related issues that are cascading through?
I'd suggest trialling converting them to Base64 Data URIs and updating the CSS to see if that improves the performance. See this article for more.
instead of having small images why don't you have only one image sprite? It will be much faster (http://www.w3schools.com/css/css_image_sprites.asp) and you will only need to send to the client one image
We use large background images (hi-res photos, up to 700 KB) for our page design.
It's part of the experience of the site that as you browse around, you see different images.
At the moment a different (random) image is loaded on each page request, from a pool of ~15 images, which could grow over time.
I'm looking for a sane way to optimize this:
To avoid the user having to download a big image file on every page view
To reduce load on the server (is this an issue, will the server keep the images in memory?)
The ideas I have so far include:
A timer which loads a different image at set intervals
Progressively loading other images in the background with ajax
Associating images with specific content (pages, tags)
The question is, how to keep it feeling somewhat random, while minimizing page load times and server hit?
I usually avoid sites with huge images, I am very impatient. I would rethink your design.
As a first step you should make sure, that the images can be properly cached:
use sane urls (no session id's etc)
set appropriate http headers ETag
Firstly, hearing that the background-images alone are 700kb astounds me. In addition to the content ON screen...that is a pretty heavy site.
For starters, I would try to use image compression tools. Two tools come to mind Imagemagick and PNGCrush. PNGCrush is excellent in reducing all the extraneous metadata attached to photos, without compromising photo quality.
I only recommend this as compressing the images will assist you in enabling the user to download a smaller quantity of content, which means quicker load times, which...at the end of the day...is what users want.
I would also cache the images, such that when a user re-visits the site, the image is already cached on their end. This minimises the HTTP requests that are made each time a user visits your site.
An example of where this technique is used on a commercial site is www.reactive.com. If you look the /js/headerImages.js file, they make use of image caching. Funnily enough, you will find the same src code at: http://javascript.internet.com/miscellaneous/random-image.html
Considering that you have mentioned that images are randomly loaded, I am assuming you are using a Javascript library such as jQuery to create the effect.
If you are, you can minimize page load times by using a CDN as opposed to referencing to a local copy of the jQuery lib which is stored on your server. I have performed performance testing on a site I made for a client, and over an average of 20 hits, saved 1.6 seconds through this technique!
Hope that helps for now :)