search

DevProgress / my-vote-matters

GNU Affero General Public License v3.0
2 stars 7 forks source link

Optimize page speed #56

Open durka opened 8 years ago

durka commented 8 years ago

Google Analytics suggests the following speed improvements:

Burtchen commented 8 years ago

I'll do the CSS minification and tinify some PNGs!

elevati0n commented 8 years ago

Hello I have made a branch fork (because i dont have write) that uses compass for local compilation and minification of css, including the bootstrap library and require javascripts. I believe this takes care of the caching problem as it eliminates the network call to download those assets elsewhere.

https://github.com/elevati0n/my-vote-matters/tree/CompassCSSBuild

The only network calls now are for jQuery and GoogleFont API, which I believe is pretty standard.
Here is the branch where I made these changes. I was careful to change the config .ru file to work with our current asset paths to make this an easy transition. although there is some added complexity in using a build tool, I believe the benefits outweigh the costs, especially since thhese changes (such as having sass' mixins) will make added features easier to implement.

Burtchen commented 8 years ago

@elevati0n You also added all the sass cache files to the pull request, making it a bit hard to read. Also, apart from the fact that @durka mentioned the project is so simple we don't want a build process, isn't using a CDN for a standard bootstrap very recommended? Not only is the CDN itself a good delivery, but there's a high probability a user will already have requested bootstrap through this URL on another site, thus hitting their browser's cache rather than the one for this site.

elevati0n commented 8 years ago

Sorry about adding all the cache files I will update the git ignore. Still getting accustomed to a few things. I am not sure which is faster I would have to test it but I know that if you think about cache hits coming from our server OUT, it is far more likely that one of our close hops will have served our static stylesheet recently saving our server that load. whether or not the client had seen it is anyones guess, likely they have seen some sites with bootstrap, but I am not sure that non-exact hits will trigger a cache hit. This also allows us the possibility to only include the bootstrap components we need.

Personally I prefer to use tools such as Compass, HAML, LESS, Unit Testing to cut down on the sorts of mistakes that are introduced by sloppy 'this site is so simple it doesn't matter type programming', I just went through the html and found a bunch of errors with how bootstraps grid system is actually supposed to work and even some unclosed divs. Using 'build tools' if you really want to call compass that eliminates far more sources of error and speeds up development speed and increases quality, after the initial start up investment.

If we decide to deploy bootstrap.min from a CDN or as part of our DOM as google recommended, that is still the way I write software. I included the css file for anyone that feels more comfortable with that with instructions on how to do it either way. I would much rather get an error from a 'build tool' on an overly simple site, than an unchecked fatal bug on voting day.

durka commented 8 years ago

If adding a build step makes development easier/faster, and makes you folks more likely to contribute... let's do it!

On Oct 29, 2016 6:29 AM, "s" notifications@github.com wrote:

Sorry about adding all the cache files I will update the git ignore. Still getting accustomed to a few things. I am not sure which is faster I would have to test it but I know that if you think about cache hits coming from our server OUT, it is far more likely that one of our close hops will have served our static stylesheet recently saving our server that load. whether or not the client had seen it is anyones guess, likely they have seen some sites with bootstrap, but I am not sure that non-exact hits will trigger a cache hit. This also allows us the possibility to only include the bootstrap components we need.

Personally I prefer to use tools such as Compass, HAML, LESS, Unit Testing to cut down on the sorts of mistakes that are introduced by sloppy 'this site is so simple it doesn't matter type programming', I just went through the html and found a bunch of errors with how bootstraps grid system is actually supposed to work and even some unclosed divs. Using 'build tools' if you really want to call compass that eliminates far more sources of error and speeds up development speed and increases quality, after the initial start up investment.

If we decide to deploy bootstrap.min from a CDN or as part of our DOM as google recommended, that is still the way I write software. I included the css file for anyone that feels more comfortable with that with instructions on how to do it either way. I would much rather get an error from a 'build tool' on an overly simple site, than an unchecked fatal bug on voting day.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DevProgress/my-vote-matters/issues/56#issuecomment-257083902, or mute the thread https://github.com/notifications/unsubscribe-auth/AAC3nzWjV0bdsuPOSFB_cvXLY3byg1Xwks5q4x_pgaJpZM4Kgtk7 .