Quick recap on what to check when migrating a web app to inline CSS styles
There are many pros and cons of migrating your app to inline CSS styles but if you’ve decided to migrate entirely to inline styles, here is what you need to check to verify the migration was successful and your styles work as expected.
- This publication helped me ramp up on inline CSS in no time https://varvy.com/pagespeed/inline-small-css.html
- Check the page source, verify the style properties in <style></style> in the <head></head> of the page source
- Verify there are no calls to .css in the page sources by searching the page source for “.css” calls
- It’s ok if there are references to css font API e.g. Google font API https://fonts.googleapis.com/css?family=Open+Sans:400,600
- Compare before and after migration apps visually for any visual issues with UI
- Verify loading speed was not affected but improved after migration i.e. app doesn’t slow down when loading because of not caching the .css file
- Consider using network throttling to verify app performance (I used the option in Chrome Dev tools as I haven’t mastered anything else yet)
Tools to use to check inline css styles work properly:
- Lighthouse in Chrome Dev Tools (Right click the app > Inspect > Audits)
- CSS delivery tool https://varvy.com/tools/css-delivery/
Are you an experienced tester? — Did I miss anything? Feedback appreciated.
Happy testing!