Optimize page speed

[durka]

Google Analytics suggests the following speed improvements:

• Should fix
  • Mark <script> tags async (or copy/paste them into the HTML) so the page can be rendered before the script downloads
• Consider fixing
  • Mark JS and CSS as cacheable (is this possible?)
  • Compress and shrink img/logo.png so it downloads faster
  • Consider copy/pasting stylesheets into the HTML
  • Minify JS so it loads/downloads faster
  • Minify CSS so it loads/downloads faster

[Burtchen]

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

[elevati0n]

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]

@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]

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]

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" [email protected] 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
#56 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAC3nzWjV0bdsuPOSFB_cvXLY3byg1Xwks5q4x_pgaJpZM4Kgtk7
.