What you are seeing is referred to as a “flash of unstyled content”. That is, all of your content is initially displayed without styles. A second or two later, the styles load.
The key reason for the flash of unstyled content in your case is that you are embedding all of your styles internally within your document (basically all of this stuff and downward).
This is not the ordinary configuration for WordPress. I assume that you are using some kind of plugin to do this for you. The default behaviour in WordPress is to reference external stylesheets. That is how you should be incorporating your CSS styles. If you are using plugin settings to override that default behaviour, you should change those settings.
Including your CSS internally is generally not (or practically never) the right way to handle your CSS styles, for at least two reasons.
(1) It means that your CSS styles are loaded as part of the ordinary content flow. Essentially, the browser starts rendering the page before it even realises that there are any styles. Then it hits your <style> declarations and freezes for a couple of seconds while it processes all of the styles. This causes the flash of unstyled content.
(2) It undermines any benefits you might get through caching. When the CSS is embedded on every page of your site, it has to be loaded anew on every page of your site. This will seriously slow down your website. Every time a user navigates to a page of your website, their browser has to load 400KB of CSS styles. If you use external stylesheets, their browser will only have to load those styles on the first page. It will then be cached for use on all other pages.
