Outreachy '20: Optimize Performance and accessibility Project Planning

[Tlazypanda]

Hey everyone! This is a planning issue to map out all the tasks to be covered in the upcoming weeks and create a room for further discussions and improvements.

Note: see original proposal here: https://publiclab.org/notes/itm2017004/03-12-2020/outreachy-proposal-optimize-performance-and-accessibility-of-public-lab-content

Performance Analysis and Improvement:

Tasks:

• Using WebpageTest and PageSpeedInsight to study the current waterfalls.
• Minify js by setting uglifier gem in config/production.rb file. (Configure Uglifier gem to minify js #7937 closed minify leaflet scripts using uglifier #8159 open)
• Minify css using yui or sass-rails (Already done)
• Removing the older version of font-awesome currently being loaded (2 versions being used now 5.12 and 4.7) and replacing it with a gem so that it is included in the asset pipeline. More info can be found here (all closed Add font-awesome rails gem and remove other fontawesome packages from… #7938 and Fix icon Font awesome error #8026 fix icons error by preloading FA 5 first #8041 )
• Async or defer attributes to be added to js files to reduce first paint time.(more information here
• Replace jquery with cdn since it is widely used and would be available as cache in most client’s browser.More info can be found here,here and here.This will allow us to externalize jquery from application.js allowing us to call application.js asynchronously. (externalise jquery using jquery-rails-cdn and jquery-rails fallback #8161 open - tests failing need to investigate after some pending work gets merged first)
• Check if all the js files are duplicates (i.e if already present in the manifest file as well as assets.rb) and remove redundancies. (remove duplicate from assets.rb already present in application.js #7958 open)
• Only load critical css for the first paint and rest asynchronously using loadcss-rails and critical-path-css-rails (open Load critical css and rest asynchronously #7996)
• Remove CDN and other links otherwise available from asset pipeline in file app/views/csvfiles/new.html.erb (
• Replace bootstrap-slider.js with minified js and async tag or add it into the asset pipeline.(Also can be considered for removing since it is obsolete and most of the code isn't used) (Minify bootstrap slider script and add defer tag #7939 open)
• Minify leaflet js files by calling them from already present asset pipeline (closed replace leaflet css/js files in editor rich #8087 and open replace leaflet files from assets.rb in questionRich.html and _mapDependencies.html #7945 )
• Minify esri-leaflet-renderers.js (closed replace esri cdn link with minified cdn #8164)
• Replacing the delivr cdn of mathjax with an alternative npm or serve it in a minified manner
• Adding font-display:swap tag for fonts imported to allow it to fallback to normal font in the first paint till it gets loaded.(Check for browser compatibility or invisible text issue)
• Add lazy loading for images and serve them in next-gen formats.More info can be found here. (lazy load images using lazyload-rails gem #8043 )
• Add Rack deflater to gzip files that are not already gzipped.More info can be found here

New work added (not defined in the scope before)

• Remove n+1 queries (eliminate n+1 query in questions comments parent method #8272 refactor and remove unused code in user controller #8269 eliminate n+1 query of subscription tagname method #8268 eliminate n+1 query of comment parent method #8267 eliminate n+1 queries of tags #8183 closed wip: remove n+1 query from revision#path method #8191 wip: remove n+1 query from user#tagnames method #8190)
• Replace .length/.count with .size (main issue Replace all instances of .length and .count with .size #8194 ftos created by @cesswairimu 👏 more ftos to be created ahead)

Accessibility

See https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html for firefox accessibility inspector, and WAVE assessment

Tasks

• Add labels to forms wherever applicable.(break-me-up tag can be used to break it down into several components) (Flagged as missing form label)
• Add aria-label if we don’t want the label to be visible but accessible.(break-me-up tag can be used to break it down into several components) (Flagged as missing form label for cases where we want hidden form labels)
• Check and test if on zooming into text all the elements of the page are visible or not and apply changes accordingly.(break-me-up tag can be used to break it down into several components)
• Add accessible names to button to prevent screen readers from announcing it as “button”.(break-me-up) (Flagged as empty button problem)
• Add meaningful text into links to promote uniqueness and accessibility.(break-me-up) (Flagged as empty link problem)
• Add alternative text for images to promote SEO and accessibility.(break-me-up) (wip: Add alternate text for lead images #8106 stuck and not sure how to work on this TBD after printability)

Worked on a route-to-route basis by testing against WAVE assessment (#8054 #8028 #7995 #7989 #7977 #7975 #7968 #7966 #7962 )
FTOs opened (#8094 #8093 #8092 #8055 #8032 #8030 #8029 #8007 #8006 #8005 #8001 #8000 )

Printability

Tasks:

Modified scope to avoid working with additional libraries:-

• Using js script and DOM manipulations to create the print preview
• Set topics section display as None in the stylesheet.
• Add better contrast to the links printed by changing the colour of a tag in the stylesheet.
• Images can be scaled down in the stylesheet for uniformity across the documents.
• Add css to display tables in proper tabular format
• Proper styling done with help of @ebarry
  //more points to be added here as and while developing if more improvements can be made

Documentation

Tasks:
#8057 https://hackmd.io/@itm2017004/BJuqtap6L

• Creating a proper documentation guide covering all the points above ensuring that contributors abide by it to promote accessibility.
• The guide will contain sections for adding aria-labels,form-labels,alt text and testing 200% zoom on pages.
  //more points to be added here as and while developing if more improvements can be made

Up for discussion

Tasks:

• Running Lighthouse CI for pull request to ensure performance and accessibility in further code.More details can be found here. (Discussion issue here Lighthouse ci for performance and accessibility monitoring #8112 awaiting input)
• Replace will-paginate gem with pagy which is much more memory efficient and can improve performance.
• Serving assets over HTTP/2 instead of HTTP/1.1
• Add descriptive text for links for better Search Engine Optimization.
• Add rel="noopener" to links having target=’_blank’ to allow safety of cross-origin destinations.
• Allow password copy-pasting since it is flagged as not a secure policy by Lighthouse.
• Remove error logging into the console in the production environment.
• The turbolinks gem is present in the gemfile but not used. So needs to be removed assuming we ran into some issue with it ?

[Tlazypanda]

@jywarren @cesswairimu @SidharthBansal This is just an initial draft for the planning. Since all of the features to be implemented require rigorous testing I think it would be better for now to not make this a project 😅 . Please go through all of the tasks I have raised, I have tried to be as elaborate as possible and since these are a not bugs, its entirely upon us if we want to implement it this way or not.

Also since most of these are tasks that would be better tested in the production environment, I will seek your constant support upon merging these to help me test it out 💯

I was also wondering if it is possible for me to start working on them right away since I want to make the most out of it 😄 without breaking anything xD

There are also a couple of issues/questions that I have to discuss after going through the codebase 💭
Thanks a lot!! 🚀

[cesswairimu]

Great breakdown...Thanks for opening this @Tlazypanda

[emilyashley]

Yes! Happy to see this.

Also just want to say I'm here to help with any of the steps. I <3 WebPerf!

[Tlazypanda]

@emilyashley Thanks! Will be sure to keep you in the loop 🎉

[SidharthBansal]

Awesome, there are so many things to cover up this Outreachy!
Which one are you targeting first?

[jywarren]

This is looking great. Hoping to go through it for some suggestions today! I added a link to your proposal too!

[Tlazypanda]

@SidharthBansal I plan to start with Improving Performance first and have opened some issues for the same 😅 Thanks a lot for reviewing 💯

@jywarren Yeah thanks ✌️ I have opened some issues for the start as well where I have added more details for each issue 😅 And as always looking forward to your suggestions 🚀

[jywarren]

Awesome to see all this. It seems super well planned out. Perhaps we could pull in some of the PDF generation (in-browser vs. in-app) discussion from your proposal too?

There is some really amazing stuff here! Wow, esp. in the "Up for Discussion" section!

Another thought is that this planning issue (and perhaps a summary later on) could be used as a template to inform similar refinements to our other Rails projects!

Great work!!!

[jywarren]

Oh, also -- you can also create a milestone for all this as the issues start to be broken out!

[Tlazypanda]

@jywarren Thanks ✌️ 😄
Just have one more exam to go and then I will create the milestone 👍 .

Sure will try to add points about the pdf discussion here as well 😅 . And yeah Really looking forward to making this a template for other rails projects too 🚀

[jywarren]

Hi @Tlazypanda! Would you mind updating this issue briefly with your recent work/progress, just so it stays current? Thank you!!! Hope your exams went well :-)

For example #7966 and #7963 are AWESOME 🎉