15 tips for optimizing website performance

15 tips for optimizing website performance

Nội dung bài viết

    15 tips for optimizing website performance

    Besides designing a website that makes a brand impression, optimizing website performance is always considered a top priority when developing and maintaining a website, especially when there are too many competitors on online channel.

    There are 15 tips for you to get more knowledge about website optimization.

    Note: Before you dive into the tips, you should accurately evaluate your website's performance. If you can determine what's slowing down your website, you can change the priorities of the tips below.

    1. Image optimization

    According to a survey of 20 website experts who give their opinion on the optimization errors websites make, 46% of experts say the first criterion they do is image optimization.

    Following up HTTP Archive 2016 report, 64% of the site's capacity comes from images.

    WebP images (lossless) are 26% smaller than PNG images and 25-34% than the JPEG files, in the manner of Google.

    (WebP is a type of image formats created by Google, with the purpose of replacing JPEG, PNG and GIF, while also supporting good compression, transparent images and effects.)

    Here are units provide images compression and optimization tools.

    Plugins:  

    • Grunt: grunt-contrib-imagemin

    • Gulp: gulp-imagemin

    Tools

    • TinyPNG

    • Kraken.io

    • JPEGmini (app available for OSX, iOS, Windows) 

    2. Reduce HTTP requests

    When your browser retrieves data from the server it uses http (Hypertext Transfer Protocol). This is the method of request/response between the client and the server.

    In general, the more HTTP requests your website makes, the slower it will load.

    There are many ways you can reduce the number of requests such as:

    ·         JavaScript inline (only if it is very small)

    ·         Use CSS Sprites

    ·         Reducing the amount of content of third-party plugins increases external requests

    ·         Don't use a third-party framework unless you really need to

    ·         Use less code!

    ·         Combining CSS and JS files

     

    First example for HTTP request cleaning

    This is an example of http added that is often removable. There are people who turn on marketing and advertising on Google Analytics, and in actual, they don't use this function. Regular users have the habit of pressing enable for everything by opening this feature, then will be a second HTTP request for this URL https://stats.g.doubleclick.net/r/collect? which then generates redirect 302 in the feedback header.

    If you don't use those features, you can turn off "Remarketing" and "Advertising Reporting Features" under "Data Collection" in your Google Analytics settings.

    Sau On the other hand, you can also turn it off manually by adding ga('set','displayFeaturesTask',null)  script for your Google Analytics.

    Once turned off you will no longer see the 2nd HTTP request and your main script will not have redirect 302. This is an example of cleaning up http requests.

    Second example for HTTP request cleaning

    If you're operating WordPress, by default, it will include an additional wp-emoji-release.min.js?ver=4.3.1 JavaScript file in your header. Emojis are fun, but necessary? Is it worth the extra time and weight to add a JavaScript file?

    Absolutely not. You can turn WordPress Emojis by adding the code below into the functions.php file.

    Also, using Disable Emojis in WordPress repo is an effective way.

    Don’t let useless things make requests! Sites are also considerably optimized, not only the homepage.

    3. Reduce CSS and JavaScript

    Reducing means deleting unnecessary digits in HTML, JavaScript and CSS created by you or web design tools, such as:

    ·         White spaces

    ·         <br/>

    ·         Comments

    ·         Spacebar

    These speeds up your load time as it reduces the amount of code that must be required from the server.

    Mitigation plugin for automated workflow system

    JavaScript

    ·         Grunt: grunt-contrib-uglify

    ·         Gulp: gulp-uglify

    CSS

    ·         Grunt: grunt-contrib-cssmin

    ·         Gulp: gulp-minify-css

    With WordPress, WordPress Cache Enabler can be used to reduce CSS and JavaScript.

    4. Critical Path and render blocking resources (CSS & JS)

    When it comes to analyzing the site’s loading speed, you always need to consider things that can block DOM, causing delays when loading pages. It is also known as render blocking resources, such as HTML, CSS (including web fonts), and JavaScript. Here are some suggestions to prevent your CSS and JavaScript from blocking DOM by optimizing the critical path.

    CSS

        1) Clear CSS file

        2) Use media queries to mark CSS resources which are not render blocking ones.

        3) Reduce the CSS file amount (combine CSS files)

        4) Reduce CSS (delete spaces, digits, comments and so on)

        5) Use CSS less

    JavaScript

    There are better methods in JavaScript you need to keep in mind.

        1) Put your script before the </body> tag.

        2) Use async or defer to avoid render blocking.

        3) JS combination

        4) Reduce CSS (delete spaces, digits, comments and so on)

        5) JavaScript inline

    Async allows scripts to be loaded in the background without blocking. Then, when it completes loading, the interpreter is blocked, and the script executes. It continues when the script is completed.

    <scriptasyncsrc="foobar.js"></script>

    Your other option is JavaScript defer. This command works like async, except that it ensures that scripts follow the sequence specified in the page. Patrick Sexton has a good and clear example of using JavaScript defer.

    We'll discuss your opinion on the font later in the article.

    5. CDN Reduce CDN delay

    A content delivery network (CDN) is a system of servers scattered in many places, which stores copies of static content inside the website, then distributes it to many other servers (called PoP - Points of Presence) and from those PoPs, it will send to users when they visit the website.

    When a file is distributed by CDN, the user accesses it, the nearest distribution PoP compared to the user returns the content to the user to view. Conversely, when a user views a file without a CDN, it means that they sent a request directly to the server containing the website to access it.

    We did a test to show you the difference in the delay when there is and there isn’t a CDN. This is just about the connection perspective. We use KeyCDN's ping test tool which allows us to check from the following 10 locations at the same time favorably. And here are the results of both sides. However, using CDN will cost a lot of website design so you should plan the cost before using CDN to optimize the website.

     Server (POP) Location

    No CDN RTT (ms)

    KeyCDN RTT (ms) 

    Difference % 

    New York, US 

     36.908

     18.096

    - 50.97%

    Dallas, US

     0.751

     1.138

    + 51.53%

    San Francisco, US 

     39.645

     18.900

    - 52.33%

    Frankfurt, DE

     123.072

     3.734

    - 96.97%

     London, UK

     127.555

     4.548

     - 96.43%

    Paris, FR 

     112.417

     689

    - 98.5%

    Amsterdam, NL 

    118.418 

    10.364 

    - 91.25% 

    Singapore, SG

    202.682

     2.002

    - 99.01%

    Sydney, AU 

    191.848

     0.705

    - 99.63% 

    Tokyo, JP

    130.804

     3.379

    - 97.42% 

     

     

    6. TTFB

    Time to first byte (TTFB) is a method of measuring the responsiveness of a web server. Basically, it’s the time your browser takes to start receiving requested information from the server. The TTFB formula is calculated as follows:

     

    HTTP request time + process request time + HTTP response time

     

    TTFB is shown as a green bar in Chrome Dev Tools

    By using CDN, a fast web host server and a trustful DNS supplier help you significantly reduce the total TTFB time.

    7. Avoid Redirect 301

    Redirect is the “killer” with performance, that’s why we need to avoid it. A redirect creates more round trip times (RTT), then doubles the request time for HTML loading even before loading other resources.

    8. Caching

    Browser cache

    Leveraging the browser's cache is essential for content that rarely changes. It is recommended that memory have a maximum period of 7 days for such cases. There are different types of HTTP headers such as:

        1. Cache-control

        2. Pragma

        3. Expires

        4. Validators

    Cache-Control probably one of important HTTP cache headers, which consists of a set of commands that allow you to define when/how long a response should be cached. HTTP caching occurs when the browser stores copies of the resource for faster access. This can be used to implement HTTPS.

    Using KeyCDN, you can add or adjust Expire and Cache-Control response header which are sent to client. They are available in KeyCDN dashboard in Zones” -> “Edit Zone” -> “Show Advanced Features”.

    ·         -1 Cache-Control: no-cache

    ·         0 Push Zone: disabled / Pull Zone: as received from the origin (header honoring)

    ·         >0 Cache-Control: max-age=t, where t is the time specified in the directive in minutes converted to seconds

    This setting replaces the value received from the original point (with Pull Zone). The Expire value just only effects the browser cache, not the KeyCDN cache.

    Server cache

    There are different types of server-side caching in optimizing website performance. This is common on pages with high traffic. Varnish cache is a very beneficial example when combined with a cache plugin and CDN.

    9. Pre-loading and pre-connection

    Preloading domains is a good solution for addressing domains before the user follows that path. Here's an example of how to implement it in html's HEAD section:

    <linkrel="dns-prefetch"href="//www.example.com">

    The “//” shows that the URL starts with the server’s name (in RFC1808)

    A pre-connection allows the browser to set up connections early before a true HTTP request is sent to the server. Connections such as DNS Lookup, TCP Handshake, and TLS negotiation can be pre-initiated, eliminating 2-way latency for those connections and saving users’ time.

    This shows the actual of pre-connection for Zone Alias link of the site KeyCDN: <linkhref='https://cdn.keycdn.com'rel='preconnect'crossorigin>

    10. HTTP/2

    Jeff Atwood, co-founder of Stack Exchange and Discourse, giving answers about web performance and some of the pieces of advice he gave were "Get used to HTTP/2 in every way — a big improvement for everyone." We like Jeff's response because we fully agree that HTTP/2 is the future and has tremendous performance benefits.

    Then, the programming language, there's a good example when you have to deal with multiple images in the page and show how HTTP/2 outperforms HTTP/1.

    To enable HTTP/2 what you need is an SSL certificate (TLS required) and an HTTP/2 support server. You can use KeyCDN's HTTP/2 test tool to see if it does support. And currently KeyCDN offers free SSL certificates with our Let's Encrypt integrated technology. Haven't switched to HTTPS yet? We also have instructions to switch from HTTP to HTTPS.

    11. Font performance for Web

    HTTP Archive shows that, 60% of websites now use custom fonts. This is an increase of more than 850% since 2011. The disadvantage of web fonts, like Google Fonts, is that it adds HTTP requests to external resources. Web fonts are also blocking resources. Here are tips for better performance for web fonts.

       1. Prior the fonts that browser assists

       2. Choose styles you need

       3. Keep the digit sets minimum

       4. Save fonts internally or use pre-loading

       5. Save in Internal Storage with Base64

    Examples for each of the above methods in the post about analyzing the performance of web fonts. Georgia is a great font system that is easy to see and understandable.

    You can also convert Google Font to your CDN. We made comparisons between Google's CDN usage and KeyCDN, and faster results when using KeyCDN. Why? Because it minimizes the number of HTTP requests, DNS lookups, allow you to take advantage of a single HTTP/2 connection, and have more control.

     Speed Test

    Google CDN (ms)

    Key CDN (ms)

    Winner

    WebPageTest Load Time

     1871ms

     1815ms

    KeyCDN

    WebPageTest Fully Loaded

    1929ms

    1862ms

    KeyCDN

    Pingdom Load Time

    355ms

    324ms

    KeyCDN

     

     

     

    12. Hotlink protection

    Protecting hotlinks is like blocking HTTP referrer from allowing externals to embed your resources in their website. Protecting hotlinks will save bandwidth by not letting other pages show your photos.

    For example, the URL of your page is www.domain.con. To prevent hotlinking your photos from another page and display alternate photos as donotsteal.jpg from the server image, place this code in the .htaccess file

    RewriteEngine OnRewriteCond%{HTTP_REFERER} !^http://(.+\.)?domain\.com/[NC]RewriteCond%{HTTP_REFERER}!^$RewriteRule.*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/donotsteal.gif[L]

    KeyCDN also has an easy way to turn on hotlink protection to protect your CDN bandwidth. See our guide to how to create a Zone Referrer.

    13. 404 error fixing

    Any missing file will create a 404 HTTP error. Depending on the platform you are using error 404 can be quite heavy for your server. For example, Drupal has a resource-intensive 404 error. In a normal page with an affordable load module, you can see between 60-100MB of memory consumed on the server when leading to page 404.

    We do not recommend installing plugins or modules to check 404, instead we recommend that you regularly run your website through external services such as Online Broken Link Checker or tools like Screaming Frog. This ensures you don't waste the server's resources on this work. You can also view them in the Google Search Console.

    14. Use adjusted images

    Most of these cases often happen in sales websites (you can see more articles creating the best free sales website) and news websites because there is always not a large number of images. And in fact, today's readers also tend to see pictures more than they do about content. Here is the advice:

    You should always upload your photos proportionally and not depend on CSS to adjust the size of the photo. If you do, you'll come across google page speed advice: "The ultimate tip: "You can save 5.8 KB (51%) by compressing and adjusting the size ..."

    That means your images are resized by the browser. For example, your image is 400px width, but it is limited with 300px width column. This results in your image being ratioed to 300px due to CSS so that it fits the column size. It is better to regularly upload photos in proportions and up multiple resolutions for photos to use the right resolution for each device.

    Note: It is not always works with CSS, especially using high resolution retina devices.

    15. Database optimization

    And finally, the database optimization. Whether it's cleaning old unused tables or creating indexes for faster access, there are ways to optimize.

    Summary

    Website design is simple but running the site we have hundreds of ways to optimize the web performance to improve your content transfer and speed, from optimizing images, to CDN implementation, to caching browsers and servers, taking advantage of HTTP/2, Gzip, PHP7, HHVM and more.

     

    PROJECT SHARING

    Share with us basic requirements to get reasonable price quotation