Question

1. How to Lazy Load images on Q2A? I have so many images, it will speed up my website
2. Also, how to remove render blocking CSS and JS? How to combine them into a single file?
3. Leverage browser caching?
4. Minify HTML?
5. AMP (accelerated mobile pages) for Q2A possible?

Answer 1

My system is equipped with other than 5. These information is not answer, but it may be useful to you.

1. My system uses Jquery Lazyload plugin. The details of the implementation are here. I applied Lazyload to avatar images regardless of the type of request (Page request / Ajax request). As a result, many problems occurred. In order to avoid many problems, it is important not to apply lazyload to ajax request.

2. I am compressing CSS and JS with this library. However, not all CSS and JS files can be compressed with this library. Depending on the coding of the files (Especially JS file) to be compressed, it may not work correctly. For example, ckeditor.js. In other words, you need to be able to specify uncompressed files in the Admin panel. By the way, currently only CSS files are compressed on my site (Look at HTML sources with debugging tools).

3. In my system, I optimize the header of the image request mainly and effectively use the browser's cache.

4. Currentlt, tab codes is removed in my system. This can be achieved with overriding output_array() and output_raw() theme functions.

5. I did not apply AMP. Because AMP does not work effectively on community systems like QA site. This is noted in the AMP documentation.

Comments

Yes, manually minifying JS / CSS causes problems. In Wordpress, there are Plugins for Defer JS, minifying JS / CSS / HTML and combine them into one file automatically without changing the core file. Page load time is one of the important factors in SEO.

Also, many people using shared hosting and this will be very handy. Is there a q2a theme which is responsive and has the following features by default?

1. https://i.imgur.com/xZE1qod.png <--- My WP Blog

I heard AMP supports E-Commerce Websites. How about PWA for Q2A --> https://developers.google.com/web/progressive-web-apps/

My Q2A site uses a lot of external images, so it is not possible to lazyload them. OK.

Answer 2

I suppose the question is mainly for getting AdSense approval or improve the Google search apearance. For that in my opinion the most important point is to leverage browser cache. i.e., enable cache for images, css and js files at least. This will make the site a lot faster for returning users and an interactive site like Q2A expects a lot of those users.  And this step is something which is comparatively easy to do. For Apache one can follow the below link

http://www.serverlab.ca/tutorials/linux/web-servers-linux/improve-website-performance-by-enabling-caching-in-apache/

Comments

Not for getting Adsense approval but for improving the SEO.

Answer 3

Yes, manually minifying JS / CSS causes problems. In Wordpress, there are Plugins for Defer JS, minifying JS / CSS / HTML and combine them into one file automatically without changing the core file. Page load time is one of the important factors in SEO. 

Also, many people using shared hosting and this will be very handy. Is there a q2a theme which is responsive and has the following features by default?

1. https://i.imgur.com/xZE1qod.png <--- My WP Blog

I heard AMP supports E-Commerce Websites. How about PWA for Q2A --> https://developers.google.com/web/progressive-web-apps/

My Q2A site uses a lot of external images, so it is not possible to lazyload them. OK.

Answer 4

I was just answering a related question to this topic the other day..

I don't think there's a Speed Optimization plugin available.
Although I've created a premium theme that does most of these things.

- It lazy loads images
- It prevents render blocks as best as it can
- It compresses/minifies CSS and JS
- Is super fast, and looks good. (2 birds with one stone)

You can check it out here: Polaris theme.