Improve rendering speed of quran.com

[mmahalwy]

Use https://developers.google.com/speed/pagespeed/insights/ and https://varvy.com/tools/ and https://developers.google.com/speed/pagespeed/module/ to improve quran.com.

[aam1r]

Is this still on the roadmap?

Our JS and CSS aren't gzip'd either and doing that itself will probably speed things up quite a bit.

http://stackoverflow.com/a/12644530/924643

[ahmedre]

wow, that's really really terrible - we'd expect a difference between:

❯ curl http://quran.com/build/main.js --silent --write-out "%{size_download}\n" --output /dev/null
600898

and

❯ curl http://quran.com/build/main.js --silent -H "Accept-Encoding: gzip,deflate" --write-out "%{size_download}\n" --output /dev/null
600898

but no difference. insha'Allah i'll fix this.

[ahmedre]

jazakAllah khairan btw for reporting this, bro.

[ahmedre]

enabled gzip:

❯ curl http://quran.com/build/main.js --silent -H "Accept-Encoding: gzip,deflate" --write-out "%{size_download}\n" --output /dev/null
167456

much better, and time cut to about half al7amdulillah!

[ahmedre]

also ran pagespeed and yslow - the main thing that both mention is seeing if we can add an expiration date later in the future for images and assets that won't change. i'll see if i can do this on the cdn. yslow also reports some minor things (we have images we're downsizing in html, so why not just store smaller versions on the server, etc). pagespeed also mentions that some of our images can be compressed as well.

assigning back to you Mohamed, you can feel free to close it accordingly after going through the pagespeed ones probably, since some of their things maybe actionable.

(update - the expiration header has been there for cdn resources, but it is currently just set for a week - not sure if we should change this to a month or longer, as i believe the recommendation is to set it "very far in the future").

[ahmedre]

just realized that applying this to the api will make a huge difference as well insha'Allah - will do this insha'Allah.

[ahmedre]

sure enough al7amdulillah:

curl http://quran.com:3000/surahs --silent -H "Accept-Encoding: gzip,deflate" --write-out "%{size_download}\n" --output /dev/null
23041

❯ curl http://quran.com:3000/surahs --silent -H "Accept-Encoding: gzip,deflate" --write-out "%{size_download}\n" --output /dev/null
4882

[aam1r]

@ahmedre great stuff bro, much faster now! I hope this helps improving the experience on mobile and for people on slower connections.

As for the expiration header for statics, we shouldn't set it to long because we're not using a cache buster. I am not sure how often we update the CSS/JS but I would say putting the cache at a few hours or at most a day is the safest. @mmahalwy?

Ideally, we should use a unique file name for the CSS and JS builds (example: build/main.3c89f93f.js). We can cache that file forever because we know that if we ever make a change, the filename will change.

[mmahalwy]

@ahmedre awesome! I am pretty excited about this!

@aam1r we do update the CSS and JS frequently. We could add cache busters, that's no problem at all, and probably I am going to rewrite many things soon to make it faster and will add cache busting. What I hope to do before that though is having the CSS & JS on CDN. @ahmedre thoughts?

[aam1r]

@mmahalwy sounds good. What CDN do we use btw?

[mmahalwy]

@ahmedre would be best to answer that @aam1r

[ahmedre]

we've been generating unique file names as @aam1r suggested, so closing this for now.