Speeding Up A Website

https://www.fullestop.com/blog/a-guide-to-speed-up-your-website-web-development-basics-2/

The solution to improve website performance

The website performance depends on various factors such as the content on your pages, browsers, location of access, etc. It is often possible to make the contents of a web page take fewer bytes without changing the appearance or function of the page. Reducing the number of bytes a client must download makes the page load faster. There are many ways to make websites run faster.

Combine external JavaScript files

Combine external JavaScript files, downloading an external script file is unique because it causes popular browsers to block subsequent downloads until the script has been completed. This is in stark contrast to downloading images that may occur in parallel.

Include external CSS files before external JavaScript file

Include external CSS files before external JavaScript files while script file block sub-downloads, those already in progress will remain to download. If you have an external script and CSS files, always include the CSS file before the script downloads in parallel.

Do not include inline JavaScript between external CSS and other resources

Do not include inline JavaScript between external CSS and other resources. Inline script tags, even though subsequent resources from downloading in parallel with a CSS file. So, if you have an external CSS file, be sure not to insert inline script tags between your CSS file and the next downloadable resource.

Compress images

Image files are often created with extra information embedded in the file. For example, JPEG files written by many image programs include the name of the program that wrote them. PNG images can often be made smaller by changing the way the image is encoded. These transformations are lossless. That is, the compressed image looks identical to the uncompressed image but uses fewer bytes.

Minify JavaScript

Removing comments and white space from large JavaScript files can make them substantially smaller without changing their functionality.

Remove unused CSS

CSS files contain rules that apply style attributes to elements in a web page. If a rule does not apply to any element in a page, removing it will result in fewer bytes being sent to the client, with no change in the website's appearance. However, the external style sheet may be included on more than one page. You must be careful only to remove rules that no page uses.

HTTP caching

When you set the correct HTTP caching headers, you get a double win because revisits to your web pages load faster, and there is less load on your web server.

Minimizing browser reflow

Minimizing browsers reflow, reflow is the name the web browser press for re-calculating the positions and geometries of elements in the document for re-rendering part or all the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and understand the effects of various document properties on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and any elements that follow it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Visualwebz

Visualwebz

118 Followers

A Seattle web design and online marketing agency that delivers high-end websites. A passion for web development and SEO.