Checklist for optimizing web site loading speed

Find the Checklist to help web page optimization and SEO.

Tools for analyzing site loading speed with recommendations:

GTmetrix uses Google Page Speed ​​+ Yahoo! YSlow also gives detailed recommendations, but Google PageSpeed ​​Insights also checks the download on mobile devices.


  1. Enable HTTP2
  2. Enable gzip
  3. Enabling caching page generation engine site
  4. Enabling caching for files provided by the server:
    1. Expires headers
    2. E-tag
    3. Cache-control
    4. Vary: Accept-Encoding header
  5. Checking that there are no 404 responses to loading resources – they slow downloading


  1. Connect CSS and JS – at the end of HTML, before </body>
  2. Automatically generate critical CSS and embed it through <style> in <head>
  3. Minimize the number of downloaded files (not very relevant if there is HTTP2):
    1. Use CSS Sprites
    2. Use base64 or inline SVG for small images
    3. Combine all CSS into one file
    4. Combine all js into one file
    5. Use only WOFF2 and WOFF when connecting web fonts. More about connection.
  4. Postpone data loading optional for first-page display:
    1. Use defer and async for third-party js
    2. Take out the buttons of the social. sharing a to post-load or load them while scrolling contents to them.
    3. Use LazyLoad for pictures, but not to the detriment of SEO (src should lead to a real picture, not a stub).
    4. Invisible to load at the first loading of the page through AJAX (e.g. tabs content) or prerender.
    5. Load through prerender unused blocks on the current page, but will be needed for the following
  5. To load js-libraries and fonts from CDN – to use their versions cached from other sites and to quickly download from CDN if there is no-cache
  6. Transfer external banners and other resources loaded from third-party slow servers – to the client-server
  7. Minimize redirects for external resources (for example, external js is given not by the URL at which it is requested, but by a redirect URL)
  8. Define img sizes in HTML.
  9. You should minify your HTML, CSS, and JavaScript resources:
  10. Optimize graphics:
    1. Do not load images on a regular display. Use retinajs and mixins.
    2. Or use the technique 30% quality Retina JPG
    3. Image Type Conversion:
      • SVG (preferred) or png – for vector images, charts, strict color transitions
      • jpg – for full color and gradients
      • png24 for transparencies
      • png8 with alpha channel for transparencies (via the graphics optimizer ) Maybe somewhere you can replace png24 with png8 + matte, and somewhere with jpg
    4. Save JPG as progressive
    5. Optimize jpg and png files:
      • using (compress better and faster than console utilities)
      • or using console utility pngout, jpegtrank (including plugins for Grunt / Gulp)
    6. Wrapping visual decorations in CSS3 instead of images:
      • for example, the shadow of a picture can be made via box-shadow, and the picture itself can be saved without a shadow
    7. Combine several adjacent link images into one image, on which positioned links overlap
  11. Make design changes by removing heavy items
  12. It is advisable to remove the query string (“?”) In the URL of the given resources (some proxies do not cache them)

Icons made by Freepik from

Latest posts by W3TWEAKS (see all)


Leave a Reply

Your email address will not be published. Required fields are marked *