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.
Server
- Enable HTTP2
- Enable gzip
- Enabling caching page generation engine site
- Enabling caching for files provided by the server:
- Checking that there are no 404 responses to loading resources – they slow downloading
Layout
- Connect CSS and JS – at the end of HTML, before
</body> - Automatically generate critical CSS and embed it through
<style>in<head> - Minimize the number of downloaded files (not very relevant if there is HTTP2):
- Use CSS Sprites
- Use base64 or inline SVG for small images
- Combine all CSS into one file
- Combine all js into one file
- Use only WOFF2 and WOFF when connecting web fonts. More about connection.
- Postpone data loading optional for first-page display:
- Use defer and async for third-party js
- Take out the buttons of the social. sharing a to post-load or load them while scrolling contents to them.
- Use LazyLoad for pictures, but not to the detriment of SEO (src should lead to a real picture, not a stub).
- Invisible to load at the first loading of the page through AJAX (e.g. tabs content) or prerender.
- Load through prerender unused blocks on the current page, but will be needed for the following
- 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
- Transfer external banners and other resources loaded from third-party slow servers – to the client-server
- 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)
- Define img sizes in HTML.
- You should minify your HTML, CSS, and JavaScript resources:
- To minify HTML, try HTMLMinifier
- To minify CSS, try CSSNano and csso.
- To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
- Optimize graphics:
- Do not load images on a regular display. Use retinajs and mixins.
- Or use the technique 30% quality Retina JPG
- 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 compresspng.com ) Maybe somewhere you can replace png24 with png8 + matte, and somewhere with jpg
- Save JPG as progressive
- Optimize jpg and png files:
- using compresspng.com (compress better and faster than console utilities)
- or using console utility pngout, jpegtrank (including plugins for Grunt / Gulp)
- 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
- Combine several adjacent link images into one image, on which positioned links overlap
- Make design changes by removing heavy items
- 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 www.flaticon.com
Leave a Reply