आपने जिस पेज का अनुरोध किया है वह फ़िलहाल आपकी भाषा में उपलब्ध नहीं है. पेज के निचले हिस्से से कोई दूसरी भाषा चुनी जा सकती है. इसके अलावा, किसी भी वेबपेज का अपनी पसंदीदा भाषा में झटपट अनुवाद भी किया जा सकता है. इसके लिए, आपको Google Chrome की पहले से मौजूद अनुवाद करने की सुविधा का इस्तेमाल करना होगा.

Rich media developer's guide

Reduce HTML5 file size

An HTML5 creative commonly refers to ads created with HTML, CSS, and JavaScript. HTML5 creatives provide many opportunities to compress your files. Many of the tips provided below can be implemented in under 15 minutes.

Use Google Web Designer

Google Web Designer is a web application for HTML5 development that's integrated seamlessly with Studio and Asset Library. In addition, Google Web Designer has built-in compression for images and code, Google web fonts support, SVG support, CSS animation support, and more.

Get started with Google Web Designer

Check your file size

Before reducing file size, check out your current file size and review the following guidelines and terms.

Raw file size vs. compressed file size

To review your raw file size:

  • In Studio, check your Total file size in the Manage files step of the Studio creative workflow.
  • In Google Web Designer, click Publish > Publish locally to view Total Size (Raw) in the publish dialog. You can also view the current file size in the Ad Validator panel.

Google Web Designer compresses creatives with the free software gzip. If you're not using Google Web Designer, you can download a free copy of gzip, compress them on your local workspace, and inspect the file size.

The publisher’s ad server may use a different means of compression, so it's a good idea to check with your publisher to resolve potential disagreements over compressed size calculations.

File size baseline

Before you build your creative, it’s essential to understand your publisher’s ad serving specifications. However, many publishers follow the IAB recommendation of 200 KB (compressed) initial load for the creative and 300 or 500KB for the total creative size (depending on format). Initial load refers to the total, compressed file size of all creative assets delivered to the browser for initial ad display. This includes all files—images, HTML, CSS, and JavaScript.

Enabler file size

The Enabler must be included in Studio creatives, but web browsers hold a cached copy, because the same script is loaded for every Studio creative. The size of the Enabler script is 25 KB (compressed) and 75 KB (raw).

See the IAB and Studio guidelines for additional details:

About Chrome's Heavy Ad Interventions

Creatives with a file size larger than 4 MB, CPU usage of more than 15 seconds per 30-second period, or 60 seconds of total CPU usage might be unloaded by Chrome at serving time.

Polite load and publisher specs

Polite loading delays the loading of additional creative assets (like images and video) until the publisher's page is loaded. This is different than initial load, which refers to the total, compressed file size of all creative assets delivered to the browser for initial ad display. Some publishers require polite loading, but it's a good idea to include it, even when it's not required. Learn how to set up polite load

Review your publisher's Rich Media HTML5 specs. Publishers may count file size based on the compressed gzip format, or they may prefer to count the raw file size. Individual publisher specs may differ from IAB specs depending on placement, ad type, etc. Some publishers may be more willing to compromise on build specs. Also take note of any limits for animation or video play time.

Reduce image size

Before you attempt to reduce the size of an image, first consider whether an image is even necessary. Some image elements may be replaced with CSS styles. Below are suggestions and resources for reducing the number of images in your creative and for optimizing the images you need.

Animate with CSS

Consider using CSS3 animations for transitions and transforms instead of JavaScript. CSS transforms use the GPU (Graphics Processing Unit) instead of the CPU (Central Processing Unit) for rendering animations, which improves performance and reduces JavaScript file size.

For more complex animations (including particle animations), consider using GreenSock’s JavaScript animation libraries (GSAP). GreenSock simplifies the more cumbersome aspects of CSS animation, such as adjusting the timing of multiple animations and independently animating transform properties.

Don't use JavaScript libraries or frameworks that use JavaScript's setInterval method for animations, and do not use the setInterval method when hand coding. setInterval uses up a lot of browser resources, affects performance, and requires more code. If JavaScript animations are mandatory, then consider using the requestAnimationFrame method, which is specifically made for animations.

Learn how to optimize animation performance
Using requestAnimationFrame
CSS vs JavaScript Animations

Before uploading your CSS files to Studio, minify your CSS with a CSS Minifier.

Reduce JavaScript file size

Here are some tips for reducing your JavaScript file size:

Combine and compress your JavaScript
If you have multiple JavaScript files, combine them into one. Use tools that remove comments and extra whitespace from your JavaScript.

Tips for minifying
  • Keep an uncompressed copy handy for future updates.
  • Studio requires that JavaScript files have a .js extension, not .min.js.
  • If you minify your JavaScript files, you can't easily add tracking. Add tracking first, then minify the JavaScript file.

Optimize fonts

If you're using a font other than the standard web fonts, consider using Google Fonts, a large library of free fonts. To reduce file size, be sure to only request the characters you need from the font instead of the entire typeface.

However, it's also important to consider that only absolute URLs are cached by a browser. Although http://fonts.googleapis.com/css?family=Philosopher&text=Hello will be the smallest size for a specific creative, it will still be seen as a separate request from http://fonts.googleapis.com/css?family=Philosopher&subset=latin, which may already be cached in the browser history. Take advantage of caching whenever possible to make your creatives load faster.

Learn more about web fonts
Optimizing font requests with Google Web Fonts
Font subsetting for Typekit and self-hosted web fonts

Was this helpful?

How can we improve it?

Need more help?

Try these next steps:

16158566744349057153
true
Search Help Center
true
true
true
true
true
74220
Search
Clear search
Close search
Main menu
false
false
false